值得记录的 (八) - 微信小程序 wxs / getSystemInfo

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

wxs

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


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

1
2
3
4
5
6
7
8
<!-- 使用wxs 添加 indexOf 方法 -->
<wxs module="helper">
var indexOf = function(array, item) {
return array.indexOf(item);
}

module.exports.indexOf = indexOf;
</wxs>



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

1
2
3
<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。后来做了下面的修改便正常了。

1
2
3
4
5
6
7
8
9
10
11
12
wx.getSystemInfo({
success: res => {
console.log(res.model)
// iphone X 适配
if (res.model.indexOf("X") > 0) {
this.setData({
ipx: true
})
}
}
})
// 然后针对 iPhone X 进行适当调整
本文结束  感谢您的阅读
0%