# WePy 整合云开发

- Link: https://www.ixiqin.com/2019/02/02/cloud-development-wepy-integration/
- Published: 2019-02-02T20:28:43+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2019/02/02/cloud-development-wepy-integration/#)

 * [初试 WePY](https://www.ixiqin.com/2019/02/02/cloud-development-wepy-integration/#%e5%88%9d%e8%af%95_wepy)
 * [做一个 WePY 的 tempalte 吧！](https://www.ixiqin.com/2019/02/02/cloud-development-wepy-integration/#%e5%81%9a%e4%b8%80%e4%b8%aa_wepy_%e7%9a%84_tempalte_%e5%90%a7%ef%bc%81)
 * [如何做一个模板](https://www.ixiqin.com/2019/02/02/cloud-development-wepy-integration/#%e5%a6%82%e4%bd%95%e5%81%9a%e4%b8%80%e4%b8%aa%e6%a8%a1%e6%9d%bf)
 * [在使用 WePY 过程中遇到的一些问题](https://www.ixiqin.com/2019/02/02/cloud-development-wepy-integration/#%e5%9c%a8%e4%bd%bf%e7%94%a8_wepy_%e8%bf%87%e7%a8%8b%e4%b8%ad%e9%81%87%e5%88%b0%e7%9a%84%e4%b8%80%e4%ba%9b%e9%97%ae%e9%a2%98)
    - [CloudFunctionRoot 的设定问题](https://www.ixiqin.com/2019/02/02/cloud-development-wepy-integration/#cloudfunctionroot_%e7%9a%84%e8%ae%be%e5%ae%9a%e9%97%ae%e9%a2%98)
    - [WePY 下的一些定义问题](https://www.ixiqin.com/2019/02/02/cloud-development-wepy-integration/#wepy_%e4%b8%8b%e7%9a%84%e4%b8%80%e4%ba%9b%e5%ae%9a%e4%b9%89%e9%97%ae%e9%a2%98)
    - [对 getApp 报错](https://www.ixiqin.com/2019/02/02/cloud-development-wepy-integration/#%e5%af%b9_getapp_%e6%8a%a5%e9%94%99)
 * [关于 WePY 的其他](https://www.ixiqin.com/2019/02/02/cloud-development-wepy-integration/#%e5%85%b3%e4%ba%8e_wepy_%e7%9a%84%e5%85%b6%e4%bb%96)

由于工作上的原因，有需求要使用 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
的模板。

![](https://tva1.sinaimg.cn/large/006tNc79ly1fzsfxwfx57j31b804kglx.jpg)

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

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

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

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

## 如何做一个模板

做一个模板只需要三步

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

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

 1. 初始化 Empty 模板后，尽快使用 `git init` 来初始化版本控制。这是因为云开发是与小
    程序的 AppID 进行绑定的，如果前期没有做好控制，容易出现后续将 AppID 加入了版本追踪。
    所以在一开始，我就将项目进行了初始化，方便后续的回溯。
 2. 上传到 Github 时，应当注意配置 Readme，在我之前的文章中，曾经提到过我们应当尽可能
    的交付一些产品给世界，好让世界根绝我们所交付的产品进行估值。特别是对于模板类型的
    repo ，更是需要一个非常好的 Readme ，来引导别人去使用自己的模板
 3. 制作完成模板后，记得自己使用 `wepy init` 命令将整个过程完整的走一遍。确保你的模板
    是可用的。

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

### CloudFunctionRoot 的设定问题

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

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

### WePY 下的一些定义问题

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

    ```javascript
    const database = wx.cloud.database()
    const storeCollection = database.collection('store')
    Page({
        onReady():function(){
            // some code
        }
    })
    ```

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

    ```javascript
     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 属性还是非常实用的。