本文主要记录我在制作小程序“轻记账”过程中遇到的一些问题及解决方案。这只是一个总结，希望它包含的信息可以帮助其他人。
需要
作为像我这样省吃俭用（穷）的人，我经常点外卖或者和别人一起去逛街。但由于每个人购买的商品价值不同，使用各种优惠券或参加满减活动后，很难计算出多少钱。例如：同事有书满100元减50元的优惠券，但她想买的书只要80元。这时候她问你有没有想买的书。你挑一本20元的书结账。最后你一共花了50元。这个时候你需要给同事多少钱？最合理的方式当然是按照您购买的商品价值4：1（80：20）平分优惠券，也就是说您可以获得50*（1/5）=10元的折扣，并且最后你需要给你的同事20-10=10元！上面例子中的商品价格是比较容易计算的，但是在实际情况下这个计算特别麻烦，所以我开发了这个小程序，可以帮助你轻松计算一个人的实际支出。 （PS：如果想快速了解如何使用，建议观看视频版说明书）
准备
去逛逛，找到一个自己喜欢的页面设计，参考一下它的风格、颜色等（我知道它不好看，但我终于过关了……）
我以前用过，规则很多，所以这次不打算用了。我觉得写起来会比较灵活。我还查了多个小程序组件库：像组件库demo、WeUI组件库demo、组件库、Vant组件库demo、组件库、ZANE组件库、组件库等（可以通过关键词搜索小程序）组件'，会有一系列组件库示例）。看了这么多组件库，我觉得最满意的就是组件库了。里面组件很多，我想要的都有，所以可以少写很多代码。选择使用组件库后，我发现它不仅仅是一个组件库，而且还是一个轻量级的开发框架。最突出的一点是，在编写代码时，将原来将小程序的一页分成四个文件的方法改为单个文件的方法。详细内容请参见WX开发文档。
代码
遇到的问题：
#1：可以用在小程序中吗？
好吧，我在这里用它来复制账单信息，我认为添加它更有趣。具体实现是：我直接在这个网站上复制我需要的内容，粘贴到代码中，结合计费信息拼接需要的字符串，使用API wx.()将内容设置到剪贴板，就可以看到了粘贴的时候~
#2：如何优化性能？
最消耗渲染性能的代码行是this.()。在实际编码过程中，凡是没有绑定到wxml页面的数据都会被汇总到this下面。 与 this.data 完全区别。不必要的字段不得使用 this.() 进行更新。示例如下：
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：如何实现清算功能？
// wxml
<input class="input" value="{{someValue}}"/>
// js
Page({
data: {
someValue: ''
},
clearInput() {
this.setData({
someValue: ''
})
}
})
#4：如何引用？
我知道有两种方法，一种是转换ttf文件，详细说明可以在这里找到；另一种是参考的网上链接，详细说明可以参见这篇文章。您可以根据自己的需要选择其中之一。区别在于，一种资源是本地资源，另一种资源是托管资源。我个人更喜欢使用后一种方法，这样我就不用每次更新的时候都转换ttf文件了...
#5：如何实现自动对焦功能？
实现自动对焦功能并不难，但是我在使用场景中遇到了一个问题：我的组件放置在一个弹出组件中。我希望能够在弹出窗口出现后自动聚焦，并在弹出窗口关闭后重置控件。聚焦值，代码如下：
// .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动画时无法实现自动对焦。我需要在动画结束后将该值设置为 true。
＃6：如何获得奖励？
个人开发者总是希望用户能够欣赏他们花费时间构建的工具，无论如何，研究如何获得欣赏总是没有坏处的。我参考了这篇文章和一些资料，了解到可以使用鉴赏码来获得奖励。但小程序组件中的二维码/小程序码图片不支持长按识别。仅wx中支持长按识别。所以我的最终计划是：
// 保存了自己的赞赏码，托管在码云上，点击某个按钮后直接进入图片预览，此时赞赏码长按可识别
handleLikeButton() {
wx.previewImage({
current: '', // 赞赏码图片的 http 链接
urls: [] // 需要预览的图片 http 链接列表
})
}
#7: 如何在其他项目中使用组件？
我真的很喜欢这些组件，节省了我很多时间。我还想在不使用任何框架的小程序项目中使用它的组件。经过几次尝试，我的总结如下：
// 当你基于 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>