簡(jiǎn)介

微信小程序入門門檻低、開發(fā)周期短秸妥、代碼編寫靈活、傳播速度快等優(yōu)點(diǎn)讓微信小程序迅速火爆达椰，開發(fā)者紛紛涌入挂绰，任何語言開發(fā)者一旦多了屎篱，就會(huì)有新的框架出來，WePY就是一個(gè)優(yōu)秀的微信小程序開發(fā)框架。它讓微信小程序的開發(fā)更加簡(jiǎn)單交播，功能更加強(qiáng)大专肪，并且也優(yōu)化了文件結(jié)構(gòu)，熟悉了WePY之后確實(shí)可以讓微信小程序開發(fā)更上一層樓堪侯。

在安裝使用WePY框架之前需要安裝npm嚎尤，這部分就略過了，大多數(shù)開發(fā)者應(yīng)該都是裝了npm的伍宦，下面就從WePY的安裝開始講起芽死，列舉各項(xiàng)使用方法。

1次洼、安裝WePY（WePY的安裝或更新都通過npm進(jìn)行）

npm install -g wepy-cli

2关贵、初始化項(xiàng)目

// 1.7.0之前
wepy new myproject
// 1.7.0之后
wepy init standard myproject

3、查看WePY版本號(hào)

// 成功查看版本即表示工程初始化正確
wepy --version

4卖毁、安裝依賴

npm install

5揖曾、開啟實(shí)時(shí)編譯

npm run dev

或者（前者其實(shí)就是調(diào)用的后者）

wepy build --watch

6、project.config.json

{
  "description": "A WePY project",
  "setting": {
    "urlCheck": true,
    "es6": false,
    "postcss": false,
    "minified": false,
    "newFeature": true
  },
  "compileType": "miniprogram",
  "appid": "touristappid",
  "projectname": "hellowepy",
  "miniprogramRoot": "./dist",
  "condition": {}
}

• es6: 對(duì)應(yīng)關(guān)閉ES6轉(zhuǎn)ES5選項(xiàng)亥啦，關(guān)閉炭剪。 重要：未關(guān)閉會(huì)運(yùn)行報(bào)錯(cuò)。
• postcss: 對(duì)應(yīng)關(guān)閉上傳代碼時(shí)樣式自動(dòng)補(bǔ)全選項(xiàng)翔脱，關(guān)閉奴拦。 重要：某些情況下漏掉此項(xiàng)也會(huì)運(yùn)行報(bào)錯(cuò)。
• minified: 對(duì)應(yīng)關(guān)閉代碼壓縮上傳選項(xiàng)届吁，關(guān)閉错妖。重要：開啟后，會(huì)導(dǎo)致真機(jī)computed, props.sync 等等屬性失效疚沐。（注：壓縮功能可使用WePY提供的build指令代替暂氯，詳見后文相關(guān)介紹以及Demo項(xiàng)目根目錄中的wepy.config.js和package.json文件。）
• urlCheck: 對(duì)應(yīng)不檢查安全域名選項(xiàng)亮蛔，開啟痴施。 如果已配置好安全域名則建議關(guān)閉。

7尔邓、VS Code設(shè)置代碼高亮

文件后綴為.wpy晾剖，可共用Vue的高亮規(guī)則，但需要手動(dòng)設(shè)置梯嗽。下面提供一些常見IDE或編輯器中實(shí)現(xiàn)代碼高亮的相關(guān)設(shè)置步驟以供參考(也可通過更改文件后綴名的方式來實(shí)現(xiàn)高亮齿尽，詳見后文相關(guān)介紹)。

• Sublime
  ??1. 打開Sublime->Preferences->Browse Packages..進(jìn)入用戶包文件夾灯节。
  ??2. 在此文件夾下打開cmd循头，運(yùn)行git clone git@github.com:vuejs/vue-syntax-highlight.git绵估，無GIT用戶可以直接下載zip包解壓至當(dāng)前文件夾。
  ??3. 關(guān)閉.wpy文件重新打開即可高亮卡骂。

• WebStorm/PhpStorm
  ??1. 打開Settings国裳，搜索Plugins，搜索Vue.js插件并安裝全跨。
  ??2. 打開Settings缝左，搜索File Types，找到Vue.js Template浓若，在Registered Patterns添加*.wpy渺杉，即可高亮。

