微信小程序与组件化开发

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

参考资料

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,997评论 6赞 502
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,603评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,359评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,309评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,346评论 6赞 390
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,258评论 1赞 300
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,122评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,970评论 0赞 275
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,403评论 1赞 313
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,596评论 3赞 334
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,769评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,464评论 5赞 344
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,075评论 3赞 327
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,705评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,848评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,831评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,678评论 2赞 354