这篇文章主要记录我做小程序「轻算账」过程中遇到的一些问题和解决方案，就当是做个总结，也希望其中有能够帮助到他人的信息。

需求

勤俭节约（贫穷）如我，经常会和他人一起拼单点外卖或者购物，然而由于大家购买的商品价值不同，用上了各种优惠券或者参与满减活动之后，钱就不好算了。

举个例子：同事有一张满 100 减 50 的购书优惠券，然而她想买的书才达到 80 元，这时候她问你有没有想买的书，你挑了一本 20 元的书，结账后你们一共花了 50 元，这个时候你需要给同事多少钱？最合理的方式当然是按照你们购买的商品价值 4:1(80:20) 平分那张优惠券，也就是说你可以优惠 50*(1/5)=10 元，最后你需要给你的同事 20-10=10 元！

以上例子中的商品价格比较好算，但实际情况中这种计算特别麻烦，因此我开发了这款能够协助你轻松算出拼单个人实际支出的小程序。（PS: 如果想快速知道如何使用，建议看一下视频版的使用说明）

准备

页面样式

逛 Dribbble，找到喜欢的页面设计，参考它的样式配色等。（我知道做得不好看，但总归过了我自己这关了……）

小程序框架

之前使用过 mpvue，条条框框有点多，所以这次不打算用，觉得写起来会更灵活些。我还查看了多个小程序组件库：赞组件库演示、WeUI组件库演示、MinUI组件库、Vant组件库演示、AntUI组件库、ZANE组件库、TouchUI组件库等（可以用关键词‘组件’搜索小程序，会有一系列的组件库示例）。看了那么多组件库，我觉得最满意的是 TouchUI 组件库，里面组件很多，我想要的都有，可以少写不少代码。选择使用 TouchUI 组件库后，我发现它不仅是组件库，还是一个轻量的开发框架，最突出的一点是编写代码时将原本小程序一个页面分四个文件的方式改为了单文件方式，具体见 Touch WX 开发文档。

代码

遇到的问题：

#1：可以在小程序里使用 emoji 吗？

可以，我是用在复制账单信息这里，觉得加上 emoji 更有趣味性。具体实现是：我直接在这个网站复制需要的 emoji，粘贴到代码中，结合账单信息拼接出所需字符串，利用 API wx.setClipboardData(Object object) 将内容设置到剪贴板上，粘贴的时候就能看到 emoji 了~

#2：如何优化性能？

最耗费渲染性能的一句代码就是 this.setData() 了，实际编写代码过程中，但凡未被绑定到 wxml 页面上的数据，我都归纳到 this._data 字段下，与 this.data 彻底区分开来，没有必要的字段坚决不使用 this.setData() 进行更新，示例如下：

 Page({
   _data: {
    priceValue: ''
  },
  data: {
    ...
  },
  bindPriceInput(e) {
    // 在使用 input 组件的过程中我将其值暂存在 this._data 中
    this._data.priceValue = e.detail.value.trim();
  },
  confirmPriceInput() {
    // 需要的时候获取即可，无需使用到 this.setData() 函数
    let priceValue = this._data.priceValue;
    ...
  }
 })

#3：如何实现清空 input 功能？

// wxml
<input class="input" value="{{someValue}}"/>

// js
Page({
  data: {
    someValue: ''
  },
  clearInput() {
    this.setData({
      someValue: ''
    })
  }
})

#4：如何引用 iconfont？

我知道的有两种方式，一种是将 iconfont 的 ttf 文件转为 base64，详细的使用说明可以查看这里；还有一种是引用 iconfont 的在线链接，详细说明可以查看这篇文章。大家可以根据自己的需求选择其中一种，区别就是一个资源在本地，一个托管在 alicdn。我个人偏向于使用后一种，这样就不用每次更新 iconfont 都去转换 ttf 文件了……

#5：如何实现 input 自动聚焦功能？

实现自动聚焦功能并没有什么难度，但是在我的使用场景中我遇到了问题：我的 input 组件放置在一个弹框组件中，我希望在弹框出现后 input 能够自动聚焦，弹框关闭后重置控制聚焦的值，代码如下：

// .wxml
<ui-popup bindshow="focusInput" bindhide="blurInput">
  <input focus="{{inputFocus}}"/>
</ui-popup>

// .js
focusInput() {
  setTimeout(() => {
    this.setData({
      inputFocus: true
    })
  }, 300) // 300ms 是 ui-popup 组件出现时的动画时长
},
blurInput() {
  this.setData({
    inputFocus: false
  })
}

尝试多次后我发现 css 动画执行时自动聚焦无法实现，我需要在动画结束后再将 inputFocus 的值设置为 true。

#6：如何获取打赏？

个人开发者总是希望用户能够认可自己花时间打造出来的工具，不管怎样，研究一下如何获取赞赏又没有什么坏处。我参考了这篇文章和一些资料，得知可以使用赞赏码获取打赏，但是小程序的 image 组件中二维码/小程序码图片不支持长按识别，仅在 wx.previewImage 中支持长按识别。所以最后我的方案就是：

// 保存了自己的赞赏码，托管在码云上，点击某个按钮后直接进入图片预览，此时赞赏码长按可识别
handleLikeButton() {
  wx.previewImage({
    current: '', // 赞赏码图片的 http 链接
    urls: [] // 需要预览的图片 http 链接列表
  })
}

#7：如何在其他项目中使用 touchui 的组件？

我很喜欢 touchui 的组件，节省了我很多时间。我在不使用任何框架的小程序项目中也想用它的组件，稍微尝试后我的总结如下：

// 当你基于 touchui 构建了一个项目，启动开发服务后（执行 `tui dev` 命令）
// 可以在项目中使用它的任意组件（直接使用，不需要任何引入）
// 保存代码后，框架会将修改后的 .wx 文件
// 编译成 index.html、index.js、index.json、index.wxss 至对应 dist 目录中
// 同时，使用到的组件也将被编译到 dist/packages/touchui-wx-components
// 这些编译过后的代码就是小程序能够使用的组件代码
// 可以直接将相应的文件夹复制到自己的项目中使用
//（如果有缺少什么依赖的 util 文件，根据需要都复制过去就好了）

// pages/home/index.wx
<ui-popup>
  ...
</ui-popup>