摘要：目錄項(xiàng)目構(gòu)建文件使用優(yōu)化之處組件通信的使用注意事項(xiàng)報錯記錄踩坑記錄項(xiàng)目構(gòu)建官方文檔地址鏈接項(xiàng)目源碼地址鏈接項(xiàng)目資料地址鏈接簡單介紹是一個微信小程序框架，支持模塊化開發(fā)，開發(fā)風(fēng)格類似。使用的方式請求小程序原生都將化。

wepy項(xiàng)目構(gòu)建

wepy文件使用

wepy優(yōu)化之處

wepy組件通信

wepy的API使用

wepy注意事項(xiàng)

wepy報錯記錄

wepy踩坑記錄

官方文檔地址鏈接
項(xiàng)目源碼地址鏈接
項(xiàng)目資料地址鏈接

簡單介紹：wepy是一個微信小程序框架，支持模塊化開發(fā)，開發(fā)風(fēng)格類似Vue.js?？纱钆鋜edux使用，能同時打包出web和小程序。

全局安裝或更新WePY命令行工具

npm install -g wepy-cli

創(chuàng)建項(xiàng)目

wepy init standard my-project[項(xiàng)目名]

PS I:H5WeiXinProgram> wepy init standard wepy-demo
? Project name [wepy-demo]
? AppId [appid]
? Project description [A WePY project]
? Author [author]
? Use ESLint to lint your code? No ---選擇Yes，會對代碼格式校驗(yàn)
? Use Redux in your project? No ---選擇Yes，可以使用Redux框架語法,目錄會多出store目錄
? Use web transform feature in your project? Yes ---選擇Yes會有index.template.html

切換至項(xiàng)目目錄

cd wepy-demo[項(xiàng)目目錄]

安裝依賴

npm install

開啟實(shí)時編譯

npm run dev

構(gòu)建項(xiàng)目完整目錄

// template、style、script三大標(biāo)簽，有l(wèi)ang、src屬性，當(dāng)src屬性存在文件，那么其內(nèi)部代碼會被忽略。
// app.apy小程序入口文件

// pages目錄下存放主頁面，代碼編寫與app.wpy相似，不同之處如下：
// 因?yàn)閍pp.wpy不需要template，但pages目錄下的頁面需要
// 在Pages下的頁面實(shí)例中，可以通過this.$parent來訪問App實(shí)例。
// Page頁面繼承自Component組件，即Page也是組件。除擴(kuò)展了頁面所特有的config配置以及特有的頁面生命周期函數(shù)之外，
其它屬性和方法與Component一致。

// components目錄下存放組件
// 頁面可以引入組件，而組件還可以引入子組件。

import wepy from "wepy"
// 引入child組件文件
import Child from "../components/child";

// mixins是放混合組件的地方，用于復(fù)用不同組件中的相同功能。
// 例如：MyMixin.js
import wepy from "wepy"
export default class MyMixin extends wepy.mixin {
//該處是wepy.mixin，且加上類名加以區(qū)分

}
// mycom.js
import MyMixin from "./mymixin";
export class MyCom extends wepy.component {
    mixins = [MyMixin];
}

// wepy.config.js是webpack配置文件
// 該文件可配置環(huán)境變量來改變運(yùn)行時的參數(shù)
  wpyExt: ".wpy", ---文件后綴名設(shè)置
  eslint: false, ---關(guān)閉eslint校驗(yàn)
  
  resolve: {
    alias: {
        counter: path.join(__dirname, "src/components/counter"),
        "@": path.join(__dirname, "src") //配置文件路徑代碼
    },
    aliasFields: ["wepy", "weapp"],
    modules: ["node_modules"]
  },

一、 wepy項(xiàng)目中使用async await

官方指出鏈接需要在該文件下配置如下語句：

babel: {
        "presets": [
            "env"
        ],
        "plugins": [
            "transform-export-extensions",
            "syntax-export-extensions"
        ]
    }

二、 wepy根據(jù)環(huán)境變量來改變運(yùn)行時的參數(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);
}

// 原生的事件傳參方式:
 Click me! 

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。
// 事件響應(yīng)以及組件通訊事件參數(shù)順序調(diào)整，將$event移至末尾，即最后一個參數(shù)為事件參數(shù)。
 Click me! 

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

// 蒙層彈窗出現(xiàn)與隱藏


...



...

data = {
    flags: {
        layerRule: true,
        layerPrize: true,
        ...
    }
}

//出現(xiàn)
showLayer (e,layerName) {
    let key = layerName.currentTarget.dataset.wpyshowlayerA; //優(yōu)化data-,此時dataset結(jié)點(diǎn)后的字段名框架自動生成，
    為wpy + 函數(shù)名(小寫) + 大寫26個字母中的一個，
    由于我上面只傳了一個參數(shù)，則此時e代表的就是此時傳的第一個參數(shù)名。
    // 記住：最后一個才會是事件名，所有的事件都綁在最后一個參數(shù)上。
    this.flags[key] = false;
},
//消失
hideLayer (e,layerName) {
    let key = layerName.currentTarget.dataset.wpyhidelayerA;
    this.flags[key] = true;
},

// 在vue中動態(tài)綁定class

// 在wepy中，要使用微信原生的綁定語法

// 其中 class-a 是不需要動態(tài)綁定的class， 雙括號中才是需要綁定的class

可以使用WePY提供的全局?jǐn)r截器對原生API的請求進(jìn)行攔截。
具體方法是配置API的config、fail、success、complete回調(diào)函數(shù)。參考示例：

import wepy from "wepy";

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

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

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

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

組件傳值

// wepy.component基類提供$broadcast、$emit、$invoke三個方法用于組件之間的通信和交互
   · $broadcast：父組件觸發(fā)所有子組件事件
   · $emit：子組件觸發(fā)父組件事件
   · $invoke：子組件觸發(fā)子組件事件
   注意：可以以$標(biāo)識符來獲取wepy框架內(nèi)建屬性和方法。$name:String: 組件名稱。

$broadcast使用案例：

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

// index.wpy(pages頁面) ---父組件


// list.wpy(components頁面) ---子組件

$emit使用案例：

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

下面通過這個例子來說明

// index.wpy(pages頁面) ---父組件


// count.wpy(components頁面) ---子組件

$invoke使用案例：

$invoke是一個頁面或組件對另一個組件中的方法的直接調(diào)用，通過傳入組件路徑找到相應(yīng)的組件，然后再調(diào)用其方法。
比如，想在頁面Page_Index中調(diào)用組件ComA的某個方法：

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

如果想在組件ComA中調(diào)用組件ComG的某個方法：

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

wepy 封裝的屬性,可以獲取globalData、$wxapp等

1.$instance 全局實(shí)例封裝

//wepy.app Class
//屬性
1.$wxapp:Object 等同于 getApp()
2.$pages:List 所有列表頁面
3.$interceptors:List