小程序框架wepy學(xué)習(xí)總結(jié)

本文長(zhǎng)時(shí)間沒有更新 請(qǐng)?zhí)D(zhuǎn)小程序框架wepy文檔鏈接查看

項(xiàng)目創(chuàng)建與使用

以下安裝都通過(guò)npm安裝

  • 安裝（更新） wepy 命令行工具。
npm install wepy-cli -g
  • 在開發(fā)目錄生成開發(fā)DEMO。
wepy new myproject
  • 切換至項(xiàng)目目錄。
cd myproject
  • 開發(fā)實(shí)時(shí)編譯。
wepy build --watch

項(xiàng)目目錄結(jié)構(gòu)

開發(fā)使用說(shuō)明

  1. 使用微信開發(fā)者工具新建項(xiàng)目，本地開發(fā)選擇dist目錄。
  2. 微信開發(fā)者工具-->項(xiàng)目-->關(guān)閉ES6轉(zhuǎn)ES5。重要：漏掉此項(xiàng)會(huì)運(yùn)行報(bào)錯(cuò)。
  3. 微信開發(fā)者工具-->項(xiàng)目-->關(guān)閉上傳代碼時(shí)樣式自動(dòng)補(bǔ)全 重要：某些情況下漏掉此項(xiàng)會(huì)也會(huì)運(yùn)行報(bào)錯(cuò)。
  4. 微信開發(fā)者工具-->項(xiàng)目-->關(guān)閉代碼壓縮上傳 重要：開啟后，會(huì)導(dǎo)致真機(jī)computed, props.sync 等等屬性失效。
  5. 本地項(xiàng)目根目錄運(yùn)行wepy build --watch，開啟實(shí)時(shí)編譯。

主要解決問(wèn)題

  1. 開發(fā)模式轉(zhuǎn)換
  2. 支持組件化開發(fā)
  3. 支持加載外部NPM包
  4. 單文件模式，使得目錄結(jié)構(gòu)更加清晰
  5. 默認(rèn)使用babel編譯，支持ES6/7的一些新特性。
  6. 針對(duì)原生API進(jìn)行優(yōu)化
下面對(duì)這幾點(diǎn)分別進(jìn)行說(shuō)明

1. 開發(fā)模式轉(zhuǎn)換

在原有的小程序的開發(fā)模式下進(jìn)行再次封裝，更貼近于現(xiàn)有MVVM框架開發(fā)模式。框架在開發(fā)過(guò)程中參考了一些現(xiàn)在框架的一些特性，并且融入其中

官方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ā)

// index.wpy
<template>
    <view>
        <panel>
            <h1 slot="title"></h1>
        </panel>
        <counter1 :num="myNum"></counter1>
        <counter2 :num.sync="syncNum"></counter2>
        <list :item="items"></list>
    </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
    };
    data = {
        myNum: 50,
        syncNum: 100,
        items: [1, 2, 3, 4]
    }
}
</script>

3. 支持加載外部npm包

在編譯過(guò)程當(dāng)中，會(huì)遞歸遍歷代碼中的require然后將對(duì)應(yīng)依賴文件從node_modules當(dāng)中拷貝出來(lái)，并且修改require為相對(duì)路徑，從而實(shí)現(xiàn)對(duì)外部NPM包的支持。如下圖：


4. 單文件模式，使得目錄結(jié)構(gòu)更加清晰

官方目錄結(jié)構(gòu)要求app必須有三個(gè)文件app.json，app.js，app.wxss，頁(yè)面有4個(gè)文件 index.json，index.js，index.wxml，index.wxss。而且文件必須同名。

官方DEMO：


使用wepy框架

project
└── src
    ├── coms
    |   └── child.wpy
    ├── pages
    |   ├── index.wpy    index 頁(yè)面配置、結(jié)構(gòu)、樣式、邏輯
    |   └── log.wpy      log 頁(yè)面配置、結(jié)構(gòu)、樣式、邏輯
    └──app.wpy           小程序配置項(xiàng)（全局樣式配置、聲明鉤子等）