• Atom
  ??1. 在Atom里先安裝Vue的語法高亮 - language-vue挪钓，如果裝過了就忽略這一步是越。
  ??2. 打開Atom -> Config菜單。在core鍵下添加：

customFileTypes:
   "text.html.vue": [
      "wpy"
   ]

• VS Code
  ??1. 在 Code 里先安裝 Vue 的語法高亮插件 Vetur碌上。
  ??2. 打開任意 .wpy 文件倚评。
  ??3. 點(diǎn)擊右下角的選擇語言模式，默認(rèn)為純文本馏予。
  ??4. 在彈出的窗口中選擇 .wpy 的配置文件關(guān)聯(lián)...天梧。
  ??5. 在選擇要與 .wpy 關(guān)聯(lián)的語言模式 中選擇 Vue。
  ??6. 在VS Code編輯器設(shè)置中設(shè)置吗蚌。 //文件-首選項(xiàng)-設(shè)置-settings.json settings.json "files.associations": { "*.wpy": "vue" }

8腿倚、代碼規(guī)范

• 變量與方法盡量使用駝峰式命名，并且注意避免使用$開頭蚯妇。 以$開頭的標(biāo)識(shí)符為WePY框架的內(nèi)建屬性和方法，可在JavaScript腳本中以this.的方式直接使用暂筝。

• 小程序入口箩言、頁面、組件文件名的后綴為.wpy焕襟；外鏈的文件可以是其它后綴陨收。

• 使用ES6語法開發(fā)⊥依担框架在ES6(ECMAScript 6)下開發(fā)务漩，因此也需要使用ES6開發(fā)小程序，ES6中有大量的語法糖可以讓我們的代碼更加簡(jiǎn)潔高效它褪。

• 使用Promise饵骨。框架默認(rèn)對(duì)小程序提供的API全都進(jìn)行了Promise處理茫打，甚至可以直接使用async/await等新特性進(jìn)行開發(fā)居触。啟用Promise方法妖混。

• 事件綁定語法使用優(yōu)化語法代替。
  a.原bindtap="click"替換為@tap="click"轮洋，原catchtap="click"替換為@tap.stop="click"制市。原capture-bind:tap="click"替換為@tap.capture="click"，
  b.原capture-catch:tap="click"替換為@tap.capture.stop="click"弊予。

• 事件傳參使用優(yōu)化后語法代替祥楣。原bindtap="click" data-index={{index}}替換為@tap="click({{index}})"。

• 自定義組件命名應(yīng)避開微信原生組件名稱以及功能標(biāo)簽<repeat>汉柒。不可以使用input误褪、button、view竭翠、repeat等微信小程序原生組件名稱命名自定義組件振坚；另外也不要使用WePY框架定義的輔助標(biāo)簽repeat命名。

9斋扰、wepy.config.js配置文件說明

• wpyExt：缺省值為'.wpy'渡八，IDE默認(rèn)情況下不會(huì)對(duì)此文件類型進(jìn)行高亮顯示，這種情況下传货，除了前問代碼高亮部分的介紹進(jìn)行設(shè)置外屎鳍，還可以直接將相關(guān)文件的后綴名由.wpy改為.vue。

• compilers：compilers為1.3.1版本之后的功能问裕，如果需要使用其它語法逮壁，請(qǐng)先配置compilers，然后再安裝相應(yīng)的compilers粮宛。目前支持wepy-compiler-less窥淆， wepy-compiler-postcss，wepy-compiler-sass巍杈、wepy-compiler-babel忧饭、wepy-compiler-pug，其他compiler持續(xù)開發(fā)中......

• 對(duì)應(yīng)各compiler請(qǐng)參考各自文檔：
  sass：sass編譯配置筷畦，參見這里词裤。https://github.com/sass/node-sass
  less：less編譯配置，參見這里鳖宾。http://lesscss.org/#using-less-usage-in-code
  postcss：postcss編譯配置吼砂，參見這里。http://www.css88.com/archives/7317
  stylus：stylus編譯配置鼎文，參見這里渔肩。http://www.zhangxinxu.com/jq/stylus/js.php
  babel：babel編譯配置，參見這里漂问。http://babeljs.io/docs/usage/options/
  typescript：typescript編譯配置赖瞒，參見這里女揭。https://www.tslang.cn/docs/home.html

