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

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

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

Why WePY

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

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

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

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

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

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

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

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

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

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

云开发 in WePY

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

答案当然是肯定的。

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

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

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

在 WePY 项目中启用云开发

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

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

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

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

此处需要注意的是,云函数应当放在小程序的源码目录 src 之外,不然会导致编译报错。我试图寻找 wepy.config.js 的中关于屏蔽编译检查目录的配置项目,但是没有找到,所以我直接将这个目录放在了项目根目录,云函数和小程序源码的 src 同级。

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

在开发过程中踩过的坑

this 赋值应先设置 data

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

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

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

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

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

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

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

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

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

const result = await cache.get(); // cache 为对应 collection 的引用const now = (new Date).valueOf();const nextTime = now + 5400000;let accessToken = ''if (!result.data.length) {  console.log("进入初次获取的流程")  const result = await got(accessTokenUrl)  accessToken = JSON.parse(result.body).access_token  await cache.add({    data: {      token: accessToken,      time: nextTime    }  })} else {  if (result.data[0].time > now) {    console.log("已有 token 有效")    accessToken = result.data[0].token  } else {    console.log("已有 token 无效")    const tokenResult = await got(accessTokenUrl)    accessToken = JSON.parse(tokenResult.body).access_token    await cache.doc(result.data[0]._id).update({      data:{        token: accessToken,        time: nextTime      }    })  }}

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

总结

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