5. 默認(rèn)使用babel編譯，支持ES6/7的一些新特性。

用戶可以通過(guò)修改wepy.config.js(老版本使用.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ā)問(wèn)題等。 原有代碼：

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

基于wepy實(shí)現(xiàn)代碼：

import wepy from 'wepy';

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

在同時(shí)并發(fā)10個(gè)request請(qǐng)求測(cè)試時(shí)：不使用wepy,請(qǐng)求會(huì)發(fā)生錯(cuò)誤。解決辦法，使用wepy。

wpy文件說(shuō)明

wpy文件的編譯過(guò)程:

一個(gè).wpy文件分為三部分

  1. 樣式<style></style>對(duì)應(yīng)原有wxss文件
  2. 模板<template></template>對(duì)應(yīng)原有wxml文件
  3. 代碼<script></script>對(duì)應(yīng)原有js文件，分為兩部分：1)邏輯部分，除了config對(duì)象之外的部分，對(duì)應(yīng)于原生的.js文件;2）配置部分，即config對(duì)象，對(duì)應(yīng)于原生的.json文件。

其中入口文件app.wpy不需要template,所以編譯時(shí)會(huì)被忽略。這三個(gè)標(biāo)簽都支持lang和src屬性，lang決定其代碼編譯過(guò)程，src決定是否外聯(lián)代碼，存在src屬性且有效時(shí)，忽略內(nèi)斂代碼，示例如下：

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

標(biāo)簽對(duì)應(yīng)lang值如下表所示：

標(biāo)簽 lang默認(rèn)值 lang支持值
style css css,less,sass,style
template wxml wxml,xml,pug(原jade)
script bable bable,TypeScript

script 說(shuō)明

1. 程序入口 app.wpy

<style lang="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>

頁(yè)面入口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。

2. 頁(yè)面 index.wpy

<style lang="less">
/** less **/
</style>
<template lang="wxml">
    <view>
    </view>
    <counter1></counter1>
</template>
<script>
import wepy from 'wepy';
import Counter from '../components/counter';
export default class Index extends wepy.page {

    config = {};
    components = {counter1: Counter};

    data = {};
    methods = {};

    events = {};
    onLoad() {};
    // Other properties
}
</script>

頁(yè)面入口繼承自 wepy.page，主要屬性說(shuō)明如下：

屬性 說(shuō)明
config 頁(yè)面配置對(duì)象，對(duì)應(yīng)于原生的page.json文件，類似于app.wpy中的config
components 頁(yè)面組件列表對(duì)象，聲明頁(yè)面所引入的組件列表
data 頁(yè)面渲染數(shù)據(jù)對(duì)象，存放可用于頁(yè)面模板綁定的渲染數(shù)據(jù)
methods wmxl的事件捕捉，如bindtap，bindchange
events WePY組件事件處理函數(shù)對(duì)象，存放響應(yīng)組件之間通過(guò)$broadcast、$emit、$invoke所傳遞的事件的函數(shù)
其它 如onLoad，onReady等小程序事件以及其它自定義方法與屬性

3.組件 com.wpy

<style lang="less">
/** less **/
</style>
<template lang="wxml">
    <view>  </view>
</template>
<script>
import wepy from 'wepy';
export default class Com extends wepy.component {

    components = {};

    data = {};
    methods = {};

    events = {};
    // Other properties
}
</script>

頁(yè)面入口繼承自wepy.component，屬性與頁(yè)面屬性大致相同，除了不需要config以及頁(yè)面特有的一些小程序事件等等。

實(shí)例

小程序在 WePY 中，被分為三個(gè)實(shí)例，App，Page，Component。其中Page實(shí)例繼承自Component。聲明方式如下：

import wepy from 'wepy';

// 聲明一個(gè)App文件
export default class MyAPP extends wepy.app {
}
// 聲明一個(gè)Page文件
export default class IndexPage extends wepy.page {
}
// 聲明一個(gè)組件文件
export default class MyComponent extends wepy.component {
}

App 實(shí)例