• plugins：plugins為1.1.6版本之后的功能，目前支持js壓縮wepy-plugin-ugliyjs栏饮、圖片壓縮wepy-plugin-imagemin吧兔，其他plugin持續(xù)開發(fā)中...

10、.wpy文件

• 一個(gè).wpy文件可分為三大部分袍嬉，各自對(duì)應(yīng)于一個(gè)標(biāo)簽：

• 腳本部分境蔼，即<script></script>標(biāo)簽中的內(nèi)容，又可分為兩個(gè)部分：
  邏輯部分伺通，除了config對(duì)象之外的部分箍土，對(duì)應(yīng)于原生的.js文件；
  配置部分罐监，即config對(duì)象吴藻，對(duì)應(yīng)于原生的.json文件。

• 結(jié)構(gòu)部分弓柱，即<template></template>模板部分沟堡，對(duì)應(yīng)于原生的.wxml文件。

• 樣式部分矢空，即<style></style>樣式部分航罗，對(duì)應(yīng)于原生的.wxss文件。

其中屁药，小程序入口文件app.wpy不需要template粥血，所以編譯時(shí)會(huì)被忽略。.wpy文件中的script酿箭、template复亏、style這三個(gè)標(biāo)簽都支持lang和src屬性，lang決定了其代碼編譯過程缭嫡，src決定是否外聯(lián)代碼蜓耻，存在src屬性且有效時(shí)，會(huì)忽略內(nèi)聯(lián)代碼械巡。

11、小程序入口app.wpy

入口文件app.wpy中所聲明的小程序?qū)嵗^承自wepy.app類饶氏，包含一個(gè)config屬性和其它全局屬性讥耗、方法、事件疹启。其中config屬性對(duì)應(yīng)原生的app.json文件古程，build編譯時(shí)會(huì)根據(jù)config屬性自動(dòng)生成app.json文件，如果需要修改config中的內(nèi)容喊崖，請(qǐng)使用微信提供的相關(guān)API挣磨。

12雇逞、頁面page.wpy

頁面文件page.wpy中所聲明的頁面實(shí)例繼承自wepy.page類，該類的主要屬性介紹如下：

• config：頁面配置對(duì)象茁裙，對(duì)應(yīng)于原生的page.json文件塘砸，類似于app.wpy中的config
• components：頁面組件列表對(duì)象，聲明頁面所引入的組件列表
• data：頁面渲染數(shù)據(jù)對(duì)象晤锥，存放可用于頁面模板綁定的渲染數(shù)據(jù)
• methods：wxml事件處理函數(shù)對(duì)象掉蔬，存放響應(yīng)wxml中所捕獲到的事件的函數(shù)，如bindtap矾瘾、bindchange
• events：WePY組件事件處理函數(shù)對(duì)象女轿，存放響應(yīng)組件之間通過emit壕翩、$invoke所傳遞的事件的函數(shù)
• 其它：小程序頁面生命周期函數(shù)蛉迹，如onLoad、onReady等放妈，以及其它自定義的方法與屬性

13北救、app小程序?qū)嵗?/h2>

import wepy from 'wepy';

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

  customFunction ()　{}

  onLaunch () {}

  onShow () {}

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

  globalData = {}
}

14、page頁面實(shí)例和Component組件實(shí)例

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中存在的頁面生命周期函數(shù)

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

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

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

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

  computed = {}; //聲明計(jì)算屬性

  watch = {}; //聲明數(shù)據(jù)watcher

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

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

15模聋、組件

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

例如模板A中綁定一個(gè)bindtap="myclick"灶搜，模板B中同樣綁定一樣bindtap="myclick"祟蚀，那么就會(huì)影響同一個(gè)頁面事件。對(duì)于數(shù)據(jù)同樣如此割卖。因此前酿，只有通過改變變量或者事件方法，或者給其加不同前綴才能實(shí)現(xiàn)綁定不同事件或者不同數(shù)據(jù)鹏溯。當(dāng)頁面復(fù)雜之后就十分不利于開發(fā)維護(hù)罢维。

