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

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

踩坑点

• scroll-view标签设置横向滚动时，需要以下设置
  
  1. 设置滚动项display：inline-block;
  2. 设置滚动视图容器white-space: nowrap;
  3. 滚动项不要用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
module="orderModule">
  module.exports = require('../../../utils/filter.wxs') 


 {{orderModule.getOrderStatus(order.status)}}  

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

// mine.wxml
 "0" bindtap="navToOrder"> 
   全部订单 
 
"1" bindtap="navToOrder2"> 
   全部订单 
 

//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为回调函数
type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 再次授权 

// 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精选：微信小程序踩坑集合（更新）
• 小程序踩坑记录
• 微信小程序开发深入解读
• 小程序开发注意事项——前端篇
• 小程序开发的一些经验