打造“微信小程序”组件化开发框架

2022-06-29 17:08:02 浏览数 (1)

作者：龚澄--腾讯前端工程师

@IMWeb前端社区

导语

作为第一批小程序内测用户，我很有幸见证了小程序的成长，小程序上手十分简单，容易理解。但同时，因为运行环境的原因导致小程序无法使用市面上的流行框架。小程序本身提供一此特性如：模块化，模板，数据绑定等，能极大的方便了使用惯MVVM框架的用户。

在几个月的开发历程里，我一直希望能有一套方案更大可能的让小程序开发更贴近于当下开发习惯，因此才会有wepy。通过wepy开发的代码经过编译后，能生成一份完美运行在小程序端的代码，而且wepy的目的就是让小程序开发更贴近于传统H5框架开发，让小程序能像开发H5一样支持引入NPM包，支持组件化开发以及支持JS新特性等等。

小程序框架wepy文档

成品DEMO展示

  • 一个是使用wepy new demo命令生成的标准demo
  • 一个是基于wepy开发的手机充值的完整demo。
  • 一个是基于wepy开发的开源的仿微信的聊天界面

以上三个demo均在安卓机和IOS机上运行过通。

附上仿微信的聊天界面DEMO下载地址 https://github.com/wepyjs/wepy-wechat-demo

快速入门

项目创建与使用

以下安装都通过npm安装

安装（更新） wepy 命令行工具。

代码语言：javascript复制
npm install wepy-cli -g

在开发目录生成开发DEMO。

代码语言：javascript复制
wepy new myproject

切换至项目目录。

代码语言：javascript复制
cd myproject

开发实时编译。

代码语言：javascript复制
wepy build --watch
项目目录结构
开发使用说明
  1. 使用微信开发者工具新建项目，本地开发选择dist目录。
  2. 微信开发者工具 --> 项目 --> 关闭ES6转ES5。
  3. 本地项目根目录运行wepy build --watch，开启实时编译。
Sublime下代码高亮

文件后缀为.wpy，可共用vue高亮，但需要手动安装。

  1. 打开Sublime->Preferences->Browse Packages..进入用户包文件夹。
  2. 在此文件夹下打开cmd，运行git clone git@github.com:vuejs/vue-syntax-highlight.git，无GIT用户可以直接下载zip包解压至当前文件夹。
  3. 关闭.wpy文件重新打开即可高亮。
WebStorm下代码高亮
  1. 打开Preferences，搜索Plugins，搜索Vue.js插件并安装。
  2. 打开Preferences，搜索File Types，找到Vue.js Template，在Registered Patterns添加*.wpy，即可高亮。

代码规范：

  1. 变量与方法使用尽量使用驼峰式命名，避免使用$开头。 以$开头的方法或者属性为框架内建方法或者属性，可以被使用，使用前请参考API文档。
  2. 入口，页面，组件的命名后缀为.wpy。外链的文件可以是其它后缀。 请参考wpy文件说明
  3. 使用ES6语法开发。 框架在ES6下开发，因此也需要使用ES6开发小程序，ES6中有大量的语法糖可以让我们的代码更加简洁高效。
  4. 使用Promise： 框架默认对小程序提供的API全都进行了 Promise 处理，甚至可以直接使用async/await等新特性进行开发。
  5. 事件绑定语法使用优化语法代替： 原bindtap="click"替换为@tap="click"，原catchtap="click"替换为@tap.stop="click"。更多@符用法，参见组件自定义事件。
  6. 事件传参使用优化后语法代替： 原bindtap="click" data-index={{index}}替换为@tap="click({{index}})"。
  7. 自定义组件命名应避开微信原生组件以及功能标签<repeat>。 不可以使用input, button, view, repeat等命名自定义组件。更多repeat用法，参见循环列表组件引用。

主要解决问题：

1. 开发模式转换

在原有的小程序的开发模式下进行再次封装，更贴近于现有MVVM框架开发模式。框架在开发过程中参考了一些现在框架的一些特性，并且融入其中，以下是使用wepy前后的代码对比图。

官方DEMO代码：

基于wepy的实现：

2. 支持组件化开发。

参见章节：组件示例代

3. 支持加载外部NPM包。