因此，在WePY中實(shí)現(xiàn)了小程序的組件化開發(fā)丙挽，組件的所有業(yè)務(wù)與功能在組件本身實(shí)現(xiàn)肺孵，組件與組件之間彼此隔離匀借，上述例子在WePY的組件化開發(fā)過程中，A組件只會(huì)影響到A所綁定的myclick平窘，B也如此吓肋。

16、普通組件引用

當(dāng)頁面需要引入組件或組件需要引入子組件時(shí)初婆，必須在.wpy文件的<script>腳本部分先import組件文件蓬坡，然后在components對(duì)象中給組件聲明唯一的組件ID，接著在<template>模板部分中添加以components對(duì)象中所聲明的組件ID進(jìn)行命名的自定義標(biāo)簽以插入組件磅叛。

/**
project
└── src
    ├── components
    |   └── child.wpy
    ├── pages
    |   ├── index.wpy    index 頁面配置屑咳、結(jié)構(gòu)、樣式弊琴、邏輯
    |   └── log.wpy      log 頁面配置兆龙、結(jié)構(gòu)、樣式敲董、邏輯
    └──app.wpy           小程序配置項(xiàng)（全局公共配置紫皇、公共樣式、聲明鉤子等）
**/

// index.wpy

<template>
    <!-- 以`<script>`腳本部分中所聲明的組件ID為名命名自定義標(biāo)簽腋寨，從而在`<template>`模板部分中插入組件 -->
    <child></child>
</template>

<script>
    import wepy from 'wepy';
    //引入組件文件
    import Child from '../components/child';

    export default class Index extends wepy.component {
        //聲明組件聪铺，分配組件id為child
        components = {
            child: Child
        };
    }
</script>

17、組件的循環(huán)渲染

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

/**
project
└── src
    ├── components
    |   └── child.wpy
    ├── pages
    |   ├── index.wpy    index 頁面配置铃剔、結(jié)構(gòu)、樣式查刻、邏輯
    |   └── log.wpy      log 頁面配置键兜、結(jié)構(gòu)、樣式穗泵、邏輯
    └──app.wpy           小程序配置項(xiàng)（全局樣式配置普气、聲明鉤子等）
**/

// index.wpy

<template>
    <!-- 注意，使用for屬性佃延，而不是使用wx:for屬性 -->
    <repeat for="{{list}}" key="index" index="index" item="item">
        <!-- 插入<script>腳本部分所聲明的child組件现诀，同時(shí)傳入item -->
        <child :item="item"></child>
    </repeat>
</template>

<script>
    import wepy from 'wepy';
    // 引入child組件文件
    import Child from '../components/child';

    export default class Index extends wepy.component {
        components = {
            // 聲明頁面中要使用到的Child組件的ID為child
            child: Child
        }

        data = {
            list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]
        }
    }
</script>

18、computed 計(jì)算屬性

computed計(jì)算屬性履肃，是一個(gè)有返回值的函數(shù)赶盔，可直接被當(dāng)作綁定數(shù)據(jù)來使用。因此類似于data屬性榆浓，代碼中可通過this.計(jì)算屬性名來引用，模板中也可通過{{ 計(jì)算屬性名 }}來綁定數(shù)據(jù)撕攒。

需要注意的是陡鹃，只要是組件中有任何數(shù)據(jù)發(fā)生了改變烘浦，那么所有計(jì)算屬性就都會(huì)被重新計(jì)算。

data = {
  a: 1
}

//計(jì)算屬性aPlus萍鲸，在腳本中可通過this.aPlus來引用闷叉，在模板中可通過{{ aPlus }}來插值
computed = {
  aPlus () {
    return this.a + 1
  }
}

19、watcher 監(jiān)聽器

通過監(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í)行一次。

監(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)
}

20秀菱、props 傳值

