微信小程序入门笔记（上）

目前项目正在开发中，总结地比较少，也不全，后续会更新。

踩坑点

scroll-view标签设置横向滚动时，需要以下设置

设置滚动项display：inline-block;

设置滚动视图容器white-space: nowrap;

滚动项不要用float

背景图可以用base64格式，或者网络图片，不能用本地图片；本地图片只能用image标签，也就是说本地图片不能用作雪碧图

image标签有默认的宽高，所以image都需要重新设置宽高

模板中变量一定要用{{ }}包起来，比如

<view wx:if="{{true}}">
<view wx:for="{{itemList}}" wx:key='itemId'> </view>
</view>

然而，我经常忘记，经常踩坑！！！

模板中{{ }}不能执行js中定义的方法，只能执行wxs中定义的方法。比如Angular中的Pipe可以通过wxs实现：

// pipe.wxs
function getOrderStatus(status) {
var statusMap = {
WAIT_PAID: '待付款',
WAIT_SHIPPED: '待发货',
WAIT_RECEIVED: '待收货',
RECEIVED: '已收货',
CANCELED: '已取消',
REFUNDED: '已退款'
}
return statusMap[status] ? statusMap[status] : '未知状态';
}

module.exports = {
getOrderStatus: getOrderStatus
}

// order-list.wxml
<wxs module="orderModule">
module.exports = require('../../../utils/filter.wxs')
</wxs>

<view> {{orderModule.getOrderStatus(order.status)}} </view>

绑定事件直接写函数名，参数的传法是data-开头传数据，参数大写的会直接转为小写，分隔符会直接转为驼峰，取值用event.currentTarget.dataset.**来取，是不是很奇怪？

// mine.wxml
<view data-orderType="0" bindtap="navToOrder">
<text> 全部订单 </text>
</view>
<view data-order-type="1" bindtap="navToOrder2">
<text> 全部订单 </text>
</view>

//mine.js
Page({
data: {
...
},
navToOrder(event){
wx.navigateTo({
url: '../order/order-list/order-list?type=' + event.currentTarget.dataset.ordertype,
})
},
navToOrder2(event){
wx.navigateTo({
url: '../order/order-list/order-list?type=' + event.currentTarget.dataset.orderType,
})
},
})

页面切换，如果是作为tab的页面要用switchTab，不能用navigateTo。如果点击没反应，用fail函数去捕捉错误信息。

开发者工具假死了，重启再试！！！

注意点

使用 page标签选择器，可以修改顶层节点的样式

模板template只能使用data传入的数据

catch开头的事件能阻止冒泡，比如catchtap

for循环默认字段为index和item，最好加上wx:key属性，防止重新渲染，提高性能

image可以设置自适应模式mode，具体点见https://mp.weixin.qq.com/debug/wxadoc/dev/component/image.html

生命周期事件触发的顺序是onLoad加载， onShow显示，onReady渲染完成，onHide和 onUnload不会同时触发，根据不同情况只触发一个

更新数据只能用setData（不然视图不能及时更新），setData时的key可以写成a.b.c.d的形式；虽然如此，有时候想要动态地改变某个值还是很不方便的，可以先赋完值，再用setData来通知更新试图

url参数获取：用onLoad中的options

事件event的target和currentTarget什么区别？

target是触发组件，currentTarget是当前组件。因为事件有捕获冒泡阶段，触发组件未定一直都是当前组件

注册小程序App()中有onError事件，可以跟后端约定接口将错误传给后端，以更好地排错

目前小程序不提供跳转到网址的功能大家都知道的咯（它能，但不提供）

用wx.getUserInfo请求用户信息，用户拒绝之后短时间不会再请求怎么办？

button组件有个open-type属性能让用户主动去调起授权接口

调用wx.openSetting()接口会查看之前发起的授权设置信息，通过引导用户修改这里的授权设置，可以在不删除小程序的情况下重新拉起某些权限的获取

//按钮再次请求授权 getUserInfo为回调函数
<button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 再次授权 </button>

// js请求
wx.getUserInfo({
success: res => {
// 获取用户信息成功后的操作
},
fail: () => {
// 用户拒绝授权后，再次授权
wx.openSetting({
success: res=>{
wx.getUserInfo({
success: res => {
// 获取用户信息成功后的操作
}
})
}
})
}
}

兼容性处理的几种方式：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html

登录具体过程：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html

延伸阅读：

github精选：微信小程序踩坑集合（更新）

小程序踩坑记录

微信小程序开发深入解读

小程序开发注意事项——前端篇

小程序开发的一些经验