wepyjs 釋出了兩個月了，中間經曆了很多版本更新，也慢慢開始有一些使用者選擇 wepyjs 作為開發架構來開發小程式，比如一些線上小程式。
以及一些來自網上的 wepyjs 的相關資源：
demo源碼： one，圖書管理系統
元件：圖表控件
是以我也将手機充值小程式在開發過程中 wepyjs 的應用心得分享出來，可以參照對比與傳統小程式開發上的差異。
說明：本文不涉及到 wepyjs 的使用與說明，如果需要請參看我的另一篇文章 ”打造小程式元件化開發架構” 或直接參看wepyjs 項目位址
開發時期望邏輯代碼按照業務子產品劃分，從視覺圖上來看，首頁可以分為五個子產品，分别是：
輸入框：Input
下拉曆史記錄：History
充話費：Mobile
充流量：Traffic
右下角菜單：Menu
如下圖：
在原生小程式中，可以使用小程式的模闆特性來達到子產品化差別的目地，如下：
如此，便可以業務子產品去組織自己的代碼。
小程式的js子產品與wxml子產品并無直接關聯，在資料或是事件的命名上需要使用字首或者是命名空間的方式區分，以防沖突。
比如在Mobile子產品中有一個商品清單list，并且每個商品都有一個點選下單事件submit。是以在開發時需要使用mobileList，mobileSubmit或者Mobile.list，Mobile.submit以防止與Traffic子產品沖突，代碼如下：
使用 wepyjs 直接讓小程式能夠支援元件化開發。讓小程式開發能夠像 Vue，React 一樣使用自定義元件開發。是以首頁index.wpy 中可以寫成這樣：
在充話費元件components/mobile.wpy中關鍵代碼如下：
對比于之間的代碼，我們不用再關心是<code>mobileList</code>還是<code>trafficList</code>。無論是Mobile元件還是Traffic元件，都有自己的<code>list</code>和<code>submit</code>方法。保證了元件與元件之間資料的隔離。
混合是對元件的複用性的一種補充，使用Mixin可以很靈活的複用不同元件中的相同部分。
比如，為了做好使用者體驗細節的優化，在面額清單的滾動時加入了陰影控制。當滾到最左邊時，左邊無陰影，滾動到最右邊時，右邊無陰影，滾動到中間時兩邊都出現陰影。如下圖：
陰影由兩個透明漸變效果的樣式決定：left-shadow，right-shadow。
對于Mobile元件和Traffic元件來說，這一功能是兩者共有特性，是以可以使用Mixin來實作。
建立Mixin檔案<code>mixin/scroll.js</code>：
然後在Mobile和Traffic中分别引用目前Mixin即可讓兩個元件同時擁有該功能，參考代碼如下：
小程式提供 wx.login 接口可以友善的擷取到使用者的 code，通過 code 置換出 session 作為應用态。session 可以儲存在 storage 中或者是記憶體當中，詳情可參照官方文檔。
參照官方文檔整理出我們小程式擷取登入态的步驟以及應當具備的能力：
伺服器提供一個使用 code 轉換登入态 session 的接口。
進入應用時，調用 wx.login() 擷取 code。
調用接口将 code 轉換為 session，并且儲存到記憶體或者storage中。
發請 request 請求時自動帶上 session 字段。
因為某些原因導緻 session 失效時，可以自動再次擷取新的 session 并且發送請求。
畫出流程圖如下：
實作代碼如下：
建立公用子產品 <code>common/global.js</code> 用于存儲全局變量。
在應用啟動時登入，并且置換 session，并且利用 wepyjs 的 intercept 功能讓每個 request 都帶上 session。
定義 api 子產品，封裝 request 方法，使其在 session 失效時能再次更新 session 并且發送請求。
是以，在開發時，就不用去關心何時應該登入的問題，直接調用接口既可。比如在 mobile.wpy 中擷取清單并渲染：
上面解釋的是原始的登入态維護的一種方式，在手機充值小程式裡，每個後端接口都有封裝 code 置換 session 的能力，後端接口會優先判斷請求中是否有 session，如果有 session 優先使用 session，如果沒有，使用請求參數中的 code 去置換 session，然後處理請求，再将 session 傳回到 response 當中。是以前端流程有些許改變，如下圖：
<code>common/api.js</code> 檔案改動如下：
小程式中并不能像H5一樣直接使用alert彈出消息提示，是以可以選擇使用 wx.showToast 的API進行消息提示，但是官方隻支援success 和 loading 兩種樣式。重新寫一個 toast 元件成本略高，是以考慮直接使用現成的 wepy-com-toast 元件。使用方法如下：
1 . 安裝元件
2 .無緩存編譯
3 .需要的元件中引入 toast 元件
4 .調用
實作效果如下圖：
[MTA是騰訊自家的資料分析平台，在小程式釋出後MTA平台很快的就支援了小程式的資料上報。是以手機充值選擇MTA做為資料上報平台，具體步驟如下：
1 .在MTA官網注冊應用。
2 .在mp平台，小程式開發設定中，将https://pingtas.qq.com 添加為可信域名。
3 .安裝 mta-analysis 子產品：<code>npm install mta-analysis --save</code>
4 .在 app.wpy 中添加初始化代碼。
這樣就完成了MTA的初始化工作，在每個頁面的 onLoad 事件中加入 init 事件完成頁面的上報。
在 app.wpy 中加入報錯上報。
以及在其它業務邏輯代碼上加入一些自定義事件上報，比如下單上報，支援上報等等。
至此，基本介紹完了 wepyjs 在手機充值項目的應用了，剩下的就是業務代碼的開發了。wepyjs 通過不停的版本更新疊代去吸收一些傳統架構優秀特性融入其中，比如：元件通訊、props傳值、Mixin、Slot、攔截器等等。也希望在以後能有更多的小程式開發者使用 wepyjs 進行開發。