微信小程序与组件化开发

小程序是微信2017年1月正式上线的一个具有重要意义产品，它是一种不需要下载安装即可使用的应用，实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。小程序是一个功能丰富，操作简洁的轻应用。不同的小程序，能实现不同的功能。目前小程序的应用越来越广泛，它的应用场景也越来越多，例如：小游戏、打车、网购、餐厅点菜、查询信息、预定酒店等，各类App所能实现的用户需求在小程序里同样可以很好的实现。

小程序介绍

小程序整个系统分为两块视图层（View）和逻辑层（App Service）。小程序开发框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，它的核心是一个响应的数据绑定系统。

文件结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。其具体结构及说明如下图：

小程序文件结构

页面管理

框架管理了整个小程序的页面路由，并给以页面完整的生命周期。我们需要做的只是将页面的数据，方法，生命周期函数注册进框架中，其他的一切复杂的操作都交由框架处理。这也体现了小程序开发框架的目标，通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

逻辑层

小程序开发框架的逻辑层由 JavaScript 编写。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

• 增加 App 和 Page 方法，进行程序和页面的注册。
• 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
• 提供丰富的API ，如微信用户数据，扫一扫，支付等微信特有能力。
• 每个页面有独立的作用域，并提供模块化能力。
• 由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。

视图层

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

• WXML(WeiXin Markup language) 用于描述页面的结构。
• WXSS(WeiXin Style Sheet) 用于描述页面的样式。
• 组件(Component)是视图的基本组成单元。框架提供了一系列基础组件，我们可以通过组合这些基础组件进行快速开发。
• 自定义组件,即我们可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用。类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。自定义组件在使用时与基础组件非常相似。

随着小程序的发展，它在实际的开发中也暴露了一些不足的地方，如主要支持模块化而组件化支持太弱、频繁调用setData及setData过程中页面跳闪、request并发次数限制及一个页面对应4个文件，看的眼花缭乱等。因此，目前也出现了一些关于优化小程序开发的框架，其中，腾讯推出的WePY作为支持小程序组件化开发的框架，受到了许多开发者的青睐。下面让我们来了解下WePY这个框架及一些实践。

微信小程序组件化开发框架WePY

WePY是让小程序支持组件化开发的框架，它在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性，对原生小程序的开发模式进行了再次封装，更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。

小程序入口、页面、组件文件名的后缀为.wpy；外链的文件可以是其它后缀。

.wpy文件编译过程如下：

.wpy文件编译过程

组件化开发

原生小程序支持js模块化，但彼此独立，业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用的效果。因此，在WePY中实现了小程序的组件化开发，组件的所有业务与功能在组件本身实现，组件与组件之间彼此隔离。

• 静态组件

WePY中的组件都是静态组件，是以组件ID作为唯一标识的，每一个ID都对应一个组件实例，当页面引入两个相同ID的组件时，这两个组件共用同一个实例与数据，当其中一个组件数据变化时，另外一个也会一起变化。如果需要避免这个问题，则需要分配多个组件ID和实例。

• 组件循环渲染

当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签)，必须使用WePY定义的辅助标签<repeat>。

示例代码：

<style type="less">
  .group {}
</style>
<template>
  <view class="group">
    <text class="id">{{grouplist.id}}. </text>
    <text class="name" @tap="tap">{{grouplist.name}}</text>
    <view>
      <!-- 注意，使用for属性，而不是使用wx:for属性 -->
      <repeat for="{{grouplist.list}}" item="item">
        <groupitem1 :gitem="item"></groupitem>
        <groupitem2 :gitem="item"></groupitem>
      </repeat>
    </view>
  </view>
</template>

 <script>

  import wepy from 'wepy'
  import GroupItem from './groupitem'

  export default class Group extends wepy.component {
    props = {
      grouplist: {},
      index: {}
    }
    components = {
      groupitem1: GroupItem
      groupitem2: GroupItem
    }
    methods = {
      tap () {
        this.grouplist.name = Parent Random(${Math.random()})
        console.log(Clicked Group ${this.$index}, ID is ${this.grouplist.id})
      }
    }
  }
</script>

• 动态传值

动态传值是指父组件向子组件传递动态数据内容，父子组件数据完全独立互不干扰。但可以通过使用.sync修饰符来达到父组件数据绑定至子组件的效果，也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了。

示例代码：

// parent.wpy

<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>

data = {
    parentTitle: 'p-title'
};

// child.wpy