動(dòng)態(tài)傳值是指父組件向子組件傳遞動(dòng)態(tài)數(shù)據(jù)內(nèi)容，父子組件數(shù)據(jù)完全獨(dú)立互不干擾蹭睡。但可以通過使用.sync修飾符來達(dá)到父組件數(shù)據(jù)綁定至子組件的效果衍菱，也可以通過設(shè)置子組件props的twoWay: true來達(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屬性）來進(jìn)行動(dòng)態(tài)傳值恰力。

// parent.wpy

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

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


// child.wpy

props = {
    // 靜態(tài)傳值
    title: String,

    // 父向子單向動(dòng)態(tài)傳值
    syncTitle: {
        type: String,
        default: 'null'
    },

    twoWayTitle: {
        type: String,
        default: 'nothing',
        twoWay: true
    }
};

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

    this.title = 'c-title';
    console.log(this.$parent.parentTitle); // p-title.
    this.twoWayTitle = 'two-way-title';
    this.$apply();
    console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay為true時(shí)叉谜，子組件props中的屬性值改變時(shí)，會(huì)同時(shí)改變父組件對(duì)應(yīng)的值
    this.$parent.parentTitle = 'p-title-changed';
    this.$parent.$apply();
    console.log(this.title); // 'c-title';
    console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修飾符的props屬性值踩萎，當(dāng)在父組件中改變時(shí)停局，會(huì)同時(shí)改變子組件對(duì)應(yīng)的值。
}

21、組件通信與交互

wepy.component基類提供emit码倦、$invoke三個(gè)方法用于組件之間的通信和交互，如：

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

用于監(jiān)聽組件之間的通信與交互事件的事件處理函數(shù)需要寫在組件和頁面的events對(duì)象中锭碳，如：

import wepy from 'wepy'

export default class Com extends wepy.component {
    components = {};

    data = {};

    methods = {};

