微信小程序组件化开发框架WePY官方文档-优快云博客

本文介绍了WePY框架的基础使用方法，包括安装配置、项目初始化、代码规范及主要功能特性。覆盖了开发模式转换、组件化开发、外部NPM包支持等内容。

入门

使用

npm install wepy-cli -g
wepy init standard myproject // 初始化项目，使用 wepy list 查看项目模板
复制代码

添加项目

{
  "description": "project description",
  "setting": {
    "urlCheck": true,// 对应不检查安全域名选项，开启。 如果已配置好安全域名则建议关闭。
    "es6": false,// 未关闭会运行报错
    "postcss": false,
    "minified": false
  },
  "compileType": "miniprogram",
  "appid": "touristappid",
  "projectname": "Project name",
  "miniprogramRoot": "./dist"
}
复制代码

代码规范

变量与方法尽量使用驼峰式命名，并且注意避免使用$开头。
小程序入口、页面、组件文件名的后缀为.wpy；外链的文件可以是其它后缀。
事件绑定语法使用优化语法代替

@tap="click
@tap.stop="click"
@tap.capture="click"
@tap.capture.stop="click"
复制代码

事件传参使用优化后语法代替

@tap="click({{index}})
复制代码

主要功能

开发模式转换

支持组件化开发

支持加载外部NPM包

单文件模式，目录结构更清晰，开发更方便

默认使用babel编译，支持ES6/7的一些新特性

针对原生API进行优化

对小程序原生API进行promise处理，同时修复了一些原生API的缺陷，比如：wx.request的并发问题等。

import wepy from 'wepy';

async onLoad() {
    await wepy.login();
    this.userInfo = await wepy.getUserInfo();
}
复制代码

进阶

关于compilers和plugins : TODO:

.wpy文件说明

编辑过程：

脚本部分介绍

页面page.wpy

属性	说明
config	页面配置对象，对应于原生的`page.json`文件，类似于`app.wpy`中的config
components	页面组件列表对象，声明页面所引入的组件列表
data	页面渲染数据对象，存放可用于页面模板绑定的渲染数据
methods	wxml事件处理函数对象，存放响应wxml中所捕获到的事件的函数，如`bindtap`、`bindchange`
events	WePY组件事件处理函数对象，存放响应组件之间通过`$broadcast`、`$emit`、`$invoke`所传递的事件的函数
其它	小程序页面生命周期函数，如`onLoad`、`onReady`等，以及其它自定义的方法与属性

实例

import wepy from 'wepy';

// 声明一个App小程序实例
export default class MyAPP extends wepy.app {
}

// 声明一个Page页面实例
export default class IndexPage extends wepy.page {
}

// 声明一个Component组件实例
export default class MyComponent extends wepy.component {
}
复制代码

Page页面实例和Component组件实例

由于Page页面实际上继承自Component组件，即Page也是组件。注意，对于WePY中的methods属性，因为与Vue中的使用习惯不一致，非常容易造成误解，这里需要特别强调一下：WePY中的methods属性只能声明页面wxml标签的bind、catch事件，不能声明自定义方法，这与Vue中的用法是不一致的。

组件

WePY中的组件都是静态组件，是以组件ID作为唯一标识的，每一个ID都对应一个组件实例，当页面引入两个相同ID的组件时，这两个组件共用同一个实例与数据，当其中一个组件数据变化时，另外一个也会一起变化。

for:必须使用WePY定义的辅助标签
通信：$broadcast、$emit、$invoke
组件自定义事件处理函数:

可以通过使用.user修饰符为自定义组件绑定事件，如：@customEvent.user="myFn"

其中，@表示事件修饰符，customEvent 表示事件名称，.user表示事件后缀。

目前总共有三种事件后缀：

.default: 绑定小程序冒泡型事件，如bindtap，.default后缀可省略不写；
.stop: 绑定小程序捕获型事件，如catchtap；
.user: 绑定用户自定义组件事件，通过$emit触发。注意，如果用了自定义事件，则events中对应的监听函数不会再执行。

Mixin 混合

默认式混合:对于组件data数据，components组件，events事件以及其它自定义方法采用默认式混合，即如果组件未声明该数据，组件，事件，自定义方法等，那么将混合对象中的选项将注入组件之中。对于组件已声明的选项将不受影响。
兼容式混合:对于组件** methods**响应事件，以及小程序页面事件将采用兼容式混合，即先响应组件本身响应事件，然后再响应混合对象中响应事件。注意，这里事件的执行顺序跟Vue中相反，Vue中是先执行mixin中的函数，再执行组件本身的函数。

interceptor 拦截器

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);
            }
        });
    }
}
复制代码

其它优化细节

// 1. wx.request 接收参数修改
// WePY 使用方式, 需要开启 Promise 支持，参考开发规范章节
wepy.request('xxxx').then((d) => console.log(d));

// async/await 的使用方式, 需要开启 Promise 和 async/await 支持，参考 WIKI
async function request () {
   let d = await wepy.request('xxxxx');
   console.log(d);
}
// 2. 优化事件参数传递

// 原生的事件传参方式:

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


// 3. 改变数据绑定方式
// 原生代码:

<view> {{ message }} </view>

onLoad: function () {
    this.setData({message: 'hello world'});
}


// WePY
<view> {{ message }} </view>

onLoad () {
    this.message = 'hello world';
}
// 
复制代码