props = {
    // 静态传值
    title: String,
    // 父向子单向动态传值
    syncTitle: {
        type: String,
        default: 'null'
    },

    twoWayTitle: {
        type: Number,
        default: 'nothing',
        twoWay: true
    }
};

onLoad () {
    this.title = 'c-title';
    console.log(this.$parent.parentTitle); // p-title.
    this.twoWayTitle = 'two-way-title';
    this.$apply();
    console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值
    this.$parent.parentTitle = 'p-title-changed';
    this.$parent.$apply();
    console.log(this.title); // 'c-title';
    console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。
}

• 组件通信与交互

wepy.component基类提供$broadcast、$emit、$invoke三个方法用于组件之间的通信和交互。用于监听组件之间的通信与交互事件的事件处理函数需要写在组件和页面的events对象中。

1.$broadcast事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。

2.$emit与$broadcast正好相反，事件发起组件的所有祖先组件会依次接收到$emit事件。

3.$invoke是一个页面或组件对另一个组件中的方法的直接调用，通过传入组件路径找到相应的组件，然后再调用其方法。

this.$emit('some-event', 1, 2, 3, 4);

//在组件ComA中调用组件ComG的某个方法
this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

• 组件自定义事件处理函数

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

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

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

单文件模式

原生小程序要求app实例必须有3个文件：app.js、app.json、app.wxss，而page页面则一般有4个文件：page.js、page.json、page.wxml、page.wxss，并且还要求app实例的3个文件以及page页面的4个文件除后缀名外必须同名。而在WePY中则使用了单文件模式，将原生小程序app实例的3个文件统一为app.wpy，page页面的4个文件统一为page.wpy。

使用WePY框架后的开发目录结构(主要为src目录的结构，dist目录除外)：

project
└── src
    ├── pages
    |   ├── index.wpy    index 页面逻辑、配置、结构、样式
    |   └── log.wpy      log 页面逻辑、配置、结构、样式
    └──app.wpy           小程序逻辑、公共配置、公共样式

支持ES6/7的一些新特性

WePY默认对小程序提供的API全都进行了 Promise 处理，甚至可以直接使用async/await等新特性进行开发。但在1.4.1以后的版本，需要用户手动启用Promise方法。

示例代码：

import wepy from 'wepy';

export default class Index extends wepy.page {
    getData() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({data: 123});
            }, 3000);
        });
    };
    async onLoad() {
        let data = await this.getData();
        console.log(data.data);
    };
}

对原生API进行优化

对小程序原生API进行Promise处理，同时修复了一些原生API的缺陷，比如：wx.request的并发问题（原生小程序框架最多支持同时发起5个wx.request请求，WePY优化后可以支持同时5个以上请求）等。

原生代码：

onLoad = function () {
    var self = this;
    wx.login({
        success: function (data) {
            wx.getUserInfo({
                success: function (userinfo) {
                    self.setData({userInfo: userinfo});
                }
            });
         }
    });
}

基于WePY的代码：

import wepy from 'wepy';

async onLoad() {
    await wepy.login();
    this.userInfo = await wepy.getUserInfo();
}

数据绑定

• 原生小程序的数据绑定方式

原生小程序通过Page提供的setData方法来绑定数据，如：

this.setData({title: 'this is title'});

因为小程序架构本身原因，页面渲染层和JS逻辑层分开的，setData操作实际就是JS逻辑层与页面渲染层之间的通信，那么如果在同一次运行周期内多次执行setData操作时，那么通信的次数多就会影响页面性能。

• WePY数据绑定方式

WePY使用脏数据检查对setData进行封装，在函数运行周期结束时执行脏数据检查（在执行脏数据检查时，会通过this.$$phase标识当前检查状态，并且会保证在并发的流程当中，只会有一个脏数据检查流程在运行），一来可以不用关心页面多次setData是否会有性能上的问题，二来可以更加简洁去修改数据实现绑定，不用重复去写setData方法。

this.title = 'this is title';

//在异步函数中更新数据的时，必须手动调用$apply方法，才会触发脏数据检查流程的运行。
setTimeout(() => {
    this.title = 'this is title';
    this.$apply();
}, 3000)

以上内容是通过浏览微信小程序开发文档、WePY官方文档和一些简单实践之后所梳理的一些内容，以及总结了我觉得作为一个前端开发框架比较好的特性，对于小程序的深入认识我会在后续在开发中逐渐积累经验，希望有机会可以与各位小伙伴一起探讨！

参考资料

• https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=201818
• https://tencent.github.io/wepy/