小程式發展到了今天，已經開放出了太多的利好消息，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.wpy檔案就可以了，内容如下：
export default class Page extends wepy.page { config = {}; //..... <template lang="wxml"> <view> </view> </template>
<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中，隻需要兩行代碼就夠了：
async onLoad() { await wepy.login(); this.userInfo = await wepy.getUserInfo();
沒有嵌套回調、沒有setData() 指派。
使用WePY的元件來代替小程式原生的模闆，也是極爽的，例如：
//... <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> 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 } }
以上代碼寫一個叫 Counter 的元件，效果如下：
可以通過 [+] [-] 按鈕對後面的資料進行修改。
然後在頁面（page.wpy）中導入該元件就可以使用了，例如：
import Counter from '../components/counter'; components = {counter1: Counter}; data = {}; <counter1></counter1>
無論在代碼複用，或者是在開發體驗上，真的無與倫比的爽，我們公司N個小程式都已經在使用WePY進行開發了，還沒發現任何的坑，畢竟：
1、WePY是騰訊官方開源的産品，官方保證 2、2016年12月份推出，到目前釋出了50多個版本，非常成熟 3、基于Vue的生态編譯工具和代碼高亮，生态完整 4、支援元件化、插件化、NPM、ES6/7特性，開發很爽
另：可以加入WePY QQ交流群：131894955，進一步學習小程式開發 。