代碼規(guī)范：變量與方法使用盡量使用駝峰式命名，避免使用$開頭。 以$開頭的方法或者屬性為框架內(nèi)建方法或者屬性，可以被使用，使用前請(qǐng)參考API文檔入口，頁面，組件的命名后綴為.wpy。外鏈的文件可以是其它后綴。 請(qǐng)參考wpy文件說明使用ES6語法開發(fā)。 框架在ES6下開發(fā)，因此也需要使用ES6開發(fā)小程序，ES6中有大量的語法糖可以讓我們的代碼更加簡(jiǎn)潔高效。使用Promise 框架默認(rèn)對(duì)小程序提供的API全都進(jìn)行了 Promise 處理，甚至可以直接使用async/await等新特性進(jìn)行開發(fā)。項(xiàng)目創(chuàng)建與使用首先安裝wepy以下安裝都通過npm安裝安裝 wepy 命令行工具npm install wepy-cli -g在開發(fā)目錄生成開發(fā)DEMOwepy new myproject開發(fā)實(shí)時(shí)編譯wepy build --watch項(xiàng)目目錄結(jié)構(gòu)dist node_modules src components com_a.wpy com_b.wpy pages index.wpy page2.wpy app.wpy package.json開發(fā)使用說明使用微信開發(fā)者工具新建項(xiàng)目，本地開發(fā)選擇dist目錄。微信開發(fā)者工具 –> 項(xiàng)目 –> 關(guān)閉ES6轉(zhuǎn)ES5。本地項(xiàng)目根目錄運(yùn)行wepy build --watch，開啟實(shí)時(shí)編譯。主要解決問題：1開發(fā)模式轉(zhuǎn)換在原有的小程序的開發(fā)模式下進(jìn)行再次封裝，更貼近于現(xiàn)有MVVM框架開發(fā)模式。框架在開發(fā)過程中參考了一些現(xiàn)在框架的一些特性，并且融入其中，以下是使用wepy前后的代碼對(duì)比圖。官方DEMO代碼：//index.js//獲取應(yīng)用實(shí)例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {} }, //事件處理函數(shù) bindViewTap: function() { console.log('button clicked') }, onLoad: function () { console.log('onLoad') }})基于wepy的實(shí)現(xiàn)：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支持組件化開發(fā)參見章節(jié)：組件示例代碼：// index.wpy<template> <view> <component id="pannel" path="pannel"></component> <component id="counter1" path="counter"></component> <component id="counter2" path="counter"></component> <component id="list" path="list"></component> </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 };}</script>3支持加載外部NPM包在編譯過程當(dāng)中，會(huì)遞歸遍歷代碼中的require然后將對(duì)應(yīng)依賴文件從node_modules當(dāng)中拷貝出來，并且修改require為相對(duì)路徑，從而實(shí)現(xiàn)對(duì)外部NPM包的支持。4單文件模式，使得目錄結(jié)構(gòu)更加清晰官方目錄結(jié)構(gòu)要求app必須有三個(gè)文件app.json，app.js，app.wxss，頁面有4個(gè)文件index.json，index.js，index.wxml，index.wxss。而且文件必須同名。 所以使用wepy開發(fā)前后開發(fā)目錄對(duì)比如下： 官方DEMO：project pages index index.json index.js index.wxml index.wxss log log.json log.wxml log.js log.wxss app.js app.json app.wxss使用wepy框架后目錄結(jié)構(gòu)：project src pages index.wpy log.wpy app.wpy5默認(rèn)使用babel編譯，支持ES6/7的一些新特性用戶可以通過修改.wepyrc配置文件，配置自己熟悉的babel環(huán)境進(jìn)行開發(fā)。默認(rèn)開啟使用了一些新的特性如promise，async/await等等。示例代碼：import wepy from 'wepy';export default class Index extends wepy.page { getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve({data: 123}); }, 3000); }); }; async onLoad() { let data = await this.getData(); console.log(data.data); };}6針對(duì)原生API進(jìn)行優(yōu)化對(duì)現(xiàn)在API進(jìn)行promise處理，同時(shí)修復(fù)一些現(xiàn)有API的缺陷，比如：wx.request并發(fā)問題等。 原有代碼：onLoad = function () { var self = this; wx.login({ success: function (data) { wx.getUserInfo({ success: function (userinfo) { self.setData({userInfo: userinfo}); } }); } });}基于wepy實(shí)現(xiàn)代碼：async onLoad() { await wx.login(); this.userInfo = await wx.getUserInfo();}進(jìn)階說明：.wepyrc 配置文件說明執(zhí)行wepy new demo后，會(huì)生成類似配置文件。{ "wpyExt": ".wpy", "sass": {}, "less": {}, "babel": {}}wpyExt： 缺省值為’.wpy’，IDE默認(rèn)情況下不會(huì)對(duì)此文件類型高亮，此時(shí)可以修改所有文件為.vue后綴(因?yàn)榕cvue高亮規(guī)則一樣)，然后將此選項(xiàng)修改為.vue，就能解決部分IDE代碼高亮問題。 一個(gè).wpy文件分為三個(gè)部分：樣式<style></style>對(duì)應(yīng)原有wxss。模板<template></template>對(duì)應(yīng)原有wxml。代碼<script></script>對(duì)應(yīng)原有js。其中入口文件app.wpy不需要template，所以編譯時(shí)會(huì)被忽略。這三個(gè)標(biāo)簽都支持type和src屬性，type決定了其代碼編譯過程，src決定是否外聯(lián)代碼，存在src屬性且有效時(shí)，忽略內(nèi)聯(lián)代碼，示例如下：<style type="less" src="page1.less"></style><template type="wxml" src="page1.wxml"></template><script> // some code</script>標(biāo)簽對(duì)應(yīng) type 值如下表所示：標(biāo)簽 type默認(rèn)值 type支持值style css css，less，sass（待完成）template wxml wxml，xml，html（待完成）script js js，TypeScript(待完成)script說明程序入口app.wpy<style type="less">/** less **/</style><script>import wepy from 'wepy';export default class extends wepy.app { config = { "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" } }; onLaunch() { console.log(this); }}</script>入口app.wpy繼承自wepy.app，包含一個(gè)config屬性和其全局屬性、方法、事件。其中config屬性對(duì)應(yīng)原有的app.json，編譯時(shí)會(huì)根據(jù)config生成app.json文件，如果需要修改config中的內(nèi)容，請(qǐng)使用系統(tǒng)提供API。頁面index.wpy<style type="less">/** less **/</style><template type="wxml"> <view> </view> <component id="counter1" path="counter"></component></template><script>import wepy form 'wepy';import Counter from '../components/counter';export default class Index extends wepy.page { config = {}; components = {counter1: Counter}; data = {}; methods = {}; events = {}; onLoad() {}; // Other properties}</script>頁面入口繼承自wepy.page，主要屬性說明如下：屬性 說明config 頁面config，相當(dāng)于原來的index.json，同app.wpy中的configcomponents 頁面引入的組件列表data 頁面需要渲染的數(shù)據(jù)methods wmxl的事件捕捉，如bindtap，bindchangeevents 組件之間通過broadcast，emit傳遞的事件其它 如onLoad，onReady等小程序事件以及其它自定義方法與屬性組件com.wpy<style type="less">/** less **/</style><template type="wxml"> <view> </view></template><script>import wepy form 'wepy';export default class Com extends wepy.component { components = {}; data = {}; methods = {}; events = {}; // Other properties}</script>頁面入口繼承自wepy.component，屬性與頁面屬性一樣，除了不需要config以及頁面特有的一些小程序事件等等。組件在小程序中，可以利用JS模塊化 和wxml模板 ，對(duì)業(yè)務(wù)模塊進(jìn)行劃分，實(shí)現(xiàn)如下效果：但實(shí)際上不同的模塊代碼與事件交互都是在同一個(gè)頁面空間處理的，比如說 moduleA 和 moduleB 中同時(shí)存在一個(gè) add 響應(yīng)事件時(shí)，就需要在 html 和 js 中分別定義為 moduleA_add，moduleB_add。業(yè)務(wù)模塊復(fù)雜之后就不利于開發(fā)和維護(hù)。在wepy中，利用組件化的特性可以解決此類問題，如下圖：ComA 和 ComB中間的數(shù)據(jù)與事件相互隔離，可以分別擁有自己的add事件。組件引用當(dāng)頁面或者組件需要引入子組件時(shí)，需要在頁面或者script中的components給組件分配唯一id，并且在template中添加<component>標(biāo)簽，如index.wpy。頁面和組件都可以引入子組件，引入若干組件后，如下圖：Index頁面引入A，B，C三個(gè)組件，同時(shí)組件A和B又有自己的子組件D，E，F(xiàn)，G，H。組件通信與交互wepy.component基類提供三個(gè)方法$broadcast，$emit，$invoke，因此任一頁面或任一組件都可以調(diào)用上述三種方法實(shí)現(xiàn)通信與交互，如：$this.$emit('some-event', 1, 2, 3, 4);組件的事件監(jiān)聽需要寫在events屬性下，如：import wepy form 'wepy';export default class Com extends wepy.component { components = {}; data = {}; methods = {}; events = { 'some-event': ($event, ...args) { console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`); } }; // Other properties}$broadcast $broadcast事件是由父組件發(fā)起，所有子組件都會(huì)收到此廣播事件，除非事件被手動(dòng)取消。事件廣播的順序?yàn)閺V度優(yōu)先搜索順序，如上圖，如果Page_Index發(fā)起一個(gè)$broadcast事件，那么接收到事件的先后順序?yàn)椋篈, B, C, D, E, F, G, H。如下圖：$emit $emit與$broadcast正好相反，事件發(fā)起組件的父組件會(huì)依次接收到$emit事件，如上圖，如果E發(fā)起一個(gè)$emit事件，那么接收到事件的先后順序?yàn)椋篈, Page_Index。如下圖：$invoke $invoke是一個(gè)組件對(duì)另一個(gè)組件的直接調(diào)用，通過傳入的組件路徑找到相應(yīng)組件，然后再調(diào)用其方法。 如果想在Page_Index中調(diào)用組件A的某個(gè)方法：this.$invoke('ComA', 'someMethod', 'someArgs');如果想在組件A中調(diào)用組件G的某個(gè)方法：this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');數(shù)據(jù)綁定小程序數(shù)據(jù)綁定方式小程序通過Page提供的setData方法去綁定數(shù)據(jù)，如：this.setData({title: 'this is title'});因?yàn)樾〕绦蚣軜?gòu)本身原因，頁面渲染層和JS邏輯層分開的，setData操作實(shí)際就是JS邏輯層與頁面渲染層之間的通信，那么如果在同一次運(yùn)行周期內(nèi)多次執(zhí)行setData操作時(shí)，那么通信的次數(shù)是一次還是多次呢？在經(jīng)過與開發(fā)小程序的同事求證后得知，確實(shí)會(huì)通信多次。wepy數(shù)據(jù)綁定方式wepy使用臟數(shù)據(jù)檢查對(duì)setData進(jìn)行封裝，在函數(shù)運(yùn)行周期結(jié)束時(shí)執(zhí)行臟數(shù)據(jù)檢查，一來可以不用關(guān)心頁面多次setData是否會(huì)有性能上的問題，二來可以更加簡(jiǎn)潔去修改數(shù)據(jù)實(shí)現(xiàn)綁定，不用重復(fù)去寫setData方法。代碼如下：this.title = 'this is title';但需注意，在函數(shù)運(yùn)行周期之外的函數(shù)里去修改數(shù)據(jù)需要手動(dòng)調(diào)用$apply方法。如：setTimeout(() => { this.title = 'this is title'; this.$apply();}, 3000);

　　www.dashenniu.com