微信小程式開發框架—wepy快速入門

阿新 • • 發佈：2018-12-06

小程式框架wepy文件

wepy官網：https://tencent.github.io/wepy/index.html

專案建立與使用

安裝wepy

以下安裝都通過npm安裝

安裝 wepy 命令列工具。

npm install wepy-cli -g

在開發目錄生成開發DEMO。

wepy new myproject

開發實時編譯。

wepy build --watch

專案目錄結構

    dist
    node_modules
    src
        components
            com_a 
.wpy
            com_b.wpy
        pages
            index.wpy
            page2.wpy
        app.wpy
    package.json

開發使用說明

使用微信開發者工具新建專案，本地開發選擇dist目錄。
微信開發者工具 --> 專案 --> 關閉ES6轉ES5。
本地專案根目錄執行wepy build --watch，開啟實時編譯。

程式碼規範：

變數與方法使用盡量使用駝峰式命名，避免使用$開頭。
以$開頭的方法或者屬性為框架內建方法或者屬性，可以被使用，使用前請參考API文件

。
入口，頁面，元件的命名字尾為.wpy。外鏈的檔案可以是其它字尾。
請參考wpy檔案說明
使用ES6語法開發。
框架在ES6下開發，因此也需要使用ES6開發小程式，ES6中有大量的語法糖可以讓我們的程式碼更加簡潔高效。
使用Promise
框架預設對小程式提供的API全都進行了 Promise 處理，甚至可以直接使用async/await等新特性進行開發。

主要解決問題：

1. 開發模式轉換

在原有的小程式的開發模式下進行再次封裝，更貼近於現有MVVM框架開發模式。框架在開發過程中參考了一些現在框架的一些特性，並且融入其中，以下是使用wepy前後的程式碼對比圖。

官方DEMO程式碼：

//index.js
//獲取應用例項
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件處理函式
  bindViewTap: function() {
    console.log('button clicked')
  },
  onLoad: function () {
    console.log('onLoad')
  }
})

基於wepy的實現：

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. 支援元件化開發。

參見章節：元件
示例程式碼：

// 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包。

在編譯過程當中，會遞迴遍歷程式碼中的require然後將對應依賴檔案從node_modules當中拷貝出來，並且修改require為相對路徑，從而實現對外部NPM包的支援。如下圖：

[圖片上傳失敗...(image-4ab3f4-1518177450772)]

4. 單檔案模式，使得目錄結構更加清晰。

官方目錄結構要求app必須有三個檔案app.json，app.js，app.wxss，頁面有4個檔案 index.json，index.js，index.wxml，index.wxss。而且檔案必須同名。
所以使用wepy開發前後開發目錄對比如下：
官方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框架後目錄結構：

project
    src
        pages
            index.wpy
            log.wpy
        app.wpy

5. 預設使用babel編譯，支援ES6/7的一些新特性。

使用者可以通過修改.wepyrc配置檔案，配置自己熟悉的babel環境進行開發。預設開啟使用了一些新的特性如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. 針對原生API進行優化。

對現在API進行promise處理，同時修復一些現有API的缺陷，比如：wx.request併發問題等。
原有程式碼：

onLoad = function () {
    var self = this;
    wx.login({
        success: function (data) {
            wx.getUserInfo({
                success: function (userinfo) {
                    self.setData({userInfo: userinfo});
                }
            });
        }
    });
}

基於wepy實現程式碼：

async onLoad() {
    await wx.login();
    this.userInfo = await wx.getUserInfo();
}

在同時併發10個request請求測試時：
不使用wepy:

[圖片上傳失敗...(image-bacc86-1518177450770)]
[圖片上傳失敗...(image-d2d397-1518177450770)]

使用wepy後：

[圖片上傳失敗...(image-d99a53-1518177450770)]

進階說明

.wepyrc 配置檔案說明

執行wepy new demo後，會生成類似配置檔案。

{
  "wpyExt": ".wpy",
  "sass": {},
  "less": {},
  "babel": {}
}

wpyExt：預設值為'.wpy'，IDE預設情況下不會對此檔案型別高亮，此時可以修改所有檔案為.vue字尾(因為與vue高亮規則一樣)，然後將此選項修改為.vue，就能解決部分IDE程式碼高亮問題。

sass：sass編譯配置，參見這裡。

less：less編譯配置，參見這裡。

babel：babel編譯配置，參見這裡。

wpy檔案說明

wpy檔案的編譯過程過下：

[圖片上傳失敗...(image-dc7981-1518177450770)]

