小程序开发工具--详情--本地设置--启用自定义处理命令
用来执行脚本
“右滑手势返回”能力调整
为了提升用户操作的流畅性，同时让用户在微信内拥有一致的操作体验，“右滑手势返回”将成为基础配置，即所有小程序内都可以从屏幕左侧边缘向右滑动返回上一个界面。 在即将发布的7.0.5客户端版本中，页面配置中的 disableSwipeBack 属性将不再生效，请开发者及时调整。
顶部固定，且支持下拉刷新
data: {
bgTop: 0,
},
onPageScroll: function (e) {
setData({
bgTop: e.scrollTop
});
},
.bg-image {
position: fixed;
width: 100%;
top: bgTop;
}
背景图为fixed，top随滚动而改变。重点就是onPageScroll。
以上为错误示范，其实重点是。android机型上不需要做任何设置，ios上设置了也没用。bgTop: 0，不能直接top: 0。onPageScroll也是没必要的
还可使用 scroll-view 的下拉刷新，且可以自定义样式。
用wxs监听滚动事件，设置样式。
request域名问题
不在以下 request 合法域名列表中，请参考文档
解决方案：在详情--本地设置中勾选“不校验合法域名。。。”
image
mode widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。应避免使用widthFix，尽量指定宽高。
<image mode="widthFix" src="{{src}}"></image>
自定义NavBar
导航栏高度
iOS 44px （4+32+8）
android 48px （8+32+8）
胶囊与状态栏间距（应该计算得出）ios 4px，Android 8px，与导航栏底边距8px（只能取固定值）。
胶囊高度 32px
let rect = wx.getMenuButtonBoundingClientRect()
console.log(rect.height) // 32
状态栏高度，刘海屏通常为44px
let info = wx.getSystemInfoSync()
console.log(info.statusBarHeight) // 44
页面切换优化
- 提前发起数据请求：在一些对性能要求比较高的场景下，当使用 JSAPI 进行页面跳转时（例如
wx.navigateTo），可以提前为下一个页面做一些准备工作。页面之间可以通过 EventChannel 进行通信。例如，在页面跳转时，可以同时发起下一个页面的数据请求，而不需要等到页面 onLoad 时再进行，从而可以让用户更早的看到页面内容。
资源加载优化
-
避免滥用 image 组件的 widthFix/heightFix 模式：
widthFix/heightFix 模式会在图片加载完成后，动态改变图片的高度或宽度。图片高度或宽度的动态改变，可能会引起页面内大范围的布局重排，导致页面发生抖动，并造成卡顿。对于页面的背景图或 banner 图，应尽量预先指定图片的尺寸，避免图片加载完成后再进行二次的尺寸调整。
渲染性能优化
- 适当监听页面或组件的 scroll 事件
只要用户在 Page 构造时传入了 onPageScroll 监听，基础库就会认为开发者需要监听页面 scoll 事件。此时，当用户滑动页面时，事件会以很高的频率从视图层发送到逻辑层，存在一定的通信开销。
不需要监听事件时，Page 构造时应不传入 onPageScroll 函数。
Page({
onPageScroll () {} // ❌不要保留空函数
})
Page({
// ✅ 应直接不传入
})
合理使用 setData
setData 是小程序开发中使用最频繁、也是最容易引发性能问题的接口。
-
setData的过程，大致可以分成几个阶段：
- 逻辑层虚拟 DOM 树的遍历和更新，触发组件生命周期和 observer 等；
- 将 data 从逻辑层传输到视图层；
- 视图层虚拟 DOM 树的更新、真实 DOM 元素的更新并触发页面渲染更新。
- data 应只包括渲染相关的数据
setData 应只用来进行渲染相关的数据更新。用 setData 的方式更新渲染无关的字段，会触发额外的渲染流程，或者增加传输的数据量，影响渲染耗时。
- ✅ 页面或组件的 data 字段，应用来存放和页面或组件渲染相关的数据（即直接在 wxml 中出现的字段）；
- ✅ 页面或组件渲染间接相关的数据可以设置为「纯数据字段」，可以使用 setData 设置并使用 observers 监听变化；
- ✅ 页面或组件渲染无关的数据，应挂在非 data 的字段下，如
this.userData = {userId: 'xxx'}； - ❌ 避免在 data 中包含渲染无关的业务数据；
- ❌ 避免使用 data 在页面或组件方法间进行数据共享；
- ❌ 避免滥用 纯数据字段 来保存可以使用非 data 字段保存的数据。
- 控制 setData 的频率
每次 setData 都会触发逻辑层虚拟 DOM 树的遍历和更新，也可能会导致触发一次完整的页面渲染流程。过于频繁（毫秒级）的调用setData，会导致以下后果：
- 逻辑层 JS 线程持续繁忙，无法正常响应用户操作的事件，也无法正常完成页面切换；
- 视图层 JS 线程持续处于忙碌状态，逻辑层 -> 视图层通信耗时上升，视图层收到消息的延时较高，渲染出现明显延迟；
- 视图层无法及时响应用户操作，用户滑动页面时感到明显卡顿，操作反馈延迟，用户操作事件无法及时传递到逻辑层，逻辑层亦无法及时将操作处理结果及时传递到视图层。
因此，开发者在调用 setData 时要注意：
- ✅ 仅在需要进行页面内容更新时调用 setData；
- ✅ 对连续的 setData 调用尽可能的进行合并；
- ❌ 避免不必要的 setData；
- ❌ 避免以过高的频率持续调用 setData，例如毫秒级的倒计时；
- ❌ 避免在 onPageScroll 回调中每次都调用 setData。
- 选择合适的 setData 范围
组件的 setData 只会引起当前组件和子组件的更新，可以降低虚拟 DOM 更新时的计算开销。
- ✅ 对于需要频繁更新的页面元素（例如：秒杀倒计时），可以封装为独立的组件，在组件内进行 setData 操作。必要时可以使用 CSS contain 属性限制计算布局、样式和绘制等的范围。
- setData 应只传发生变化的数据
setData 的数据量会影响数据拷贝和数据通讯的耗时，增加页面更新的开销，造成页面更新延迟。
- ✅ setData 应只传入发生变化的字段；
- ✅ 建议以数据路径形式改变数组中的某一项或对象的某个属性，如
this.setData({'array[2].message': 'newVal', 'a.b.c.d': 'newVal'})，而不是每次都更新整个对象或数组； - ❌ 不要在 setData 中偷懒一次性传所有data：
this.setData(this.data)。
- 控制后台态页面的 setData
由于小程序逻辑层是单线程运行的，后台态页面去 setData 也会抢占前台页面的运行资源，且后台态页面的的渲染用户是无法感知的，会产生浪费。在某些平台上，小程序渲染层各 WebView 也是共享同一个渲染线程，后台页面的渲染也会导致前台页面的卡顿。
✅ 页面切后台后的更新操作，应尽量避免，或延迟到页面 onShow 后延迟进行；
❌ 避免在切后台后仍进行高频的 setData，例如倒计时更新。
使用setData更新变量
changeItemInArray: function() {
// 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
addNewField: function() {
this.setData({
'newField.text': 'new data'
})
}
数组索引不能直接用变量，解决方案：
var like = `movielist[${id}].like`
this.setData({
[like]: 'like'
})
取原来的值：
let {
list
} = this.data;
let key = `list[${idx}].show`;
let show = list[idx].show;
this.setData({
[key]: !show
});
小程序倒计时
startCoundown(seconds) {
let {
timer
} = this.data;
if (timer) {
clearInterval(timer);
}
let countdown = app.formatSeconds(seconds);
this.setData({
'orderInfo.countdown': countdown
});
timer = setInterval(() => {
seconds--;
countdown = app.formatSeconds(seconds);
if (seconds > 0) {
this.setData({
'orderInfo.countdown': countdown
});
} else {
clearInterval(timer);
this.getOrderInfo();
}
}, 1000);
this.data.timer = timer;
},
注意timer的赋值
this.data.timer = timer;
考虑到下拉刷新，要在startCountdown中取消timer
在onUnload中取消timer
onUnload: function () {
let {
timer
} = this.data;
if (timer) {
clearInterval(timer);
}
},
hover-class
微信小程序中，可以用 hover-class 属性来指定元素的点击态效果。但是在在使用中要注意，大部分组件是不支持该属性的。
目前支持 hover-class 属性的组件有三个：view、button、navigator。
不支持 hover-class 属性的组件，同时也不支持 hover-stop-propagation、hover-start-time、hover-stay-time 这三个属性。
background
如果background写在wxml中，那么background-size也要写在style中，如果写在wxss中不会生效。
小程序 safe-area-inset-bottom iphoneX
获取系统屏幕边框的安全距离：
safe-area-inset-top
safe-area-inset-right
safe-area-inset-bottom
safe-area-inset-left
ios11：constant（safe-area-inset-bottom）
ios11.2：env（safe-area-inset-bottom）
scroll-view
scroll-view的子元素最好包一层，不然宽度可能不起作用。
遮罩层禁止滚动
当小程序使用页面进行滚动时，可以给遮罩设置catchtouchmove属性来禁止页面滚动
<view class="mask" catchtouchmove="true"></view>
