一、backgroundImage不支持本地图片引入
- 使用网络路径；
- 使用base64；
.bg{
background-image:url(data:image/jpeg;base64,xxxxxx);
}
- 使用image组件替代；
二、阻止事件冒泡
正常事件绑定使用的是bindtap，但是该方法无法阻止事件冒泡，这样就会触发父元素绑定的事件，小程序提供另一种方法来解决该问题，使用catchtap事件替换bindtap即可；其他事件同理，将bind换成catch。
常见结构：
/*点击跳转商品详情*/
豪华双人床
这床又大又软
/*点击添加*/
三、事件传参 target or currentTarget
target指触发事件的目标节点，currentTarget指绑定事件的节点，当事件绑定节点包含子节点时，使用currentTarget更加方便；
wxml:
/*删除按钮结构*/
删除
js:
Page({
delete(e){
e.currentTarget//必定是view节点 可以获取当前节点上携带的id
e.target//如果点击了内部image则e.target是image
}
})
四、小程序入口页面获取参数
启动小程序时参数通过wx.getLaunchOptionsSync().query访问，启动之后进入通过options访问；
/pages/index/index
Page({
onLoad(options){
console.log(options.id)//启动之后再次进入时获取所传id参数（常见为点击分享链接进入）
let options = wx.getLaunchOptionsSync();
console.log(options.query.id)//获取启动时所传id参数
}
})
五、获取用户信息
调用 wx.getUserInfo 接口，无法弹出授权询问框，默认调用失败，如果用户曾经授权过，则可成功调用此方法，否则需要使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {//曾经授权过
this.getUserInfo();//调用相关接口获取用户信息
this.setData({
canIUseUserInfo: true
})
}else{
this.setData({
canIUseUserInfo: false//否则显示button让用户点击授权
})
}
}
})
六、textarea遮挡问题
textarea属于原生组件，cover-view可以覆盖在原生组件之上，注意cover-view只能嵌套cover-view、cover-image、button。
七、去除button边框
button组件边框是伪元素：
button::after{ display: none;}
八、开发版真机调试
后台服务器搭建后，从开发者工具上设置不校验域名，就可以直接访问服务器ip或域名，但是用手机预览的时候无法进行数据的交互，用手机扫描预览后，需要点击小程序右上角---打开调试，然后重启即可！
九、扫码调试（扫描二维码进入开发调试）
在开发的过程中可能会有这样的场景，要求后台生成小程序码，用微信扫描小程序码带参数进入一个页面，但是生成的小程序码是线上的正式版本，小程度还没有上线 没有办法调试；在开发工具中点击对应按钮选择小程序码，即可模拟整个过程。
十、getCurrentPages访问页面实例，进行页面传值
对于页面之间传值，最简陋的方式是借助本地存储，一个页面存，其他页面取，也可以使用状态管理工具，但是会有种矫枉过正的感觉。大部分场景都是父子页面传值，根据实际情况可以使用小程序提供的方式，一级=>二级（路径后携带参数），二级=>一级（getCurrentPages访问上级页面实例）
//列表页
Page({
data:{
list:[]
}
})
//点击按钮进入添加页面
Page({
add(){
let pages=getCurrentPages();//获取页面栈中所有页面实例；
let page_list=pages[pages.length-2]//获取上个页面实例 length-1指最后一个页面也就是当前页面；
page_list.setData({
list:pages_list.data.list.concat("新内容")
})
}
})
十一、长列表渲染setData数据量大时，导致卡顿（数据词典）
小程序数据通信需要Native 的 JSBrigde 做中转，桥接渲染层和逻辑层，每当小程序视图数据需要更新时，逻辑层会调用小程序提供的 setData 方法将数据从逻辑层传递到视图层，经过一系列渲染步骤之后完成UI视图更新，当setData传递数据量比较大的时候，就会引发渲染性能问题。减少setData数据量和调用频率是目前开发者可以主动干预的步骤。
- 数据词典
Page({
data:{
person:{
name:"veb",
age:20
}，
list:[{
title:"西瓜"
}]
},
changeName(){
//常规写法 取出person修改name字段，然后setData更新页面
let person=this.data.person;
person.name="Veblen";
this.setData({//传入整个修改后的对象
person
})
//数据词典
this.setData({//通过数据关系 更新指定字段
'person.name':'Veblen'
})
//同理
this.setData({//通过数据关系 更新指定字段
'list[0].title':'Veblen'
})
}
})
- 长列表优化
将数据划分为二维数组结构
Page({
data:{
list:[]
},
getNextPage(){
let newList=[];
//常规写法 list:[{},{},{}]
this.setData({
list:this.data.list.concat(newList)
})
// 优化 list:[[{},{}],[{},{}]]
let index=this.data.list.length-1;
this.setData({//指定索引位置赋值新数组，索引为length指定最后一个元素之后的位置
['list['+index+']']:newList//注意：对象属性为表达式时需要用[]包裹
})
}
})
加油！