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