资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/「轻算账」小程序实践笔记

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

BigTomato / 1922人阅读

摘要：资源开发文档是一套完全免费的微信小程序开发框架，扩展了小程序的能力。推荐有一些不错的解决方案封装封装跨页面事件通讯监听数据变化开发如何在微信小程序的页面间传递数据需要时可以快速过一遍。微信小程序回调，，，的使用例子供参考

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

需求

勤俭节约（贫穷）如我，经常会和他人一起拼单点外卖或者购物，然而由于大家购买的商品价值不同，用上了各种优惠券或者参与满减活动之后，钱就不好算了。
举个例子：同事有一张满 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


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

#4：如何引用 iconfont？

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

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

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

  


// .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

  ...

#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 的使用例子

供参考~
私有云 混合云 高级程序设计-笔记 小程序小程序 小程序附近小程序 门店小程序小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99501.html

相关文章

  • 阿里云HaaS700硬件连接与开机信息

    摘要：硬件，串口模块软件，串口助理，硬件基本介绍是经过阿里云团队认证的高性能视觉开发板。与电脑怎样连线板子上有两个接口，如果我们要按照阿里云的官方文档来跑第一个程序，需要将距离针引脚近的那一个与电脑连接。 摘要:HaaS700是一款带摄像头的开发板，带有物联网功能，可以通过python轻应用来开发...

    不知名网友 评论0 收藏0

  • 云开发初探 —— 更简便的小程序开发模式

    摘要：年加入腾讯云云开发团队。基于，云服务商发展出这类更高级的开发服务。小程序云开发说了这么多无服务开发的概念优点，在小程序无服务开发这一块，腾讯云有什么样的作品呢。这就是今天要重点介绍的，小程序云开发，这就是腾讯云与微信联合研发后，交出的答卷。 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由李成熙heyli发表于云+社区专栏李成熙，腾讯云高级工程师。2014年度毕业加入...

    aaron 评论0 收藏0

  • 云开发初探 —— 更简便的小程序开发模式

    摘要：年加入腾讯云云开发团队。基于，云服务商发展出这类更高级的开发服务。小程序云开发说了这么多无服务开发的概念优点，在小程序无服务开发这一块，腾讯云有什么样的作品呢。这就是今天要重点介绍的，小程序云开发，这就是腾讯云与微信联合研发后，交出的答卷。 李成熙，腾讯云高级工程师。2014年度毕业加入腾讯AlloyTeam，先后负责过QQ群、花样直播、腾讯文档等项目。2018年加入腾讯云云开发团队。...

    iKcamp 评论0 收藏0

  • SegmentFault 技术周刊 Vol.30 - 学习 Python 来做一些神奇好玩的事情吧

    摘要：学习笔记七数学形态学关注的是图像中的形状，它提供了一些方法用于检测形状和改变形状。学习笔记十一尺度不变特征变换，简称是图像局部特征提取的现代方法基于区域图像块的分析。本文的目的是简明扼要地说明的编码机制，并给出一些建议。 showImg(https://segmentfault.com/img/bVRJbz?w=900&h=385); 前言 开始之前，我们先来看这样一个提问： pyth...

    lifesimple 评论0 收藏0

  • SegmentFault 技术周刊 Vol.30 - 学习 Python 来做一些神奇好玩的事情吧

    摘要：学习笔记七数学形态学关注的是图像中的形状，它提供了一些方法用于检测形状和改变形状。学习笔记十一尺度不变特征变换，简称是图像局部特征提取的现代方法基于区域图像块的分析。本文的目的是简明扼要地说明的编码机制，并给出一些建议。 showImg(https://segmentfault.com/img/bVRJbz?w=900&h=385); 前言 开始之前，我们先来看这样一个提问： pyth...

    SQC 评论0 收藏0

发表评论

登陆后可评论

0条评论

BigTomato

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<