在编译过程当中，会递归遍历代码中的require然后将对应依赖文件从node_modules当中拷贝出来，并且修改require为相对路径，从而实现对外部NPM包的支持。如下图：

4. 单文件模式，使得目录结构更加清晰。

官方目录结构要求app必须有三个文件app.json，app.js，app.wxss，页面有4个文件 index.json，index.js，index.wxml，index.wxss。而且文件必须同名。 所以使用wepy开发前后开发目录对比如下：

官方DEMO：

使用wepy框架后目录结构：

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

用户可以通过修改wepy.config.js(老版本使用.wepyrc)配置文件，配置自己熟悉的babel环境进行开发。默认开启使用了一些新的特性如promise，async/await等等。

示例代码：

6. 针对原生API进行优化。

对现在API进行promise处理，同时修复一些现有API的缺陷，比如：wx.request并发问题等。 原有代码：

基于wepy实现代码：

在同时并发10个request请求测试时：

不使用wepy:

使用wepy后：

进阶说明

wepy.config.js 配置文件说明

执行wepy new demo后，会生成类似配置文件。

**wpyExt：**缺省值为'.wpy'，IDE默认情况下不会对此文件类型高亮，此时可以修改所有文件为.vue后缀(因为与vue高亮规则一样)，然后将此选项修改为.vue，就能解决部分IDE代码高亮问题。

compilers： compilers为1.3.1版本之后的功能，如果需要使用其它语法，请先配置compilers，然后再安装相应的compilers。目前支持wepy-compiler-less，wepy-compiler-sass，wepy-compiler-babel，wepy-compiler-pug。持续开发... 对应compiler请参考各自文档

plugins： plugins为1.1.6版本之后功能，目前支持js压缩与图片压缩，wepy-plugin-ugliyjs，wepy-plugin-imagemin。持续开发...

关于compilers和plugins

1.3.1版本新功能，文档建设中...

wpy文件说明

wpy文件的编译过程过下：

一个.wpy文件分为三个部分：

  1. 样式<style></style>对应原有wxss。
  2. 模板<template></template>对应原有wxml。
  3. 代码<script></script>对应原有js。

其中入口文件app.wpy不需要template，所以编译时会被忽略。这三个标签都支持lang和src属性，lang决定了其代码编译过程，src决定是否外联代码，存在src属性且有效时，忽略内联代码，示例如下：

标签对应 lang 值如下表所示：

script说明

程序入口app.wpy

入口app.wpy继承自wepy.app，包含一个config属性和其全局属性、方法、事件。其中config属性对应原有的app.json，编译时会根据config生成app.json文件，如果需要修改config中的内容，请使用系统提供API。

页面index.wpy

页面入口继承自wepy.page，主要属性说明如下：

组件com.wpy

页面入口继承自wepy.component，属性与页面属性一样，除了不需要config以及页面特有的一些小程序事件等等。

组件

小程序支持js模块化，但彼此独立，业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用的效果。 例如模板A中绑定一个bindtap="myclick"，模板B中同样绑定一样bindtap="myclick"，那么就会影响同一个页面事件。对于数据同样如此。因此只有通过改变变量或者事件方法，或者给其加不同前缀才能实现绑定不同事件或者不同数据。当页面复杂之后就十分不利于开发维护。 因此wepy让小程序支持组件化开发，组件的所有业务与功能在组件本身实现，组件与组件之间彼此隔离，上述例子在wepy的组件化开发过程中，A组件只会影响到A绑定的myclick，B也如此。

wepy编译组件的过程如下：

普通组件引用

当页面或者组件需要引入子组件时，需要在页面或者script中的components给组件分配唯一id，并且在template中添加<component>标签。如：

循环列表组件引用

1.4.6新增

当想在wx:for中使用组件时，需要使用辅助标签<repeat>，如下：

页面和组件都可以引入子组件，引入若干组件后，如下图：

Index页面引入A，B，C三个组件，同时组件A和B又有自己的子组件D，E，F，G，H。

Props 传值

静态传值

使用静态传值时，子组件会接收到字符串的值。

动态传值

使用:prop（等价于v-bind:prop），代表动态传值，子组件会接收父组件的数据。

组件通信与交互