App小程序?qū)嵗兄饕〕绦蛏芷诤瘮?shù)、config配置對(duì)象、globalData全局?jǐn)?shù)據(jù)對(duì)象，以及其他自定義方法與屬性。

import wepy from 'wepy';

export default class MyAPP extends wepy.app {
    customData = {};

    customFunction ()　{ }

    onLaunch () {}

    onShow () {}

    config = {}; // 對(duì)應(yīng) app.json 文件
    
    globalData = {}
}

在 Page 實(shí)例中，可以通過(guò)this.$parent來(lái)訪問(wèn) App 實(shí)例。

Page 和 Component 實(shí)例

由于Page頁(yè)面實(shí)際上繼承自Component組件，即Page也是組件。除擴(kuò)展了頁(yè)面所特有的config配置以及特有的頁(yè)面生命周期函數(shù)之外，其它屬性和方法與Component一致，因此這里以Page頁(yè)面為例進(jìn)行介紹。

import wepy from 'wepy';

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

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

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

    onShow () {}  // 只在Page中存在的頁(yè)面生命周期函數(shù)

    config = {};  // 只在Page實(shí)例中存在的配置數(shù)據(jù)，對(duì)應(yīng)于原生的page.json文件

    data = {};  // 頁(yè)面所需數(shù)據(jù)均需在這里聲明，可用于模板數(shù)據(jù)綁定

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

    mixins = [];  // 聲明頁(yè)面所引用的Mixin實(shí)例

    computed = {};  // 聲明計(jì)算屬性（詳見后文介紹）

    watch = {};  // 聲明數(shù)據(jù)watcher（詳見后文介紹）

    methods = {};  // 聲明頁(yè)面wxml中標(biāo)簽的事件處理函數(shù)。注意，此處只用于聲明頁(yè)面wxml中標(biāo)簽的bind、catch事件，自定義方法需以自定義方法的方式聲明

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

methods屬性只聲明頁(yè)面bind，catch事件，不能聲明自定義方法。

組件

小程序支持js模塊化，但彼此獨(dú)立，業(yè)務(wù)代碼與交互事件仍需在頁(yè)面處理。無(wú)法實(shí)現(xiàn)組件化的松耦合與復(fù)用的效果。

wepy讓小程序支持組件化開發(fā)，組件的所有業(yè)務(wù)與功能在組件本身實(shí)現(xiàn)，組件與組件之間彼此隔離，上述例子在wepy的組件化開發(fā)過(guò)程中，A組件只會(huì)影響到A綁定的myclick，B也如此。

普通組件引用

當(dāng)頁(yè)面或者組件需要引入子組件時(shí)，需要在頁(yè)面或者 script中的components給組件分配唯一ID，并且在template中添加<component>標(biāo)簽。

<template>
    <child></child>
</template>
<script>
    import wepy from 'wepy';
    import Child from './coms/child';
    export default class Index extends wepy.component {
        components = {
            child: Child
        };
    }
</script>
注意：

WePY中的組件都是靜態(tài)組件，是以組件ID作為唯一標(biāo)識(shí)的，每一個(gè)ID都對(duì)應(yīng)一個(gè)組件實(shí)例，當(dāng)頁(yè)面引入兩個(gè)相同ID組件時(shí)，這兩個(gè)組件共用同一個(gè)實(shí)例與數(shù)據(jù)，當(dāng)其中一個(gè)組件數(shù)據(jù)變化時(shí)，另外一個(gè)也會(huì)一起變化。 如果需要避免這個(gè)問(wèn)題，則需要分配多個(gè)組件ID和實(shí)例。

<template>
    <view class="child1">
        <child></child>
    </view>
    <view class="child2">
        <anotherchild></anotherchild>
    </view>

</template>
<script>
    import wepy from 'wepy';
    import Child from './coms/child';
    export default class Index extends wepy.component {
        components = {
            child: Child,
            anotherchild: Child
        };
    }
</script>

<repeat>的使用(循環(huán)列表組件引用)

當(dāng)需要循環(huán)渲染WePY組件時(shí)(類似于通過(guò)wx:for循環(huán)渲染原生的wxml標(biāo)簽)，必須使用WePY定義的輔助標(biāo)簽<repeat>

