「轻算帐」小程序实践笔记

时间 2019-11-08

标签算帐程序实践笔记繁體版

原文原文链接

这篇文章主要记录我作小程序「轻算帐」过程当中遇到的一些问题和解决方案，就当是作个总结，也但愿其中有可以帮助到他人的信息。css

需求

勤俭节约（贫穷）如我，常常会和他人一块儿拼单点外卖或者购物，然而因为你们购买的商品价值不一样，用上了各类优惠券或者参与满减活动以后，钱就很差算了。html

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

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

准备

页面样式

逛 Dribbble，找到喜欢的页面设计，参考它的样式配色等。（我知道作得很差看，但总归过了我本身这关了……）github

小程序框架

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

代码

遇到的问题：小程序

#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>
复制代码

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