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

Posted on | In

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

踩坑点

  • scroll-view标签设置横向滚动时，需要以下设置
    1. 设置滚动项display：inline-block;
    2. 设置滚动视图容器white-space: nowrap;
    3. 滚动项不要用float
  • 背景图可以用base64格式，或者网络图片，不能用本地图片；本地图片只能用image标签，也就是说本地图片不能用作雪碧图
  • image标签有默认的宽高，所以image都需要重新设置宽高
  • 模板中变量一定要用 "{{ }} " 包起来，比如
1
2
3
<view wx:if="{{true}}">
    <view wx:for="{{itemList}}" wx:key='itemId'> </view>
</view>

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

  • 模板中 "{{ }} " 不能执行js中定义的方法，只能执行wxs中定义的方法。比如Angular中的Pipe可以通过wxs实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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.**来取，是不是很奇怪？ 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 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()接口会查看之前发起的授权设置信息，通过引导用户修改这里的授权设置，可以在不删除小程序的情况下重新拉起某些权限的获取
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//按钮再次请求授权 getUserInfo为回调函数
<button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 再次授权 </button>
// js请求
wx.getUserInfo({ 
    success: res => { 
        // 获取用户信息成功后的操作
    },
    fail: () => {
        // 用户拒绝授权后，再次授权 
        wx.openSetting({
          success: res=>{ 
            wx.getUserInfo({
              success: res => {
                // 获取用户信息成功后的操作
              }
            })
          }
        }) 
    }
}

延伸阅读：