<template>
    <repeat for="{{list}}" key="index" index="index" item="item">
        <child :item="item"></child>
    </repeat>
</template>
<script>
    import wepy from 'wepy';
    import Child from './coms/child';
    export default class Index extends wepy.component {
        components = {
            child: Child
        };
        data = {
            list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]
        }
    }
</script>

computed 計(jì)算屬性

  • 類型: { [key: string]: Function }

  • 詳細(xì)：

  1. computed計(jì)算屬性，是一個(gè)有返回值的函數(shù)，可直接被當(dāng)作綁定數(shù)據(jù)來(lái)使用。因此類似于data屬性，代碼中可通過(guò)this.計(jì)算屬性名來(lái)引用，模板中也可通過(guò){{ 計(jì)算屬性名 }}來(lái)綁定數(shù)據(jù)。
  2. 只要是組件中有任何數(shù)據(jù)發(fā)生了改變，那么所有計(jì)算屬性就都會(huì)被重新計(jì)算。
  data = {
      a: 1
  };

  computed = {
      aPlus () {
          return this.a + 1;
      }
  }

watcher 監(jiān)聽屬性更新

  • 類型: { [key: string]: Function }

  • 詳細(xì)：

  1. 通過(guò)監(jiān)聽器watcher能夠監(jiān)聽到任何屬性的更新。監(jiān)聽器在watch對(duì)象中聲明，類型為函數(shù)，函數(shù)名與需要被監(jiān)聽的data對(duì)象中的屬性同名，每當(dāng)被監(jiān)聽的屬性改變一次，監(jiān)聽器函數(shù)就會(huì)被自動(dòng)調(diào)用執(zhí)行一次。

  2. 監(jiān)聽器適用于當(dāng)屬性改變時(shí)需要進(jìn)行某些額外處理的情形。

  data = {
      num: 1
  };
  // 監(jiān)聽器函數(shù)名必須跟需要被監(jiān)聽的data對(duì)象中的屬性num同名，
  // 其參數(shù)中的newValue為屬性改變后的新值，oldValue為改變前的舊值
  watch = {
      num (newValue, oldValue) {
          console.log(`num value: ${oldValue} -> ${newValue}`)
      }
  }
  
  // 每當(dāng)被監(jiān)聽的屬性num改變一次，對(duì)應(yīng)的同名監(jiān)聽器函數(shù)num()就被自動(dòng)調(diào)用執(zhí)行一次

  onLoad () {
      setInterval(() => {
          this.num++;
          this.$apply();
      }, 1000)
  }

Props 傳值

  • 靜態(tài)傳值
  • 動(dòng)態(tài)傳值

靜態(tài)傳值

使用靜態(tài)傳值時(shí)，子組件會(huì)接收到字符串的值。

<child title="mytitle"></child>

// child.wpy
props = {
    title: String
};

onLoad () {
    console.log(this.title); // mytitle
}

注意：靜態(tài)傳值只能傳遞String類型，不存在Number，Boolean等類型。

動(dòng)態(tài)傳值

動(dòng)態(tài)傳值是指父組件向子組件傳遞動(dòng)態(tài)數(shù)據(jù)內(nèi)容，父子組件數(shù)據(jù)完全獨(dú)立互不干擾。但可以通過(guò)使用.sync修飾符來(lái)達(dá)到父組件數(shù)據(jù)綁定至子組件的效果，也可以通過(guò)設(shè)置子組件props的twoWay: true來(lái)達(dá)到子組件數(shù)據(jù)綁定至父組件的效果。那如果即使用.sync修飾符，同時(shí)子組件props中添加的twoWay: true時(shí)，就可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定了。

注意：下文示例中的twoWay為true時(shí)，表示子組件向父組件單向動(dòng)態(tài)傳值，而twoWay為false(默認(rèn)值，可不寫)時(shí)，則表示子組件不向父組件傳值。這是與Vue不一致的地方，而這里之所以仍然使用twoWay，只是為了盡可能保持與Vue在標(biāo)識(shí)符命名上的一致性。

