关于“轻会计”小程序的实用说明

这篇文章主要记录了我在为小程序做“轻会计”过程中遇到的一些问题和解决方案。这只是一个总结，我希望有信息可以帮助其他人。

小程序代码：轻记帐

需要

勤俭节约（贫穷）和我一样，我经常点外卖或和别人一起购物。但是，由于我们购买的商品价值不同，在使用各种优惠券或参加满减活动后，要计算钱并不容易。

例如，一位同事有一张100元减50元的购书券。然而，她想买的书只有80元。这时，她问你有没有想买的书。你选一本20元的书。你付账后，总共花了50元。这个时候你需要付给同事多少钱？当然，最合理的方法是，按照你购买的商品的4:1（80:20）价值平分优惠券，也就是说，你可以获得50*（1/5）=10元的折扣。最后，你需要给你的同事20-10=10元！

上面例子中的商品价格很容易计算，但在实际情况中特别麻烦。因此，我开发了这个小程序来帮助您轻松计算个人的实际支出。（附言：如果您想知道如何快速使用，建议您查看视频版本的说明）

准备

页面样式

去寻找你最喜欢的页面设计，并参考它的样式和颜色。（我知道这不是一份好工作，但我还是通过了自己的考试……）

小程序框架

我以前用过。这里有很多规章制度，所以这次我不打算使用它。我认为写作会更灵活。

我还检查了几个小程序组件库：如组件库演示、WeUI组件库演示，MinUI组件库展示、Vant组件库演示和AntUI组件库、ZANE组件库、TouchUI组件库等（您可以使用关键字“component”搜索小程序，会有一系列组件库示例）。

在阅读了这么多组件库之后，我对TouchUI组件库最满意。它有很多组件，我可以编写更少的代码。

在选择使用TouchUI组件库之后，我发现它不仅是一个组件库，还是一个轻量级开发框架。最突出的一点是，在编写代码时，将原来的小程序页面分成四个文件，改为单文件方法。请参阅中的详细信息。

密码

遇到的问题：

#1：小程序中可以使用表情符号吗？

是的，我用它来复制账单信息。我认为添加表情符号更有趣。具体实现是：我直接复制我需要的表情符号，粘贴到代码中，结合账单信息拼接所需字符串，并使用API wx SetClipboardData（Object Object）将内容设置到剪贴板，粘贴时可以看到表情符号~

#2： 如何优化性能？

最消耗渲染性能的代码是SetData（）。在实际的代码编写过程中，我已经将所有未绑定到wxml页面的数据汇总到this_data字段中，并且该数据是完全分离的。不要将其用于不必要的字段setData（）更新如下：

第页({

_数据：{

priceValue:“”

},

数据：{

...

},

绑定价格输入（e）{

//使用输入组件时，我将其值临时存储在this_Data中

这个。_数据priceValue=e.detail.value.trim（）；

},

确认价格输入（）{

//在需要时获取，无需使用SetData（）函数

让priceValue=这个。_data.priceValue；

...

}

})

#3： 如何实现清除输入的功能？

//wxml语言

//js语言

第页({

数据：{

someValue:“”

},

清除输入（）{

this.set数据({

someValue:“”

})

}

})

#4： 如何引用图标信息？

我知道有两种方法。一种是将iconfont ttf文件转换为base64。您可以查看详细说明；另一个是引用图标信息的在线链接。您可以查看详细说明。

你可以根据自己的需要选择一个。不同之处在于，一个资源是本地的，另一个资源托管在alicdn中。就我个人而言，我更喜欢使用后者，这样我就不必每次更新iconfont时都转换ttf文件

#5： 如何实现输入自动对焦功能？

实现自动聚焦功能并不困难，但在我的使用场景中，我遇到了一个问题：我的输入组件被放置在弹出组件中。我希望在弹出窗口出现后，输入可以自动聚焦，并在弹出窗口关闭后重置控件焦点值。代码如下：

//.wxml文件

//.js文件

焦点输入（）{

setTimeout（（）=>{

this.set数据({

inputFocus:真

})

}，300）//300ms是