值得记录的 （八）- 微信小程序 wxs / getSyste

之前接到的两个小程序的项目需求都进入测试阶段了，最后总结两个关于小程序开发过程中值得记录的关键点。

wxs

在项目需求中，需要排除订单号包括 UNZ 的物流不显示在物流中心。最简单的方法就是在条件渲染中使用 indexOf 或者 includes 进行筛选。结果微信小程序居然不支持在 WXML 模板的插值表达式中直接使用 indexOf 方法 ... 查了一些文档之后发现需要使用 wxs。


先在 wxs 里面写好 indexOf 方法，放置到需要使用该方法的 WXML 的最后。

<!-- 使用wxs 添加 indexOf 方法 -->
<wxs module="helper">
  var indexOf = function(array, item) {
    return array.indexOf(item);
  }
 
  module.exports.indexOf = indexOf;
</wxs>

然后再到模板中使用 helper.indexOf() 传递参数使用相应的方法。

<block wx:for="{{dataArr}}" wx:for-index="id_1" wx:key="{{id_1}}">
  <view wx:if="{{ helper.indexOf(dataArr[id_1].order_sn, 'UNZ') < 0 }}"></view>
</block>

getSystemInfo

通过 getSystemInfo success 返回的 res 可以查看到机型。这里遇到了一个坑点。

小程序开发工具得到的 res.model 直接就是 iPhone X ，一开始我并没有使用 indexOf 或者任何正则去判断。只是写了一个等于。

后来经过测试发现发布小程序体验版这个语句好像没有被执行，但是微信开发者工具上预览却没问题。后来打开小程序的 vConsole 控制台才发现在真机上 log 输出的是 iPhone X(GSM+CDMA)<iPhone10,3>。

所以之前情况下执行的 this.setData({ipx:true}) 也并没有执行，输出 ipx 显示 undefined。后来做了下面的修改便正常了。

wx.getSystemInfo({
  success: res => {
    console.log(res.model)
    // iphone X 适配
    if (res.model.indexOf("X") > 0) {
      this.setData({
        ipx: true
      })
    }
  }
})
//  然后针对 iPhone X 进行适当调整