手机游戏巴士

云开发xWePY,快速实现Linux命令查询小程序

发表于:2024-05-22 作者:游戏编辑
编辑最后更新 2024年05月22日,小编寄语:为了回馈开源社区,腾讯云云开发团队联合WePY团队,推出“云开发xWePY“最佳实践有奖征集活动,奖品有限,先到先得哦!彩蛋本次活动优秀作品展示...

小编寄语:

为了回馈开源社区,腾讯云云开发团队联合WePY团队,推出“云开发x WePY“最佳实践有奖征集活动,奖品有限,先到先得哦!

本次活动优秀作品展示

大家好,今天我来为大家分享一下, Linux 命令查询小程序中的 WePY 云开发实践。


Why WePY

首先,先分享一下为什么要选择 WePY ?

在项目开始进行选型的时候,我可选的底层框架有WePyMPVueTaroMinUI,这些框架都是工程化做得很好的框架,可以帮助小程序项目长期进行维护。其中,Taro 因为采用的是我所不熟悉的 React ,所以从一开始就被排除。MPVue我看了以后,他更多是给 Web 开发者提供小程序转化工具,而不是给小程序开发者提供类 Vue 工具,所以,也被我排除。 MinUI 由于其本身仅仅是提供了组件化的方案和 npm 、ES6/ES7 的支持,其他的命令依然要延续使用小程序的函数,并没有提供更多的支持,整个生态也一般,所以就排除掉了 MinUI。

到最后,我选择了 WePY 。在下手之前,我研究了一下 WePY,来看看 WePY 中都有哪些优点。总的来说,我认为 WePY 的优点如下:

提供了类似 Vue 的组件化方案:组件化开发可以提升项目的可维护程度,随着你开发周期的变长,组件化会非常大的影响你的开发体验。

提供了 ES6/ES7 语法的支持:JavaScript 为人诟病的 Callback 在 ES6、ES7 中有了更加优雅的实现。

提供了 Vue 的生态:和 MinUI 的孤军奋战不同,WePY有很多 Vue 社区生态的产品,比如 WePY-Redux、RxWX 等一系列 Vue 下,大家习惯使用的工具,这使得开发的流程更加顺畅,开发体验也更加一致。

对原生 API 的优化:在小程序官方提供的界面中,很多都是提供的 Callback 模式,并不提供 Promise ,我们在使用时往往需要自己再重新包一层,比较麻烦。在 WePY 当中, WePY 官方帮我们封装好了一层,你可以直接使用 WePY 所封装好的方法,减少了封装的工作量。

Vue 习惯的数据设定:在 WePY 中,你可以使用 的语法进行赋值操作,相比于原生的 setData 方法,有更加舒适的语法,可维护性也更高。

提供了 computed 方法:在开发小程序的时候,我们难免要对数据进行格式化,在传统的小程序开发中,我们需要对数据进行 map ,再进行修改,但是用了 WePY 以后,我们可以使用 computed 计算属性来进行数据的格式化和调整,大大的提升了代码的可读性。

上述是我所看重的 WePY 优势,接下来,我来说一说如何在 WePY 中使用云开发。


云开发 in WePY

我写过很多小程序,也讲过一些小程序课程,经常会有人问我,XXX可以用在XXX里么,放在这个场景中,就是云开发可以用在 WePY 中么?

答案当然是肯定的。

看待这个问题,你应该首先搞清楚,云开发所提供的到底是什么?

云开发提供的是数据存储、文件存储和计算能力

和 WePY 的定位提供微信小程序组件化开发的能力并不冲突,所以, WePY 和云开发并不冲突,你可以在 WePY 中使用云开发。

在 WePY 项目中启用云开发

由于 WePY 本身并没有提供云开发的模板(不过你现在可以使用 命令来初始化一个包含了云开发示例的 WePY 项目),所以,我们需要自己在项目中添加云开发。

云开发本身而言,是集成在 的 namespace 内的,所以无需配置可以直接使用 来调用云开发的各项命令。此外,比较特殊的是,你需要指定一下云函数目录,来确保微信小程序开发者工具能够识别出云函数目录。

此处需要注意的是, 因为云开发的命令本身就支持 Promise 和 Callback ,所以你可以直接使用 来调用,而不是使用 来调用。WePY 官方也没有针对云开发进行再一次的封装。

你可以在小程序项目的根目录创建一个新的目录cloudfunctions,然后在 中添加一个新的配置项目 ,并将其值设置为 ,这样,微信小程序开发者工具就能够识别出这个目录是云函数的目录,并为其加上特殊的目录名。

这样,你就完成了 WePY 中的小程序·云开发的引用。


在开发过程中踩过的坑

this 赋值应先设置 data

使用 WePY 开发时,我们使用 来修改数据的值,但是在我一开始开发的时候,遇见的第一个问题时,使用 无法设置数据的值,在小程序界面中无法获取到对应的值。

后续才发现,原来如果你希望由 WePY 替你更新和管理数据,你需要将要传递到页面的数据放在页面实例中的data对象中,这样 WePY 才会帮你更新和管理数据。由于在文档中并没有注明这一点,所以我踩在了坑里。

后续对 WePY 进行分析后,理解了这样的做法,由于 WePY 中没有使用 setData,而是直接调用 this.xxx 来进行修改,那么 WePY 就需要知道哪些变数应该发送到页面,否则,将所有 this 中的数据都传递到页面中,将会导致传递的时间过长,容易让小程序退出,这时,使用 data 来限定数据的方法就可以理解了。


如何处理纯移动端数据的管理?

截止到目前,云开发并没有提供除了微信小程序官方控制台以外的管理方式,这就使得我们在构建应用的时候备受掣肘。

为了更好的提供服务,我们决定修改产品的模式。一开始我们考虑用户提交翻译,团队进行审核的模式,但是考虑到没有管理端和开发成本的问题。我们决定调整一下模式,改为社区自净化。我们完全开放编辑的能力,任何用户都可以提交数据。同时,也可以在国内实践一个完全由社区维护的应用。

但是,这种任何人都可以提交数据很有可能被人所利用,所以,我们引入了微信小程序官方提供的内容安全界面,来进行文本的安全检测,从而,尽可能的规避一些违法违规内容对小程序的影响。

如果你用这个界面,你就会知道,界面的调用时需要使用 ,而微信的 获取界面既有发起调用的地址限制(不能在小程序中调用),也有界面请求频率的限制(请求过快可能会导致无法获取到 Token),因此,我们决定使用云函数来处理这部分的功能。

我们在云函数内使用 这个库来请求微信提供的界面,进行 的获取,以及内容安全的检测。并且,为了确保 的请求不会频率过快,所以我们加入了一些代码,来进行 token 的缓存。

通过上述代码,实现了在云数据库中存储一个 token ,并比对其过期时间,如果发现 token 即将过期,就更新 token ,确保可以正常请求。


总结

回顾整个小程序的开发过程,WePY 的便利使得整个开发的过程无比的流畅,云开发的快速迭代的优势,帮助整个应用快速上线。Linux 小程序到正式发布时,总体的开时长不超过 24 小时!

人人都能看懂的云计算知识科普!

关注云加社区,回复3加读者群

好文!给你“好看”





0