在父組件template模板部分所插入的子組件標(biāo)簽中，使用:prop屬性（等價(jià)于Vue中的v-bind:prop屬性）來(lái)進(jìn)行動(dòng)態(tài)傳值。

// parent.wpy
<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>

data = {
    parentTitle: 'p-title'
};


// child.wpy
props = {
    title: String,
    syncTitle: {
        type: String,
        default: 'null'
    },
    twoWayTitle: {
        type: Number,
        default: 50,
        twoWay: true
    }
};

onLoad () {
    console.log(this.title); // p-title
    console.log(this.syncTitle); // p-title
    console.log(this.twoWayTitle); // 50

    this.title = 'c-title';
    console.log(this.$parent.parentTitle); // p-title.
    this.twoWayTitle = 60;
    console.log(this.$parent.parentTitle); // 60.  --- twoWay為true時(shí)，子組件props修改會(huì)改變父組件對(duì)應(yīng)的值
    this.$parent.parentTitle = 'p-title-changed';
    console.log(this.title); // 'p-title';
    console.log(this.syncTitle); // 'p-title-changed' --- 有sync屬性的props，當(dāng)父組件改變時(shí)，會(huì)影響子組件的值。
}

組件通信與交互

wepy.component基類提供三個(gè)方法$broadcast，$emit，$invoke，因此任一頁(yè)面或任一組件都可以調(diào)用這三種方法實(shí)現(xiàn)通信與交互。

組件的事件監(jiān)聽需要寫在events屬性下，如：

import wepy from 'wepy';
export default class Com extends wepy.component {

    components = {};

    data = {};
    methods = {};

