WePY，微信小程序开发利器，进一步简化小程序开发难度
小程序發展到了今天，已經開放出了太多的利好消息，API 也已經非常豐富和完善了。
但是開發小程序，很多時候非常繁瑣，這個原因是小程序的架構，編寫一個頁面需要4個文件：
page.wxml
page.wxss
page.js
page.json
同時還有很多問題、不完善的ES6/7語法支持、很差勁的代碼編寫體驗。
有好的解決方案嗎？
答案是：WePY！
WePY是騰訊開源的一個小程序開發框架，注意，是騰訊開源的。WePY發布的第一個版本是2016年12月份，也就是小程序剛剛推出的時候，到目前為止，WePY已經發布了52個版本。
在WePY的GitHub官方網站是這么描述的：
“ WePY 是一款讓小程序支持組件化開發的框架，通過預編譯的手段讓開發者可以選擇自己喜歡的開發風格去開發小程序。框架的細節優化，Promise，Async Functions的引入都是為了能讓開發小程序項目變得更加簡單，高效。”
同時，WePY借鑒了Vue.js（后文簡稱Vue）的語法風格和功能特性。支持了Vue的諸多特征，比如父子組件、組件之間的通信、computed屬性計算、wathcer監聽器、props傳值、slot槽分發，還有很多高級的特征支持：Mixin混合、攔截器等等等等。
這么好？如何使用呢？
第一步：在你的電腦上安裝 WePY
npm install wepy-cli -g
第二步：通過WePY創建項目
wepy init standard myproject
第三步：安裝依賴
npm install
此時，項目創建完畢，我們就可以通過第三方開發工具打開這個項目了，這里我用的是webstom（這個工具對我個人來說是全球最好的開發者工具）。
如果想看項目運行效果，只需要在上圖的terminal中執行命令：?
wepy build? ?- - watch
此命令執行完畢后，會在myproject目錄下生產一個叫 dist 的文件夾，然后用 微信開發者工具 打開dist這個文件夾，就可以看到如下圖顯示了。
注意：通過微信開發者工具打開的時候可能會有錯誤，記得不要勾選 ES6轉ES5/上傳代碼是樣式自動補全/上傳代碼時自動壓縮? 這三項。
同時，我們在webstorm編寫的任何代碼，會實時反饋到 微信開發者工具 的預覽窗口上。
在以上圖片中，我能能看到一個叫 app.wpy 的文件，它是小程序的入口文件，打開它，我們會看到如下代碼：
<script>
import wepy from 'wepy';
export default class extends wepy.app {
? ? config = {
? ? ? ? ….
? ? };
? ? onLaunch() {
? ? ? ? console.log(this);
? ? }
}
</script>
<style lang="less">
//....
</style>
也就是說，在原生開發的小程序，入口文件?app.js、app.json、app.wxss?已經全部合并到 app.wpy 文件了。
和vue一樣，我們只需要在<script> </script> 里編寫JavaScript代碼，在<style></style> 編寫css代碼，在 <script> </script> 里的 config = {} 編寫配置代碼即可。
在原生開發環境下，我們編寫一個頁面，需要到以下四個文件：
page.wxml
page.wxss
page.js
page.json
現在，我們只需要些一個page.wpy文件就可以了，內容如下：
<script>
import wepy from 'wepy';
export default class Page extends wepy.page {
? ? config = {};
? ?//.....
}
</script>
<template lang="wxml">
? ? <view>
? ? </view>
</template>
<style lang="less">
//....
</style>
<script></script>編寫js代碼、config = {} 編寫頁面配置，<template lang="wxml"></template>編寫布局代碼；<style lang="less"></style>編寫樣式代碼。
注意：此時，代碼可能不是高亮的，不過沒關系，在WebStorm下只需要以下兩個步驟即可：
1. 打開Settings，搜索Plugins，搜索Vue.js插件并安裝。
2. 打開Settings，搜索File Types，找到Vue.js Template，在Registered Patterns添加*.wpy。
還記得小程序默認自動生成的代碼嗎？以下代碼是獲取用戶信息：
onLoad = function () {
? ? var self = this;
? ? wx.login({
? ? ? ? success: function (data) {
? ? ? ? ? ? wx.getUserInfo({
? ? ? ? ? ? ? ? success: function (userinfo) {
? ? ? ? ? ? ? ? ? ? self.setData({userInfo: userinfo});
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? }
? ? });
}
但是在WePY中，只需要兩行代碼就夠了：
import wepy from 'wepy';
async onLoad() {
? ? await wepy.login();
? ? this.userInfo = await wepy.getUserInfo();
}
沒有嵌套回調、沒有setData() 賦值。
使用WePY的組件來代替小程序原生的模板，也是極爽的，例如：
<style lang="less">
//...
</style>
<template>
? <view class="counter {{style}}">
? ? <button @tap="plus" size="mini">? +? </button>
? ? <button @tap="minus" size="mini">? -? </button>
? ? <text class="count" :class="{red: num > 55, green: num < 45}"> {{num}} </text>
? </view>
</template>
<script>
? import wepy from 'wepy'
? export default class Counter extends wepy.component {
? ? props = {
? ? ? num:50
? ? }
? ? methods = {
? ? ? plus () {
? ? ? ? this.num = this.num + 1? ?
? ? ? },
? ? ? minus () {
? ? ? ? this.num = this.num - 1
? ? ? }
? ? }
??}
</script>
以上代碼寫一個叫 Counter 的組件，效果如下：
可以通過 [+] [-] 按鈕對后面的數據進行修改。
然后在頁面（page.wpy）中導入該組件就可以使用了，例如：
<script>
import wepy from 'wepy';
import Counter from '../components/counter';
export default class Page extends wepy.page {
? ? config = {};
? ? components = {counter1: Counter};
? ? data = {};
}
</script>
<template lang="wxml">
? ? <counter1></counter1>
</template>
無論在代碼復用，或者是在開發體驗上，真的無與倫比的爽，我們公司N個小程序都已經在使用WePY進行開發了，還沒發現任何的坑，畢竟：
1、WePY是騰訊官方開源的產品，官方保證
2、2016年12月份推出，到目前發布了50多個版本，非常成熟
3、基于Vue的生態編譯工具和代碼高亮，生態完整
4、支持組件化、插件化、NPM、ES6/7特性，開發很爽
WePY介紹到此，你覺得如何呢？是否想快速體驗下？點擊?鏈接?進入WePY的官方網站查看更多細節。
另：可以加入WePY QQ交流群：131894955，進一步學習小程序開發 。
總結
以上是生活随笔為你收集整理的WePY，微信小程序开发利器，进一步简化小程序开发难度的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Jeecg社区wiki在开放，终于可以在
- 下一篇： poj 2503（字符串hash）