像VUE一样写微信小程序-深入研究wepy框架
微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力，越来越多企业加入小程序开发。 小程序于M页比相比，有以下优势：1、小程序拥有更多的能力，包括定位、录音、文件、媒体、各种硬件能力等，想 ...
微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力，越来越多企业加入小程序开发。 小程序于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代码：
-
/index.js -
//获取应用实例 -
var app = getApp() -
Page({ -
data: { -
motto: 'Hello World', -
userInfo: {} -
}, -
//事件处理函数 -
bindViewTap: function() { -
console.log('button clicked') -
}, -
onLoad: function () { -
console.log('onLoad') -
} -
})
基于wepy的实现：
-
import wepy from 'wepy'; -
-
export default class Index extends wepy.page { -
-
data = { -
motto: 'Hello World', -
userInfo: {} -
}; -
methods = { -
bindViewTap () { -
console.log('button clicked'); -
} -
}; -
onLoad() { -
console.log('onLoad'); -
}; -
}
2.真正的组件化开发 小程序虽然有
wepy组件示例
-
// index.wpy -
<template> -
<view> -
<panel> -
<h1 slot="title"></h1> -
</panel> -
<counter1 :num="myNum"></counter1> -
<counter2 :num.sync="syncNum"></counter2> -
<list :item="items"></list> -
</view> -
</template> -
<script> -
import wepy from 'wepy'; -
import List from '../components/list'; -
import Panel from '../components/panel'; -
import Counter from '../components/counter'; -
-
export default class Index extends wepy.page { -
-
config = { -
"navigationBarTitleText": "test" -
}; -
components = { -
panel: Panel, -
counter1: Counter, -
counter2: Counter, -
list: List -
}; -
data = { -
myNum: 50, -
syncNum: 100, -
items: [1, 2, 3, 4] -
} -
} -
</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：
-
project -
├── pages -
| ├── index -
| | ├── index.json index 页面配置 -
| | ├── index.js index 页面逻辑 -
| | ├── index.wxml index 页面结构 -
| | └── index.wxss index 页面样式表 -
| └── log -
| ├── log.json log 页面配置 -
| ├── log.wxml log