    // events對(duì)象中所聲明的函數(shù)為用于監(jiān)聽組件之間的通信與交互事件的事件處理函數(shù)
    events = {
        'some-event': (p1, p2, p3, $event) => {
               console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`);
        }
    };
    // Other properties
}

• $broadcast
  由父組件發(fā)起袁稽，所有子組件都會(huì)收到此廣播事件，除非事件被手動(dòng)取消擒抛。事件廣播的順序?yàn)閺V度優(yōu)先搜索順序

• **broadcast正好相反推汽，事件發(fā)起組件的所有祖先組件會(huì)依次接收到$emit事件。

• $invoke
  一個(gè)頁面或組件對(duì)另一個(gè)組件中的方法的直接調(diào)用歧沪，通過傳入組件路徑找到相應(yīng)的組件歹撒，然后再調(diào)用其方法。

Page_Index中調(diào)用組件ComA的某個(gè)方法

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

組件ComA中調(diào)用組件ComG的某個(gè)方法

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

22槽畔、組件自定義事件處理函數(shù)

可以通過使用.user修飾符為自定義組件綁定事件栈妆，如：@customEvent.user="myFn"，其中厢钧，@表示事件修飾符鳞尔，customEvent 表示事件名稱，.user表示事件后綴早直。目前總共有三種事件后綴：

• default: 綁定小程序冒泡型事件寥假，如bindtap，.default后綴可省略不寫霞扬；
• stop: 綁定小程序捕獲型事件糕韧，如catchtap；
• user: 綁定用戶自定義組件事件喻圃，通過$emit觸發(fā)萤彩。注意，如果用了自定義事件斧拍，則events中對(duì)應(yīng)的監(jiān)聽函數(shù)不會(huì)再執(zhí)行雀扶。

// index.wpy
<template>
    <child @childFn.user="parentFn"></child>
</template>

<script>
    import wepy from 'wepy'
    import Child from '../components/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>

23、slot 組件插槽

子組件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ì)顯示出來，只有刪除了父組件中對(duì)應(yīng)的內(nèi)容分發(fā)標(biāo)簽籍救，才能顯示出來。

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

<panel>
    <view slot="title">新的標(biāo)題</view>
    <view slot="content">
        <text>新的內(nèi)容</text>
    </view>
</panel>

24渠抹、第三方組件

略

25蝙昙、WXS (WeiXin Script)

wxs是基于原生的wxs去實(shí)現(xiàn)的，只是通過編譯把現(xiàn)在的語法編譯為原生語法梧却。
wxs必須是外鏈文件奇颠。并且后綴為.wxs。
wxs引入后只能在template中使用放航，不能在script中使用烈拒。

// mywxs.wxs
module.exports = {
  text: 'This is from wxs',
  filter: function (num) {
    return num.toFixed(2);
  }
};

// index.wpy
<template>
  <text>{{m1.text}}</text>
  <text>{{m1.filter(num)}}</text>
</template>

<script>
  import wepy from 'wepy';
  import mywxs from '../wxs/mywxs.wxs';

  export default class Index extends wepy.page {

    data = {
      num: 10
    };

    wxs = {
      m1: mywxs
    }

  };
</script>

26、interceptor 攔截器

可以使用WePY提供的全局?jǐn)r截器對(duì)原生API的請(qǐng)求進(jìn)行攔截广鳍。

import wepy from 'wepy';

export default class extends wepy.app {
    constructor () {
        // this is not allowed before super()
        super();
        // 攔截request請(qǐng)求
        this.intercept('request', {
            // 發(fā)出請(qǐng)求時(shí)的回調(diào)函數(shù)
            config (p) {
                // 對(duì)所有request請(qǐng)求中的OBJECT參數(shù)對(duì)象統(tǒng)一附加時(shí)間戳屬性
                p.timestamp = +new Date();
                console.log('config request: ', p);
                // 必須返回OBJECT參數(shù)對(duì)象荆几，否則無法發(fā)送請(qǐng)求到服務(wù)端
                return p;
            },

            // 請(qǐng)求成功后的回調(diào)函數(shù)
            success (p) {
                // 可以在這里對(duì)收到的響應(yīng)數(shù)據(jù)對(duì)象進(jìn)行加工處理
                console.log('request success: ', p);
                // 必須返回響應(yīng)數(shù)據(jù)對(duì)象，否則后續(xù)無法對(duì)響應(yīng)數(shù)據(jù)進(jìn)行處理
                return p;
            },

            //請(qǐng)求失敗后的回調(diào)函數(shù)
            fail (p) {
                console.log('request fail: ', p);
                // 必須返回響應(yīng)數(shù)據(jù)對(duì)象赊时，否則后續(xù)無法對(duì)響應(yīng)數(shù)據(jù)進(jìn)行處理
                return p;
            },

            // 請(qǐng)求完成時(shí)的回調(diào)函數(shù)(請(qǐng)求成功或失敗都會(huì)被執(zhí)行)
            complete (p) {
                console.log('request complete: ', p);
            }
        });
    }
}

27吨铸、數(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方法竭缝。

// 同步函數(shù)：
this.title = 'this is new title';
    
// 異步函數(shù)中：
setTimeout(() => {
  this.title = 'this is new title';
  this.$apply();
}, 3000);

28房维、其它優(yōu)化細(xì)節(jié)

1. wx.request接收參數(shù)修改

// 原生代碼:
wx.request({
    url: 'xxx',
    success: function (data) {
        console.log(data);
    }
});

// WePY使用方式, 需要開啟Promise支持
wepy.request('xxxx').then((d) => console.log(d));

// async/await的使用方式, 需要開啟Promise和async/await支持
async function request () {
   let d = await wepy.request('xxxxx');
   console.log(d);
}

2. 優(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 1.1.8以后的版本，只允許傳string抬纸。
<view @tap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view>

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

29咙俩、存在的問題

WePY 1.x 版本中，組件使用的是靜態(tài)編譯組件松却，即組件是在編譯階段編譯進(jìn)頁面的暴浦，每個(gè)組件都是唯一的一個(gè)實(shí)例，目前只提供簡(jiǎn)單的 repeat 支持晓锻。不支持在 repeat 的組件中去使用 props, computed, watch 等等特性歌焦。

錯(cuò)誤使用 :

// list.wpy
<view>{{test.name}}</view>

// index.wpy
<repeat for="{{mylist}}">
   <List :test.sync="item"></List>
</repeat>

<!-- 推薦用法 --->
// list.wpy
<repeat for="{{mylist}}">
    <view>{{item.name}}</view>
</repeat>

// index.wpy
<List :mylist.sync="mylist"></List>