wepy框架开发小程序文档

摘要：目录项目构建文件使用优化之处组件通信的使用注意事项报错记录踩坑记录项目构建官方文档地址链接项目源码地址链接项目资料地址链接简单介绍是一个微信小程序框架，支持模块化开发，开发风格类似。使用的方式请求小程序原生都将化。

wepy项目构建

wepy文件使用

wepy优化之处

wepy组件通信

wepy的API使用

wepy注意事项

wepy报错记录

wepy踩坑记录

官方文档地址链接
项目源码地址链接
项目资料地址链接

简单介绍：wepy是一个微信小程序框架，支持模块化开发，开发风格类似Vue.js。可搭配redux使用，能同时打包出web和小程序。

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

npm install -g wepy-cli

创建项目

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三大标签，有lang、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，且加上类名加以区分

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

// wepy.config.js是webpack配置文件
// 该文件可配置环境变量来改变运行时的参数
  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根据环境变量来改变运行时的参数

官方指出链接

// 原生代码:
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; //优化data-,此时dataset结点后的字段名框架自动生成，
    为wpy + 函数名(小写) + 大写26个字母中的一个，
    由于我上面只传了一个参数，则此时e代表的就是此时传的第一个参数名。
    // 记住：最后一个才会是事件名，所有的事件都绑在最后一个参数上。
    this.flags[key] = false;
},
//消失
hideLayer (e,layerName) {
    let key = layerName.currentTarget.dataset.wpyhidelayerA;
    this.flags[key] = true;
},

// 在vue中动态绑定class

// 在wepy中，要使用微信原生的绑定语法

// 其中 class-a 是不需要动态绑定的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", {
            // 发出请求时的回调函数
            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);
            }
        });
    }
}

组件传值

// wepy.component基类提供$broadcast、$emit、$invoke三个方法用于组件之间的通信和交互
   · $broadcast：父组件触发所有子组件事件
   · $emit：子组件触发父组件事件
   · $invoke：子组件触发子组件事件
   注意：可以以$标识符来获取wepy框架内建属性和方法。$name:String: 组件名称。

$broadcast使用案例：

$broadcast事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。事件广播的顺序为广度优先搜索顺序。

// index.wpy(pages页面) ---父组件


// list.wpy(components页面) ---子组件

$emit使用案例：

$emit与$broadcast正好相反，事件发起组件的所有祖先组件会依次接收到$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