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

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

需求

勤俭节约（贫穷）如我，常常会和他人一块儿拼单点外卖或者购物，然而因为你们购买的商品价值不一样，用上了各类优惠券或者参与满减活动以后，钱就很差算了。
举个例子：同事有一张满 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>

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

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

唠叨

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

资源

Touch WX 开发文档

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

iconfont

图标资源

码云

存放项目相关资源

launchaco

制做 logo 不求人！

videosmaller

视频压缩（手机录制的操做视频须要进行压缩）

小程序开发文档

文章

基于后端云微信小程序开发 (文不对题，你们看文章内容就好)

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

【微信小程序】自定义组件

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

小程序开发技巧总结

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

我与小程序的故事以及小程序框架选型

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

微信小程序仿APP section header 悬停效果

也许之后会用到……

【微信小程序】性能优化

很是棒的文章，干货满满！
小程序启动加载性能
1.控制代码包的大小
2.分包加载
3.首屏体验（预请求，利用缓存，避免白屏，及时反馈)
小程序渲染性能
1.避免不当的使用setData
2.合理利用事件通讯
3.避免不当的使用onPageScroll
4.优化视图节点
5.使用自定义组件

小程序登陆态控制探索全过程

作用户登陆相关逻辑时能够参考！

小程序入门总结篇

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

mini-programm-template

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

开发 | 如何在微信小程序的页面间传递数据？

须要时能够快速过一遍。

微信小程序：回调，Promise，async，await 的使用例子

供参考~