小程序是微信于2017年1月正式推出的重要产品。它是无需下载和安装即可使用的应用程序。它实现了“触手可及”的应用梦想。扫描或搜索以打开应用程序。 小程序是一款轻巧的应用程序，具有丰富的功能和简单的操作。不同的小程序可以实现不同的功能。目前，小程序的使用越来越广泛，其应用场景也越来越多，例如：迷你游戏，出租车，在线购物，餐厅订购，查询信息，预订酒店等，用户需要各种应用程序都可以实现。在小程序中也可以很好地实现。

小程序简介

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

文件结构

小程序包含一个描述整个程序的应用程序以及多个描述其各自页面的页面。其具体结构和描述如下：

小程序文件结构

页面管理

该框架管理整个小程序页面路由，并为页面提供完整的生命周期。我们要做的就是将页面数据，方法和生命周期函数注册到框架中，而所有其他复杂的操作都由框架处理。这也反映了小程序开发框架的目标，即允许开发人员尽可能简单有效地利用微信中具有本机APP经验的服务进行开发。

逻辑层

小程序开发框架的逻辑层是用JavaScript编写的。逻辑层处理数据并将其发送到视图层，同时接受来自视图层的事件反馈。

查看图层

框架的视图层由WXML和WXSS编写，并由组件显示。

随着小程序的开发，它还暴露了实际开发中的一些缺点，例如对模块化的主要支持，但组件化支持太弱，在频繁调用setData和setData时页面闪烁，并且请求同时。次数是有限的，一页对应于4个文件，令人眼花and乱等等。因此，还有一些用于优化小程序开发的框架。其中，腾讯的WePY作为支持小程序组件开发的框架，受到了许多开发人员的青睐。让我们了解WePY的框架和一些实践。

微信小程序基于组件的开发框架WePY

WePY是允许小程序支持组件化开发的框架。在开发过程中，它引用了诸如Vue之类的现有框架的某些语法样式和功能特征，并重新包装了原始的小程序开发模型。接近MVVM架构模式，并支持ES6 / 7的一些新功能。

小程序入口，页面和组件的文件名后缀为.wpy；外部文件可以有其他后缀。

.wpy文件的编译过程如下：

.wpy文件编译过程

组件化开发

本机小程序支持js模块化，但彼此独立，业务代码和交互事件仍需要在页面上进行处理。无法实现松散耦合和组件化重用的效果。因此，小程序的组件化开发是在WePY中实现的，组件的所有业务和功能都在组件本身中实现，并且组件彼此隔离。

WePY中的组件是静态组件，由组件ID唯一标识。每个ID对应一个组件实例。当将具有相同ID的两个组件引入页面时，两个组件共享相同的实例和数据，当一个组件数据发生更改时，另一个组件也将发生更改。如果需要避免此问题，则需要分配多个组件ID和实例。

当需要循环渲染WePY组件时（类似于通过wx：for循环渲染本机wxml标签），必须使用由WePY定义的辅助标签。

示例代码：

{{grouplist.id}}. {{grouplist.name}}

动态值传递意味着父组件将动态数据内容传输到子组件，并且父组件和子组件的数据完全独立，并且不会相互干扰。但是您可以使用.sync修饰符来实现将父组件数据绑定到子组件的效果，或者可以设置twoWay：子组件的true道具可以实现将子组件数据绑定到父组件的效果。 。如果同时使用.sync修饰符和twoWay：true到子组件属性中，则可以实现双向数据绑定。

示例代码：

// parent.wpydata = { parentTitle: 'p-title'};// child.wpyprops = { // 静态传值 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属性值，当在父组件中改变时，会同时改变子组件对应的值。}

ponent基类提供三种方法：$ broadcast，$ emit和$ invoke，用于组件之间的通信和交互。用于监视组件之间的通信和交互事件的事件处理程序功能需要写在组件和页面的事件对象中。

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”

当前共有三个事件后缀：

.default：绑定小程序起泡事件，例如bindtap，可以省略.default后缀； .stop：绑定小程序个捕获事件，例如catchtap； .user：绑定用户定义的组件事件，由$ emit触发。请注意，如果使用自定义事件，则事件中相应的侦听器函数将不会执行。

单文件模式

本机小程序要求应用程序实例必须具有3个文件：app.js，app.json，app.wxss，并且页面页面通常具有4个文件：page.js，page.json，page.wxml，page .wxss，并且还要求应用程序实例的3个文件和页面页面的4个文件必须具有相同的名称（后缀除外）。在WePY中，使用单一文件模式，本机小程序 app实例的3个文件被统一到app.wpy中，页面页面的4个文件被统一到page.wpy中。

使用WePY框架后的开发目录结构（主要是src目录的结构，除了dist目录）：

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

支持ES6 / 7的一些新功能

默认情况下，WePY处理小程序提供的所有API，甚至可以直接使用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，并修复某些本机API缺陷，例如：wx.request并发问题（在WePY优化后，本机小程序框架最多同时支持5个wx.request请求）可以同时支持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使用脏数据检查来封装setData，并在函数运行周期结束时执行脏数据检查（执行脏数据检查时，当前检查状态将由this。$$ phase标识，并确保它是在并发进程中，其中，只有运行中的脏数据检查进程）。首先，您无需担心页面在使用多个setData时是否会出现性能问题。其次，您可以修改数据以更简洁地实现绑定，而无需重复setData方法。

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

以上内容基于浏览微信小程序开发文档，WePY官方文档和一些简单的实践，并总结了一些我认为作为前端开发框架更好的内容，并对小程序我将逐步积累后续发展的经验，希望有机会与大家讨论！

参考资料