「轻算账」小程序实践笔记-白红宇

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

需求

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

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

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

准备

页面样式

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

小程序框架

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

代码

遇到的问题：

#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// jsPage({  data: {    someValue: ''  },  clearInput() {    this.setData({      someValue: ''    })  }})复制代码

#4：如何引用 iconfont？

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

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

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

// .wxml
      
     
    // .jsfocusInput() {  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
    
       ...
    复制代码

#8：如何收集意见反馈？

最直观的方式当然是提供一个意见反馈的表单页面，但我想指出的是微信官方也提供了用于收集意见反馈的组件，可以直接使用（ open-type="feedback"）。

唠叨

在开发其他小程序项目时，我没有使用任何框架，因为如果项目到了其他人手里，会产生一定的维护成本，选用原生开发最为妥当。但是，我必须强调一下 touchui 单文件编辑这个特性，非常适合个人项目开发（使用原生开发时每个页面都有 4 个文件，我切换文件都快疯了……）。

资源

Touch WX是一套完全免费的微信小程序开发框架，扩展了小程序的能力。

图标资源

存放项目相关资源

制作 logo 不求人！

视频压缩（手机录制的操作视频需要进行压缩）

文章

(文不对题，大家看文章内容就好)

总结了小程序开发中常见的一些问题（小程序 API 异步方案…），看一遍就可以对开发小程序有一个大致的了解！

很棒的文章，看完就基本知道怎么写小程序的自定义组件了~

很棒的文章，解答了很多小程序开发过程中会遇到的问题，值得参考！（引入 iconfont，使用 less，动态设置 data 中某个值、上拉加载和下拉刷新、上传图片、async/await） (阅读笔记：setData 操作是同步的，能马上获取刚刚设置的属性；但是页面渲染则是异步进行的。)

小程序、wepy、mpvue、taro…… 我觉得还是使用原生开发比较稳定（缺点：无自动构建、无数据流管理）

也许以后会用到……

非常棒的文章，干货满满！

小程序启动加载性能

控制代码包的大小

分包加载

首屏体验（预请求，利用缓存，避免白屏，及时反馈)

小程序渲染性能

避免不当的使用setData

合理利用事件通信

避免不当的使用onPageScroll

优化视图节点

使用自定义组件

做用户登录相关逻辑时可以参考！

有问题可以看看这里有没有解决方案，过一遍就大概知道怎么开发小程序了。

推荐！有一些不错的解决方案：Promise 封装、封装 wx API、跨页面事件通讯 event、监听数据变化 watch...

需要时可以快速过一遍。

供参考~