像VUE一样写微信小程序-深入研究wepy框架

微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力，越来越多企业加入小程序开发。 小程序于M页比相比，有以下优势： 

1、小程序拥有更多的能力，包括定位、录音、文件、媒体、各种硬件能力等，想象空间更大 

2、运行在微信内部，体验更接近APP

3、在过度竞争的互联网行业中，获取一个有效APP用户的成本已经非常高了，小程序相比APP更加轻量、即用即走， 更容易获取用户

开发对比

从开发角度来讲，小程序官方封装了很多常用组件给开发带来很多便利性，但同时也带来很多不便： 

1、小程序重新定义了DOM结构，没有window、document、div、span等，小程序只有view、text、image等 封装好的组件，页面布局只能通过这些基础组件来实现，对开发人员来讲需要一定的习惯转换成本 

2、小程序不推荐直接操作DOM（仅仅从2017年7月开始才可以获取DOM和部分属性），如果不熟悉MVVM模式的开发者， 需要很高的学习成本

3、小程序没有cookie，只能通过storage来模拟各项cookie操作（包括http中的setCookie也需要自行处理）

wepy

笔者团队最近开发了多个微信小程序，为了弥补小程序各项不足和延续开发者VUE的开发习惯，团队在开发初期 就选用了wepy框架，该框架是腾讯内部基于小程序的开发框架，设计思路基本参考VUE，开发模式和编码风 格上80%以上接近VUE，开发者可以以很小的成本从VUE开发切换成小程序开发，相比于小程序，主要优点如下：

1、开发模式容易转换 wepy在原有的小程序的开发模式下进行再次封装，更贴近于现有MVVM框架开发模式。框架在开发过程中参考了 一些现在框架的一些特性，并且融入其中，以下是使用wepy前后的代码对比图。

官方DEMO代码：

1. /index.js

2. //获取应用实例

3. var app = getApp()

4. Page({

5.    data: {

6.        motto: 'Hello World',

7.        userInfo: {}

8.    },

9.    //事件处理函数

10.    bindViewTap: function() {

11.        console.log('button clicked')

12.    },

13.    onLoad: function () {

14.        console.log('onLoad')

15.    }

16. })

基于wepy的实现：

1. import wepy from 'wepy';

2.  

3. export default class Index extends wepy.page {

4.  

5.    data = {

6.        motto: 'Hello World',

7.        userInfo: {}

8.    };

9.    methods = {

10.        bindViewTap () {

11.            console.log('button clicked');

12.        }

13.    };

14.    onLoad() {

15.        console.log('onLoad');

16.    };

17. }

2.真正的组件化开发 小程序虽然有 标签可以实现组件复用，但仅限于模板片段层面的复用，业务代码与交互事件 仍需在页面处理。无法实现组件化的松耦合与复用的效果。

wepy组件示例

1. // index.wpy

2. <template>

3.    <view>

4.        <panel>

5.            <h1 slot="title"></h1>

6.        </panel>

7.        <counter1 :num="myNum"></counter1>

8.        <counter2 :num.sync="syncNum"></counter2>

9.        <list :item="items"></list>

10.    </view>

11. </template>

12. <script>

13. import wepy from 'wepy';

14. import List from '../components/list';

15. import Panel from '../components/panel';

16. import Counter from '../components/counter';

17.  

18. export default class Index extends wepy.page {

19.  

20.    config = {

21.        "navigationBarTitleText": "test"

22.    };

23.    components = {

24.        panel: Panel,

25.        counter1: Counter,

26.        counter2: Counter,

27.        list: List

28.    };

29.    data = {

30.        myNum: 50,

31.        syncNum: 100,

32.        items: [1, 2, 3, 4]

33.    }

34. }

35. </script>

3.支持加载外部NPM包 小程序较大的缺陷是不支持NPM包，导致无法直接使用大量优秀的开源内容，wepy在编译过程当中，会递归 遍历代码中的require然后将对应依赖文件从node_modules当中拷贝出来，并且修改require为相对路径， 从而实现对外部NPM包的支持。如下图：

4.单文件模式，使得目录结构更加清晰 小程序官方目录结构要求app必须有三个文件app.json，app.js，app.wxss，页面有4个文件 index.json，index.js，index.wxml，index.wxss。而且文 件必须同名。 所以使用wepy开发前后开发目录对比如下：

官方DEMO：

1. project

2. ├── pages

3. |   ├── index

4. |   |   ├── index.json  index 页面配置

5. |   |   ├── index.js    index 页面逻辑

6. |   |   ├── index.wxml  index 页面结构

7. |   |   └── index.wxss  index 页面样式表

8. |   └── log

9. |       ├── log.json    log 页面配置

10. |       ├── log.wxml    log