    events = {
        'some-event': (p1, p2, p3, $event) => {
               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)椋?code>A, Page_Index。

$invoke

$invoke是一個(gè)組件對(duì)另一個(gè)組件的直接調(diào)用，通過(guò)傳入的組件路徑找到相應(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');

組件自定義事件

可以使用@customEvent.user綁定用戶自定義組件事件。

其中，@表示事件修飾符，customEvent表示事件名稱，.user表示事件后綴。

目前有三種后綴：

.default: 綁定小程序冒泡事件事件，如bindtap。

.stop: 綁定小程序非冒泡事件，如catchtap。

.user: 綁定用戶自定義組件事件，通過(guò)``$emit`觸發(fā)。

// index.wpy
<template>
    <child @childFn.user="parentFn"></child>
</template>
<script>
    import wepy from 'wepy';
    import Child from './coms/child';
    export default class Index extends wepy.page {
        components = {
            child: Child
        };

        methods = {
            parentFn (num, evt) {
                console.log('parent received emit event, number is: ' + num)
            }
        }
    }
</script>


// child.wpy
<template>
    <view @tap="tap">Click me</view>
</template>
<script>
    import wepy from 'wepy';
    export default class Child extends wepy.component {
        methods = {
            tap () {
                console.log('child is clicked');
                this.$emit('childFn', 100);
            }
        }
    }
</script>

組件內(nèi)容分發(fā)slot

WePY中的slot插槽作為內(nèi)容分發(fā)標(biāo)簽的空間占位標(biāo)簽，便于在父組件中通過(guò)對(duì)相當(dāng)于擴(kuò)展板卡的內(nèi)容分發(fā)標(biāo)簽的“插拔”，更為靈活、方便地對(duì)子組件進(jìn)行內(nèi)容分發(fā)。

具體使用方法是，首先在子組件template模板部分中聲明slot標(biāo)簽作為內(nèi)容插槽，同時(shí)必須在其name屬性中指定插槽名稱，還可設(shè)置默認(rèn)的標(biāo)簽內(nèi)容；然后在引入了該帶有插槽的子組件的父組件template模板部分中聲明用于“插拔”的內(nèi)容分發(fā)標(biāo)簽。

注意，這些父組件中的內(nèi)容分發(fā)標(biāo)簽必須具有slot屬性，并且其值為子組件中對(duì)應(yīng)的插槽名稱，這樣父組件內(nèi)容分發(fā)標(biāo)簽中的內(nèi)容會(huì)覆蓋掉子組件對(duì)應(yīng)插槽中的默認(rèn)內(nèi)容。

另外，要特別注意的是，父組件中一旦聲明了對(duì)應(yīng)于子組件插槽的內(nèi)容分發(fā)標(biāo)簽，即便沒有內(nèi)容，子組件插槽中的默認(rèn)內(nèi)容也不會(huì)顯示出來(lái)，只有刪除了父組件中對(duì)應(yīng)的內(nèi)容分發(fā)標(biāo)簽，才能顯示出來(lái)。

在Panel組件中有以下模板：

<view class="panel">
    <slot name="title">默認(rèn)標(biāo)題</slot>
    <slot>
        默認(rèn)內(nèi)容
    </slot>
</view>

在父組件使用Pannel組件時(shí)，可以這樣使用：

<panel>
    <view>
        <text>這是我放到的內(nèi)容</text>
    </view>
    <view slot="title">Panel的Title</view>
</panel>

wepy 數(shù)據(jù)綁定

  • 小程序數(shù)據(jù)綁定
this.setData({title: 'this is title'});
  • wepy 數(shù)據(jù)綁定
this.title = 'this is title';

wepy使用臟數(shù)據(jù)檢查對(duì)setData進(jìn)行封裝，在函數(shù)運(yùn)行周期結(jié)束時(shí)執(zhí)行臟數(shù)據(jù)檢查，一來(lái)可以不用關(guān)心頁(yè)面多次setData是否會(huì)有性能上的問(wèn)題，二來(lái)可以更加簡(jiǎn)潔去修改數(shù)據(jù)實(shí)現(xiàn)綁定，不用重復(fù)去寫setData方法。

但需注意，在函數(shù)運(yùn)行周期之外的函數(shù)里去修改數(shù)據(jù)需要手動(dòng)調(diào)用$apply方法。如：

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

wx.request 接收參數(shù)

// 官方
wx.request({ 
       url: 'xxx',
       success: function (data) { 
             console.log(data); 
       }
});
// wepy 使用方式
wepy.request('xxxx').then((d) => console.log(d));

wepy 優(yōu)化事件參數(shù)傳遞

官方使用方法

<view data-id="{{index}}" data-title="wepy" data-other="otherparams" bindtap="tapName"> Click me! </view>
Page({
  tapName: function(event) {
    console.log(event.currentTarget.dataset.id)// output: 1
    console.log(event.currentTarget.dataset.title)// output: wepy
    console.log(event.currentTarget.dataset.other)// output: otherparams
  }
});

wepy 建議傳參方式

<view data-wepy-params="{{index}}-wepy-otherparams" bindtap="tapName"> Click me! </view>
methods: {
    tapName (id, title, other, event) {
        console.log(id, title, other)// output: 1, wepy, otherparams
    }
}

wepy 1.1.8以后的版本，只允許傳string。

<view bindtap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view>
methods: {
    tapName (id, title, other, event) {
        console.log(id, title, other)// output: 1, wepy, otherparams
    }
}

組件代替模板和模塊

官方

<!-- 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

API文檔

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,711評(píng)論 19贊 139
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,365評(píng)論 25贊 708
  • Spring Boot 參考指南 介紹 轉(zhuǎn)載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 47,290評(píng)論 6贊 342
  • 給提問(wèn)的開發(fā)者的建議：提問(wèn)之前先查詢 文檔、通過(guò)社區(qū)右上角搜索搜索已經(jīng)存在的問(wèn)題。 寫一個(gè)簡(jiǎn)明扼要的標(biāo)題，并且...
    極樂(lè)叔閱讀 14,657評(píng)論 0贊 3
  • 感情 簡(jiǎn)單在兩人的有話就說(shuō) 復(fù)雜在兩人的有話不說(shuō) 學(xué)著溝通 試著認(rèn)真的把心里話說(shuō)出來(lái) 也許是不錯(cuò)的選擇
    胡小星_727a閱讀 215評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容