wepy

wepy
wepy優點：

一、基於原生組件實現組件化開發
二、同vue同樣，支持watch、computed、mixin等開發

三、同vue同樣支持模塊開發、組件開發等

wepy與小程序頁面的區別：

同原生小程序不一樣，WePY擁有的是.wpy頁面，而它們並不是是繼承自原生的 Page 和 App，也不須要獨立的wxss、.js、.json等文件

WePY小程序被分爲三個實例：小程序實例App、頁面實例Page、組件實例Component，它們實例化的方式基本相同：

// 聲明一個App小程序實例
export default class MyAPP extends wepy.app { }

// 聲明一個Page頁面實例

export default class IndexPage extends wepy.page { }

// 聲明一個Component組件實例

export default class MyComponent extends wepy.component { }

注：在實例化過程當中，須要在script中引入WePY

import wepy from 'wepy'

 

在page或component中，能夠經過this.$parent來訪問App實例中的方法或變量

WePY在循環渲染組建時，與原生不一樣的是，外部須要包裹特有的輔助標籤repeat

同vue相同，WePY能夠進行父子組建間傳值

wepy.component基類提供$broadcast、$emit、$invoke三個方法用於組件之間的通訊和交互

新版的WePY頁面內引入組建的方式，與1.X版本的import不一樣，2.X保留了原生的 usingComponents 方式，再也不使用 import 的方式導入。

 

$broadcast事件是由父組件發起，全部子組件都會收到此廣播事件，除非事件被手動取消。事件廣播的順序爲廣度優先搜索順序
$emit與$broadcast正好相反，事件發起組件的全部祖先組件會依次接收到$emit事件

$invoke是一個頁面或組件對另外一個組件中的方法的直接調用，經過傳入組件路徑找到相應的組件，而後再調用其方法

 

interceptor 攔截器：

WePY可使用全局攔截器對原生API的請求進行攔截
具體方法是配置API的config、fail、success、complete回調函數

export default class extends wepy.app {
    constructor () {
        // this is not allowed before super()
        super();
        // 攔截request請求
        this.intercept('request', {
            // 發出請求時的回調函數
            config (p) {
                // 對全部request請求中的OBJECT參數對象統一附加時間戳屬性
                p.timestamp = +new Date();
                console.log('config request: ', p);
                // 必須返回OBJECT參數對象，不然沒法發送請求到服務端
                return p;
            },

            // 請求成功後的回調函數
            success (p) {
                // 能夠在這裏對收到的響應數據對象進行加工處理
                console.log('request success: ', p);
                // 必須返回響應數據對象，不然後續沒法對響應數據進行處理
                return p;
            },

            //請求失敗後的回調函數
            fail (p) {
                console.log('request fail: ', p);
                // 必須返回響應數據對象，不然後續沒法對響應數據進行處理
                return p;
            },

            // 請求完成時的回調函數(請求成功或失敗都會被執行)
            complete (p) {
                console.log('request complete: ', p);
            }
        });
    }
}

　　

數據綁定：

由於小程序架構自己緣由，頁面渲染層和JS邏輯層分開的，setData操做實際就是JS邏輯層與頁面渲染層之間的通訊

而WePY使用髒數據檢查對setData進行封裝，在函數運行週期結束時執行髒數據檢查，一來能夠不用關心頁面屢次setData是否會有性能上的問題，二來能夠更加簡潔去修改數據實現綁定，不用重複去寫setData方法

原生小程序數據修改變量：

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

wepy數據修改變量：

　　this.title = 'this is title'

須要注意的是：WePY在異步函數中更新數據的時候，必須手動調用$apply方法，纔會觸發髒數據檢查流程的運行

setTimeout(() => {

　　this.title = 'this is title';

　　this.$apply();

}, 3000);

 

page實例與component實例：

因爲Page頁面實際上繼承自Component組件，即Page也是組件。除擴展了頁面所特有的config配置以及特有的頁面生命週期函數以外，其它屬性和方法與Component一致

import wepy from 'wepy';

export default class MyPage extends wepy.page {
// export default class MyComponent extends wepy.component {
    customData = {}  // 自定義數據

    customFunction ()　{}  //自定義方法

    onLoad () {}  // 在Page和Component共用的生命週期函數

    onShow () {}  // 只在Page中存在的頁面生命週期函數

    config = {};  // 只在Page實例中存在的配置數據，對應於原生的page.json文件

    data = {};  // 頁面所需數據均需在這裏聲明，可用於模板數據綁定

    components = {};  // 聲明頁面中所引用的組件，或聲明組件中所引用的子組件

    mixins = [];  // 聲明頁面所引用的Mixin實例

    computed = {};  // 聲明計算屬性（詳見後文介紹）

    watch = {};  // 聲明數據watcher（詳見後文介紹）

    methods = {};  // 聲明頁面wxml中標籤的事件處理函數。注意，此處只用於聲明頁面wxml中標籤的bind、catch事件，自定義方法需以自定義方法的方式聲明

    events = {};  // 聲明組件之間的事件處理函數
}

　　注意，對於WePY中的methods屬性，由於與Vue中的使用習慣不一致，很是容易形成誤解，這裏須要特別強調一下：WePY中的methods屬性只能聲明頁面wxml標籤的bind、catch事件，不能聲明自定義方法，這與Vue中的用法是不一致的，普通自定義方法在methods對象外聲明，與methods平級

 

持續更新...