wepy.component基类提供三个方法$broadcast，$emit，$invoke，因此任一页面或任一组件都可以调用上述三种方法实现通信与交互，如：

代码语言：javascript复制
$this.$emit('some-event', 1, 2, 3, 4);

组件的事件监听需要写在events属性下，如：

$broadcast $broadcast事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。事件广播的顺序为广度优先搜索顺序，如上图，如果Page_Index发起一个$broadcast事件，那么接收到事件的先后顺序为：A, B, C, D, E, F, G, H。如下图：

$emit $emit与$broadcast正好相反，事件发起组件的父组件会依次接收到$emit事件，如上图，如果E发起一个$emit事件，那么接收到事件的先后顺序为：A, Page_Index。如下图：

$invoke $invoke是一个组件对另一个组件的直接调用，通过传入的组件路径找到相应组件，然后再调用其方法。 如果想在Page_Index中调用组件A的某个方法：

代码语言：javascript复制
this.$invoke('ComA', 'someMethod', 'someArgs');

如果想在组件A中调用组件G的某个方法：

代码语言：javascript复制
this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');
组件自定义事件

1.4.8新增

可以使用@customEvent.user绑定用户自定义组件事件。

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

目前有三种后缀：

  • .default: 绑定小程序冒泡事件事件，如bindtap。
  • .stop: 绑定小程序非冒泡事件，如catchtap。
  • .user: 绑定用户自定义组件事件，通过$emit触发。

示例如下：

组件内容分发slot

可以使用<slot>元素作为组件内容插槽，在使用组件时，可以随意进行组件内容分发，参看以下示例：

在Panel组件中有以下模板：

在父组件使用Pannel组件时，可以这样使用：

第三方组件

wepyjs 允许使用基于wepyjs开发的第三方组件，开发第三方组件规范请参考wepy-com-toast。

混合

混合可以将组之间的可复用部分抽离，从而在组件中使用混合时，可以将混合的数据，事件以及方法注入到组件之中。混合分分为两种：

  • 默认式混合
  • 兼容式混合
默认式混合

对于组件data数据，components组件，events事件以及其它自定义方法采用默认式混合，即如果组件未声明该数据，组件，事件，自定义方法等，那么将混合对象中的选项将注入组件这中。对于组件已声明的选项将不受影响。

兼容式混合

对于组件methods响应事件，以及小程序页面事件将采用兼容式混合，即先响应组件本身响应事件，然后再响应混合对象中响应事件。

拦截器

可以使用全域拦截器配置API的config、fail、success、complete方法，参考示例：

数据绑定

小程序数据绑定方式

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

代码语言：javascript复制
this.setData({title: 'this is title'});

因为小程序架构本身原因，页面渲染层和JS逻辑层分开的，setData操作实际就是JS逻辑层与页面渲染层之间的通信，那么如果在同一次运行周期内多次执行setData操作时，那么通信的次数是一次还是多次呢？这个取决于API本身的设计。

wepy数据绑定方式

wepy使用脏数据检查对setData进行封装，在函数运行周期结束时执行脏数据检查，一来可以不用关心页面多次setData是否会有性能上的问题，二来可以更加简洁去修改数据实现绑定，不用重复去写setData方法。代码如下：

代码语言：javascript复制
this.title = 'this is title';

但需注意，在函数运行周期之外的函数里去修改数据需要手动调用$apply方法。如：

代码语言：javascript复制
setTimeout(() => {    this.title = 'this is title';    this.$apply();
}, 3000);
wepy脏数据检查流程

在执行脏数据检查是，会通过this.$$phase标识当前检查状态，并且会保证在并发的流程当中，只会有一个脏数据检查流程在运行，以下是执行脏数据检查的流程图：

其它优化细节

1. wx.request 接收参数修改

2. 优化事件参数传递

3. 改变数据绑定方式

保留setData方法，但不建议使用setData执行绑定，修复传入undefined的bug，并且修改入参支持： this.setData(target, value) this.setData(object)

4. 组件代替模板和模块

API

wepy.event

wepy.component

wepy.page

wepy.app

如果您觉得有所收获，就请转发该文到朋友圈和小伙伴一起分享吧~

腾讯IMWeb前端社区

免费大咖直播课

定期优质干货文章推送

小程序 api jquery 微信 vue.js

0 人点赞