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

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

-- Bestony

转自：云开发x |  作者：云开发x / Bestony | https://mp.weixin.qq.com/s/0jhMBBNpD_-lfQLQ0pcBqA

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

Why WePY

首先，先分享一下为什么要选择 WePY ？

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

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

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

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

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

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

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

6.  提供了 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 小时！

要体验此小程序，可以用微信扫描识别以下二维码：