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

wepy項目構建

wepy文件使用

wepy優(yōu)化之處

wepy組件通信

wepy的API使用

wepy注意事項

wepy報錯記錄

wepy踩坑記錄

官方文檔地址鏈接
項目源碼地址鏈接
項目資料地址鏈接

簡單介紹：wepy是一個微信小程序框架，支持模塊化開發(fā)，開發(fā)風格類似Vue.js。可搭配redux使用，能同時打包出web和小程序。

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

npm install -g wepy-cli

創(chuàng)建項目

wepy init standard my-project[項目名]

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，會對代碼格式校驗
? Use Redux in your project? No ---選擇Yes，可以使用Redux框架語法,目錄會多出store目錄
? Use web transform feature in your project? Yes ---選擇Yes會有index.template.html

切換至項目目錄

cd wepy-demo[項目目錄]

安裝依賴

npm install

開啟實時編譯

npm run dev

構建項目完整目錄

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

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

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

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

// mixins是放混合組件的地方，用于復用不同組件中的相同功能。
// 例如：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)境變量來改變運行時的參數
  wpyExt: ".wpy", ---文件后綴名設置
  eslint: false, ---關閉eslint校驗
  
  resolve: {
    alias: {
        counter: path.join(__dirname, "src/components/counter"),
        "@": path.join(__dirname, "src") //配置文件路徑代碼
    },
    aliasFields: ["wepy", "weapp"],
    modules: ["node_modules"]
  },

一、 wepy項目中使用async await

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

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

二、 wepy根據環(huán)境變量來改變運行時的參數

官方指出鏈接

// 原生代碼:
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。
// 事件響應以及組件通訊事件參數順序調整，將$event移至末尾，即最后一個參數為事件參數。
 Click me! 

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

// 蒙層彈窗出現與隱藏


...



...

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

//出現
showLayer (e,layerName) {
    let key = layerName.currentTarget.dataset.wpyshowlayerA; //優(yōu)化data-,此時dataset結點后的字段名框架自動生成，
    為wpy + 函數名(小寫) + 大寫26個字母中的一個，
    由于我上面只傳了一個參數，則此時e代表的就是此時傳的第一個參數名。
    // 記住：最后一個才會是事件名，所有的事件都綁在最后一個參數上。
    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提供的全局攔截器對原生API的請求進行攔截。
具體方法是配置API的config、fail、success、complete回調函數。參考示例：

import wepy from "wepy";

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

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

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

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

組件傳值

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

$broadcast使用案例：

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

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


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

$emit使用案例：

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

下面通過這個例子來說明

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


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

$invoke使用案例：

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

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

如果想在組件ComA中調用組件ComG的某個方法：

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

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

1.$instance 全局實例封裝

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