wepy使用总结

2019-02-03

之前做的一个小程序，用到了 wepy 小程序开发框架，小程序上线也有一段时间了，在此对使用 wepy 作一个小小的总结。

1. 支持组件化的 wepy

wepy官网对 wepy 的描述是让小程序支持组件化开发的框架。原生小程序组件化支持能力太弱，wepy 借鉴了 Vue 的语法风格，提供了类似用 Vue 开发微信小程序的体验。

2. 初始化

1	npm install wepy-cli -g

1	wepy init standard myproject

初始化之后的 src 开发目录结构如下，其中小程序运行代码目录是 dist ，由 wepy 的 build 指令自动编译生成：


├── app.wpy                小程序配置项
├── components             组件目录
│   ├── counter.wpy
│   ├── group.wpy
│   ├── groupitem.wpy
│   ├── list.wpy
│   ├── panel.wpy
│   └── wepy-list.wpy
├── index.template.html    模板文件
├── mixins                 Mixin 混合
│   └── test.js
├── pages                  页面目录    
│   └── index.wpy
└── store                  wepy-redux目录
    ├── actions
    │   ├── counter.js
    │   └── index.js
    ├── index.js
    ├── reducers
    │   ├── counter.js
    │   └── index.js
    └── types
        ├── counter.js
        └── index.js

项目运行

1 2	npm run dev 开发 npm run build 生产

页面结构如下，一个wpy文件包含了脚本部分、结构部分、样式部分：

<script>
import wepy from 'wepy';
import Counter from '../components/counter';
export default class Page extends wepy.page {
    config = {};
    components = {counter1: Counter};
    data = {};
    methods = {};
    events = {};
    onLoad() {};
    // Other properties
}
</script>
<template lang="wxml">
    <view>
    </view>
    <counter1></counter1>
</template>
<style lang="less">
/** less **/
</style>

组件结构也是类似，继承自wepy.component类，不需要config配置以及页面特有的一些生命周期函数。

<template lang="wxml">
    <view>  </view>
</template>
<script>
import wepy from 'wepy';
export default class Com extends wepy.component {
    components = {};
    data = {};
    methods = {};
    events = {};
    // Other properties
}
</script>
<style lang="less">
/** less **/
</style>

3. 特性

支持组件化
- computed 计算属性
- watcher 监听器
- props 传值
- slot 内容分发等
支持加载外部npm包，通过 npm i XXX 使用一些常用的包。
支持 ES6/7 的一些特性，如 async 函数，promise 等。

export const asyncInc = createAction(ASYNC_INCREMENT, () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(1)
    }, 1000)
  })
})

WXS，类似 Vue 的 filter

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

数据绑定方式，这里要注意的是，在异步函数中更新数据的时候，必须手动调用$apply方法，才会触发脏数据检查流程的运行，从而更新数据。

// 原生小程序
this.setData({message: 'hello world'});
// wepy
this.message = 'hello world';

4. 遇到的问题

props传递过去的值，html代码界面中显示正确，但在 onLoad 生命周期中打印 undefined，方法中使用也是 undefined。
- 在父组件利用 $broadcast，在获取到数据后对数据进行广播，然后在子组件中获取到数据。
在 wepy文档的最后，可以看到这么一段话：
WePY 1.x 版本中，组件使用的是静态编译组件，即组件是在编译阶段编译进页面的，每个组件都是唯一的一个实例，目前只提供简单的 repeat 支持。不支持在 repeat 的组件中去使用 props, computed, watch 等等特性。
- 将需要变量渲染的一整组数据直接通过 props 传给子组件，在子组件中使用 repeat 循环渲染。改变数据用子组件通过$emit改变数据源，更新数据。
路由问题，目前小程序最多支持打开10个page。
- 使用无限路由方案
全局数据管理问题：比如在 A 页面用到了全局数据 globalData，由 A 页面跳转到 B 页面，B 页面也用到了 globalData；在 B 页面改变 globalData，返回到 A 页面，发现 globalData 没实时更新到。
- 通过使用 wepy-redux ，来管理和分发全局数据。
- 另外还可以使用 EventBus 通过订阅/发布事件的方式，共享数据。

5. 总结

第一次使用wepy，虽然遇到了挺多坑点（原生也是很多坑），但是由于借鉴了Vue的代码风格，再对比原生小程序，还是极大的提高了开发的体验，使得后期的维护变得简单。

不正之处，还望指正。

参考链接：