- dom中绑定的data-属性会将大写转为小写，在js中获取时postId会变为postid。
<view data-postId>
var postId = event.currentTarget.dataset.postid
-
wx.showActionSheet 可以调起底部菜单
-
小程序快速对齐样式 Alt + shift + f 快速对齐样式, command+p, command+e
-
css引入
@import "template.wxss"
- 向template中传入数据时，加入三个小点代表将对象展开，这样html中套数据时就不需要再加item.
<template is="postItem" data="{{...item}}" />
- 定义，修改全局变量
// app.js
globalData: {
todo: []
}
// 修改：
app.globalData.todo = []
-
onLaunch只执行一次，onHide是小程序切换到后台运行时被调用，当从后台到前台时onShow会被调用，但onLaunch不会被调用，ui操作在onReady（页面渲染完成后）中执行
-
下拉刷新
"enablePullDownRefresh": true
// 下拉触发函数
onPullDownRefresh: function(e) {}
- 小程序使用echarts
下载：https://github.com/ecomfe/echarts-for-weixin
拷贝ec-canvas目录到自己项目目录中，在需要引入图表的页面的json文件中加如下：
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
这一配置的作用是，允许ECharts在pages/bar/index.wxml中使用组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。index.wxm中，ECharts创建了一个组件，内容如下：
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
index.js配置如下：
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
...
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
});
这对于所有 ECharts 图表都是通用的，用户只需要修改上面 option 的内容，即可改变图表。option的使用方法参见ECharts配置项文档。对于不熟悉ECharts的用户，可以参见5分钟ECharts上手教程。
- 小程序使用E charts的一些坑
10.1 百分比小于多少时不显示该百分比 可参考如下文章：https://segmentfault.com/q/1010000008096322
var val1 = 100;
var val2 = 100;
var val3 = 100;
....................
data: [
{
value: val1,
name: '<50',
label: {
show: function () {
if (val1 == 0) {
return false;
} else {
return true;
}
}(),
formatter: '{d}%',
position: 'inside'
},
labelLine: {
show: false
},
itemStyle: {
color: '#00FFFF'
}
},
{
value: val2,
name: '>=50 <100',
label: {
show: function () {
if (val2 == 0) {
return false;
} else {
return true;
}
}(),
formatter: '{d}%',
position: 'inside'
},
labelLine: {
show: false
},
itemStyle: {
color: '#0000FF'
}
},
{
value: val3,
name: '>=100',
label: {
show: function () {
if (val3 == 0) {
return false;
} else {
return true;
}
}(),
formatter: '{d}%',
position: 'inside'
},
labelLine: {
show: false
},
itemStyle: {
color: '#9900FF'
}
}
]
10.2 百分比显示几位
https://blog.csdn.net/qq_38439885/article/details/79919912
https://tieba.baidu.com/p/5042843536?red_tag=2124378091
label : {
show:true ,
formatter:function(data){
return data.percent.toFixed(1)+"%"
}
},
10.3 异步加载数据
https://blog.csdn.net/hao_0420/article/details/80931339
https://blog.csdn.net/weixin_42416141/article/details/81028876
-
小程序scroll-y一些坑
scroll-y无论为true或false都无效，都会滚动。但是设置scroll-y="{{hasMask}}” 有效 -
微信小程序滚动穿透，将position设为fixed
-
iOS的scroll-view不触发bindscrolltolower事件问题 用绝对定位解决
page {
width: 100%;
min-height: 100%;
position: relative;
}
scroll-view {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0;
}
-
绝对路径：最前面加 /
-
如果不给图片设置宽高，小程序默认宽高为300px,200px
-
字体大小可以用px,border也可以用px
-
选择器连写可以少起一些class名字，但不能复用，比较斟酌使用
-
iOS默认字体 苹方，安卓默认字体 思源
-
小程序只能继承fontsize, color
-
line-height可以消除文字间距
-
bind:tap 最好加上冒号。bind不阻止冒泡，catch阻止冒泡
-
布尔类型默认值为false,number默认值为0
-
可以在模版字符串中使用函数，如下：
console.log(`${this.test()}123`)
-
Promise是一个对象，不是函数
-
当函数有多项值，可以以对象形式传参，可以在函数外加个大括号(对象解构赋值)
-
获取text组件文本值：e.detail.text
-
触底事件只能在页面使用，不能再组件使用 onReachBottom
-
如果页面没有绑定data值，直接this.data改变值就行，如果绑定了的值，需要setData一下
-
open-data可以直接获取用户部分信息
-
想跳转到另一个小程序必须关联同一个公众号
网友评论