一個.wpy檔案分為三個部分：

樣式<style></style>對應原有wxss。
模板<template></template>對應原有wxml。
程式碼<script></script>對應原有js。

其中入口檔案app.wpy不需要template，所以編譯時會被忽略。這三個標籤都支援type和src屬性，type決定了其程式碼編譯過程，src決定是否外聯程式碼，存在src屬性且有效時，忽略內聯程式碼，示例如下：

<style type="less" src="page1.less"></style>
<template type="wxml" src="page1.wxml"></template>
<script>
    // some code
</script>

標籤對應 type 值如下表所示：

標籤	type預設值	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，包含一個config屬性和其全域性屬性、方法、事件。其中config屬性對應原有的app.json，編譯時會根據config生成app.json檔案，如果需要修改config中的內容，請使用系統提供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，相當於原來的index.json，同`app.wpy`中的config
components	頁面引入的元件列表
data	頁面需要渲染的資料
methods	wmxl的事件捕捉，如`bindtap`，`bindchange`
events	元件之間通過`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模板，但彼此獨立，業務程式碼與互動事件仍需在頁面處理。無法實現元件化的鬆耦合與複用的效果。
例如模板A中繫結一個bindtap="myclick"，模板B中同樣繫結一樣bindtap="myclick"，那麼就會影響同一個頁面事件。對於資料同樣如此。因此只有通過改變變數或者事件方法，或者給其加不同字首才能實現繫結不同事件或者不同資料。當頁面複雜之後就十分不利於開發維護。
因此wepy讓小程式支援元件化開發，元件的所有業務與功能在元件本身實現，元件與元件之間彼此隔離，上述例子在wepy的元件化開發過程中，A元件只會影響到A繫結的myclick，B也如此。

元件引用

當頁面或者元件需要引入子元件時，需要在頁面或者script中的components給元件分配唯一id，並且在template中新增<component>標籤，如index.wpy。

頁面和元件都可以引入子元件，引入若干元件後，如下圖：

[圖片上傳失敗...(image-1316ae-1518177450768)]

Index頁面引入A，B，C三個元件，同時元件A和B又有自己的子元件D，E，F，G，H。

元件通訊與互動

wepy.component基類提供三個方法$broadcast，$emit，$invoke，因此任一頁面或任一元件都可以呼叫上述三種方法實現通訊與互動，如：

$this.$emit('some-event', 1, 2, 3, 4);

元件的事件監聽需要寫在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事件是由父元件發起，所有子元件都會收到此廣播事件，除非事件被手動取消。事件廣播的順序為廣度優先搜尋順序，如上圖，如果Page_Index發起一個$broadcast事件，那麼接收到事件的先後順序為：A, B, C, D, E, F, G, H。如下圖：

[圖片上傳失敗...(image-c6f17d-1518177450768)]

$emit
$emit與$broadcast正好相反，事件發起元件的父元件會依次接收到$emit事件，如上圖，如果E發起一個$emit事件，那麼接收到事件的先後順序為：A, Page_Index。如下圖：

[圖片上傳失敗...(image-d5d6aa-1518177450768)]

$invoke
$invoke是一個元件對另一個元件的直接呼叫，通過傳入的元件路徑找到相應元件，然後再呼叫其方法。

如果想在Page_Index中呼叫元件A的某個方法：

this.$invoke('ComA', 'someMethod', 'someArgs');

如果想在元件A中呼叫元件G的某個方法：

this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

資料繫結

小程式資料繫結方式

小程式通過Page提供的setData方法去繫結資料，如：

this.setData({title: 'this is title'});

因為小程式架構本身原因，頁面渲染層和JS邏輯層分開的，setData操作實際就是JS邏輯層與頁面渲染層之間的通訊，那麼如果在同一次執行週期內多次執行setData操作時，那麼通訊的次數是一次還是多次呢？這個取決於API本身的設計。

wepy資料繫結方式

wepy使用髒資料檢查對setData進行封裝，在函式執行週期結束時執行髒資料檢查，一來可以不用關心頁面多次setData是否會有效能上的問題，二來可以更加簡潔去修改資料實現繫結，不用重複去寫setData方法。程式碼如下：

this.title = 'this is title';

但需注意，在函式執行週期之外的函式裡去修改資料需要手動呼叫$apply方法。如：

setTimeout(() => {
    this.title = 'this is title';
    this.$apply();
}, 3000);

wepy髒資料檢查流程

在執行髒資料檢查是，會通過this.$$phase標識當前檢查狀態，並且會保證在併發的流程當中，只會有一個髒資料檢查流程在執行，以下是執行髒資料檢查的流程圖：

[圖片上傳失敗...(image-519e99-1518177450767)]

其它優化細節

1. wx.request 接收引數修改

點這裡檢視官方文件

// 官方
wx.request({
    url: 'xxx',
    success: function (data) {
        console.log(data);
    }
});

// wepy 使用方式
// request 介面從只接收Object變為可接收String
wx.request('xxxx').then((d) => console.log(d));

2. 優化事件引數傳遞

點這裡檢視官方文件

// 官方
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
Page({
  tapName: function(event) {
    console.log(event.currentTarget.hi)// output: WeChat
  }
});

// wepy 建議傳參方式
<view id="tapTest" data-wepy-params="1-wepy-something" bindtap="tapName"> Click me! </view>

events: {
    tapName (event, id, title, other) {
        console.log(id, title, other)// output: 1, wepy, something
    }
}

3. 改變資料繫結方式

保留setData方法，但不建議使用setData執行繫結，修復傳入undefined的bug，並且修改入參支援：
this.setData(target, value)
this.setData(object)

點這裡檢視官方文件

// 官方
<view> {{ message }} </view>

onLoad: function () {
    this.setData({message: 'hello world'});
}

// wepy
<view> {{ message }} </view>

onLoad () {
    this.message = 'hello world';
}

4. 元件代替模板和模組

點這裡檢視官方文件

// 官方
<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<!-- index.wxml -->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

<!-- index.js -->
var item = require('item.js')

// wepy
<!-- /components/item.wpy -->
 <text>{{text}}</text>

<!-- index.wpy -->
<template>
    <component id="item"></component>
</template>
<script>
    import wepy from 'wepy';
    import Item from '../components/item';
    export default class Index extends wepy.page {
        components = { Item }
    }
</script>

API

wepy.event

屬性	型別	預設值	說明
name	String	-	事件名稱
source	wepy.component	-	事件來源
type	String	-	emit 或者 broadcast

方法	引數	返回值	說明
destroy	-	-	在 emit 或者 broadcast 過程中，呼叫destroy方法將會停止事件傳播。

wepy.component

屬性	型別	預設值	說明
isComponent	Boolean	true	是否是元件，如果是頁面，此值為false
prefix	String	''	元件字首，元件字首+元件方法屬性才是在小程式中真實存在的方法或屬性。
$root	wepy.page	-	根元件，一般都是頁面
$parent	wepy.component	-	父元件
$wxpage	Page	-	小程式Page物件
$coms	List(wepy.component)	{}	子元件列表

方法	引數	返回值	說明
init	-	-	元件初始化。
getWxPage	-	Page	返回小程式Page物件。
$getComponent	path(String)	wepy.component	通過元件路徑返回元件物件。
$invoke	com(String/wepy.component), method(String), [args]	-	呼叫其它元件方法
$broadcast	evtName(String), [args]	-	broadcast事件。
$emit	evtName(String), [args]	-	emit事件。
$apply	fn(Function)	-	準備執行髒資料檢查。
$digest	-	-	髒檢查。

wepy.page

方法	引數	返回值	說明
init	-	-	頁面始化。

wepy.app

屬性	型別	預設值	說明
$wxapp	App	-	小程式getApp()
init	-	-	應用始化包括對原生API的改造與優化

作者：傻夢獸
連結：https://www.jianshu.com/p/c34a7cc08fc8
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

微信小程式開發框架—wepy快速入門

小程式框架wepy文件

wepy官網：https://tencent.github.io/wepy/index.html

專案建立與使用

安裝wepy

專案目錄結構

開發使用說明

程式碼規範：

主要解決問題：

1. 開發模式轉換

2. 支援元件化開發。

3. 支援載入外部NPM包。

4. 單檔案模式，使得目錄結構更加清晰。

5. 預設使用babel編譯，支援ES6/7的一些新特性。

6. 針對原生API進行優化。

進階說明

.wepyrc 配置檔案說明

wpy檔案說明

script說明

程式入口app.wpy

頁面index.wpy

元件com.wpy

元件

元件引用

元件通訊與互動

資料繫結

小程式資料繫結方式

wepy資料繫結方式

wepy髒資料檢查流程

其它優化細節

1. wx.request 接收引數修改

2. 優化事件引數傳遞

3. 改變資料繫結方式

4. 元件代替模板和模組

API

wepy.event

wepy.component

wepy.page

wepy.app

相關推薦