WePy 整合云开发

由于工作上的原因，有需求要使用 WePy，刚好，有了云开发的契机，就决定研究一下。

初试 WePY

想要做云开发和 WePY，首先要先熟悉 WePY。 WePY 其实之前就听说过，不过自己一直没有使用，更多还是习惯用小程序原生写法来进行开发。

后续，也用过一些其他的框架，比如 MinUI 。

和 MinUI 相比，WePY 给我来说最大的感受是 提供了 promise 的支持和 async/await 的支持 ，这个支持可以极大的改善 JavaScript 编程时遇到的 Callback Hell 的问题，可以让我们更加愉悦的开发。

此外，我比较看重的特性是 支持外部的 NPM 包 ，支持 NPM 包意味着可以更好的使用 JavaScript 原本的工程化的产品，也是大大提升生产力的特性。不过，相比于 Promise 的支持和 async/await 的支持，这个如今已经被微信小程序官方团队所支持的 npm 也显得不那么重要了。

做一个 WePY 的 tempalte 吧！

在看文档时注意到，WePY 是使用 wepy init 来进行初始化的，而且可以使用 wepy list 来查看项目的模板。发现了其中有一个基于 ZanUI 的模板。

由于 ZanUI 及更名后的 VantUI 我都比较熟悉，所以从他下手，去研究一下如何制作 WePY 的模板。

复制 repo名/模板名，并在前面加上 github 的域名，就找到了对应的 repo 。

简单的看了一下项目的文件，发现其中并没有什么特殊的，需要指明初始化内容的文件，所以猜测大概率是不需要进行单独的配置的。

这方面 WePY 的文档做的不是很好，我在文档中并没有找到相关的说明。如果可以的话，希望开发者可以加一个功能，比如加上一个 .wepy-template ，可以在里面加入一些交互式的问题，从而来让用户设置一些内容。

在确定了模板其实并不困难以后，我就开始做自己的云开发模板了。

如何做一个模板

做一个模板只需要三步

1. 下载官方的 empty 模板
2. 加入你自己的代码
3. 上传到 Github

说起来简单，不过，在实际制作时，还是应当注意一些问题：

git init
wepy init

在使用 WePY 过程中遇到的一些问题

CloudFunctionRoot 的设定问题

在做第一个版本的时候，我是将云函数的目录放在 src 目录下，后续，在运行时发现， WePY 会自动编译云函数的目录，导致出错。不得已，我将云函数的目录放置在了项目的根目录。

当时在研究这部分时，我试图去寻找 wepy.config.js 文件的配置说明，希望找到一个 exclude 配置项目，来忽略一部分目录，可惜，我并没有找到。

WePY 下的一些定义问题

在使用原生写法的时候，我常常会在 Page({}) 函数外部放上一些引用。比如这样

const database = wx.cloud.database()
const storeCollection = database.collection('store')
Page({
    onReady():function(){
        // some code
    }
})
复制代码

在 WePY 中我试图将代码放在 Page 实例的内部，不过会导致报错，因此，我不得不废弃这样的写法，改用 constructor 来实现。

export default class Index extends wepy.page {
    constructor () {
      super()
      this.db = wx.cloud.database()
    }
    onLoad() {
      console.log('onLoad')
      console.log(this.db)
    }
}
复制代码

对 getApp 报错

在 WePY 中，由于传承了 Vue 的思想，并没有提供对 getApp 的 hack ，不过在实际的测试过程中，发现 getApp() 依然可用。

如果不引入 Redux 之类的状态管理 工具 的情况下，getApp() 的单例模式作为一个全局的 Bus 来进行数据的传递还是非常方便的。

关于 WePY 的其他

总的来说， WePY 是一个值得尝试的框架，单纯 Async/Await 的引入，可以让你的代码变得更加简洁易懂。特别是如果你的项目需要长期运转的情况下，整洁的代码会帮助你的项目成功。

此外，如果你很习惯于 Vue 的写法，那么 WePY 不容错过，computed 属性还是非常实用的。