wepy

wepy
wepy優勢：

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

3、同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平級

 

持續更新...