综述

• 小程序开发有哪些痛点
• 什么是以及如何使用 wepy
• wepy使用注意事项
• ......

一、小程序开发有哪些痛点

RT，这里给几个我认为开发过程中不爽的几个地方，抛砖引玉。P.S.如果你还不了解如何开发小程序，那么得抓紧看下小程序开发简易教程了，xiongdei

1） 频繁调用 setData及 setData过程中页面跳闪，见 @张帅 Page和data

2） 组件化支持能力太弱(几乎没有)

3） 不能使用 less、jade 等

4） 无法使用 NPM 包及 ES 高级语法

5） request 并发次数限制

6） 一个页面对应4个文件，看的眼花缭乱

......

二、什么是以及为什么使用 wepy

如果可以，请先花3、5分钟看一下正经官方文档。因为关于wepy的一切，文档肯定比我说的清楚。

现在，我们这样写小程序，是不是很嗨皮呢，（cou zi shu：

<style lang="less">
    @color: #4D926F;
    .userinfo {
        color: @color;
    }
</style>
<template lang="pug">
    view(class='container')
        view(class='userinfo' @tap='tap')
            mycom(:prop.sync='myprop' @fn.user='myevent')
            text {{now}}
</template>

<script>
    import wepy from 'wepy';
    import mycom from '../components/mycom';

    export default class Index extends wepy.page {
        
        components = { mycom };
        data = {
            myprop: {}
        };
        computed = {
            now () { return +new Date(); }
        };
        async onLoad() {
            await sleep(3);
            console.log('Hello World');
        }
        sleep(time) {
            return new Promise((resolve, reject) => setTimeout(() => resolve, time * 1000));
        }
    }
</script>

写到这里我突然发现没什么可写的了，文档都很清楚啊！MDZZ

三、wepy 使用注意事项

由于类Vue的开发风格，使得开发效率变高了，一个页面对应一个文件，后期维护变得更简单了。然鹅，因为微信的种种限制以及wepy的黑魔法，导致我们不能随心所欲的管理应用。

3.1 数据管理问题

组件间的数据可以使用框架提供的 $emit $broast等方法，但页面之间的数据，就需要我们手动管理，非常麻烦且易于出错。

就目前来看，主要有三种方案可以选择：

• Gloabal 对象或Storage

  使用微信提供的getApp()方法，可以在页面间随意访问和改写这个对象。

• EventBus

  通过订阅/发布事件的方式，共享数据

• Store

  创建一个存储类来管理数据，本质上和Storage类似，但不能直接对数据进行修改而通过action触发数据变更。

在拼车小程序中，使用的是第二种方法。详见

关于第三种Store方案，原本我想使用mobx来管理小程序的数据，尝试后失败了。但自己创建一个类来管理数据，总觉得有些地方不妥，真心希望你能给个意见。

Store.js

class Store {
  constructor (initState = {}) {
    if (typeof initState !== 'object' || initState === null) {
      throw new TypeError('[Store] Init state must be a object.')
    }
    const _state = this._state = deepclone(initState)
    this.state = this._hookState(_state)
  }
   // 禁止直接修改
  _hookState (_state) {
    const state = {}
    Object.keys(_state).forEach(key => {
      if (typeof _state[key] === 'object' && _state[key] !== null) {
        _state[key] = this._hookState(_state[key])
      } else if (typeof _state[key] === 'function') {
        throw new TypeError('[Store] state cannot save function.')
      }
      Object.defineProperty(state, key, {
        enumerable: true,
        configurable: true,
        get () {
          return _state[key]
        },
        set (newVal) {
          throw new TypeError('[Store] mutate state failed. Use .mutate() to mutate state')
        }
      })
    })
    return state
  }
  mutate (fn) {
    const newState = this._state = deepclone(
      fn.apply(null, this._state)
    )
    this.state = this._hookState(newState)
  }
}
module.exports = new Store({})

3.2 数据预加载优化

事情原由：我在页面a写了一个倒计时，跳转到页面b后发现倒计时仍然在进行，这说明即便发生跳转，页面的 Javascript 数据并不会从内存中消失。

一般，我们请求数据是在onLoad中进行，但是小程序的 page 1跳转到 page 2，再到 page 2 的 onLoad是存在一个 300ms ~ 400ms 的延时的（这点@张帅 的上篇文章也提到了），所以我们白白浪费了这个时间。

wepy扩展了生命周期，添加了onPrefetch事件，会在 redirect之时被主动调用。同时给onLoad事件添加了一个参数，用于接收预加载或者是预查询的数据：

// params
// data.from: 来源页面，page1
// data.prefetch: 预查询数据
// data.preload: 预加载数据
onLoad (params, data) {}

预加载数据示例：

// page1.wpy 预先加载 page2 需要的数据。

methods: {
  tap () {
    this.$redirect('./page2');
  }
},
onLoad () {
  setTimeout(() => {
    this.$preload('list', api.getBigList())
  }, 3000)
}

// page2.wpy 直接从参数中拿到 page1 中预先加载的数据
onLoad (params, data) {
  data.preload.list.then((list) => render(list));
}

预查询数据示例：

// page1.wpy 使用封装的 redirect 方法跳转时，会调用 page2 的 onPrefetch 方法
methods: {
  tap () {
    this.$redirect('./page2');
  }
}

// page2.wpy 直接从参数中拿到 onPrefetch 中返回的数据
onPrefetch () {
  return api.getBigList();
}
onLoad (params, data) {
  data.prefetch.then((list) => render(list));
}

3.3 数据上报

MTA是腾讯自家的数据分析平台，在小程序发布后MTA平台很快的就支持了小程序的数据上报。因此手机充值选择MTA做为数据上报平台，具体步骤如下：

在MTA官网注册应用；

在mp平台，小程序开发设置中，将https://pingtas.qq.com添加为可信域名；

安装 mta-analysis 模块：npm install mta-analysis --save；

在 app.wpy 中添加初始化代码。

import wepy from 'wepy';
import mta from 'mta-analysis';

export default class extends wepy.app {
   onLaunch() {
       mta.App.init({
          "appID":"xxxx", // 注册后得到的appID
          "eventID":"xxxx", // 注册后得到的eventID
          "statPullDownFresh":true, // 使用分析-下来刷新次数/人数，必须先开通自定义事件，并配置了合法的eventID
          "statShareApp":true, // 使用分析-分享次数/人数，必须先开通自定义事件，并配置了合法的eventID
          "statReachBottom":true // 使用分析-页面触底次数/人数，必须先开通自定义事件，并配置了合法的eventID
       });
   };
}

这样就完成了MTA的初始化工作，在每个页面的 onLoad 事件中加入 init 事件完成页面的上报。

export default class Index extends wepy.page {
   onLoad () {
       mta.Page.init();
   };
}

在 app.wpy 中加入报错上报。

export default class extends wepy.app {
   onError () {
       mta.Event.stat("error",{});
   };
}

以及在其它业务逻辑代码上加入一些自定义事件上报，比如下单上报，支持上报等等。

mta.Event.stat("payed",{});

待续......