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

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

Why WePY

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

在项目开始进行选型的时候，我可选的底层框架有 WePy、MPVue、Taro、MinUI，这些框架都是工程化做得很好的框架，可以帮助小程序项目长期进行维护。其中，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 小时！