2019帮助你更好的开发小程序

发表于 | 分类于

小程序通过setData修改数组或对象中的某一参数

1
2
3
4
5
6
let arr = `insureList[${id}].toggle`
let obj = `obj.toggle`
this.setData({
  [arr]: 1,
  [obj]: 1
})

小程序通过 wxs 实现 filter 过滤器

小程序也有 filter 属性，你知道吗？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 文件名称为 ：filter.wxs
// es6语法不能使用
function filterOrderTitleName(status) {
  switch (status) {
    case "1":
      return "待支付";
    case "2":
      return "待配送";
    case "3":
      return "配送中";
    case "4":
      return "已完成";
  }
}
function filterPrice(str) {
  // 四舍五入 格式化数字
  // toFix(8440.55,1) => 8440.6
  var times = Math.pow(10, 2);
  var roundNum = Math.round(str * times) / times;
  return roundNum.toFixed(2);
}

module.exports = {
  filterOrderTitleName: filterOrderTitleName,
  filterPrice: filterPrice
};

使用实例，过滤处理打折后的金额小数位数

1
2
3
4
5
6
7
8
// 当前文件名：shoppingCart.wxml
// wxs 文件顶部导入
<wxs src="../../filter/filter.wxs" module="filter"></wxs>
 <view class='offerPrice nowrap'>¥{{filter.filterPrice(item.plus*100*item.price/1000)}}
    <image class='youhuiBox' src="../../assets/youhuiBox.png">
        <view class='youhuiText'>会员{{item.dazhe}}折</view>
    </image>
 </view>

小程序的 promise

我们发现小程序的异步接口都是 success 和 fail 的回调， 很容易写出回调地狱
因此可以先简单实现一个 wx 异步函数转成 promise 的工具函数

1
2
3
4
5
6
7
8
9
10
11
const promisify = original => {
  return function(opt) {
    return new Promise((resolve, reject) => {
      opt = Object.assign({
        success: resolve,
        fail: reject
      }, opt)
      original(opt)
    })
  }
}

这样我们就可以这样调用函数了

1
2
3
4
5
promisify(wx.getStorage)({key: 'key'}).then(value => {
  // success
}).catch(reason => {
  // fail
})

也可以直接使用wx-api-promisify

小程序相关资源