微信小程序BeautyWe.js开发范式介绍

时间：2021-08-21 来源：互联网编辑：宝哥软件园浏览：次

简介

什么是美好？

它是一个专注于微信小程序的企业级开发范式，其愿景是：

让企业级微信小程序项目中的代码更简单、更美观。

为什么要这样命名？

由美丽的我们为微信小程序写美丽的代码！

“我们”既是我们的我们，也是微信，两者都美！

那么它的卖点是什么呢？

关注微信小程序环境，写出微信小程序原码。因为它只关注微信小程序，所以它的源代码也很简单。插件编程使复杂的逻辑更容易打包。加上一些配套设施：一些官方插件。开箱即用，包括工程、项目规范和一个在微信小程序环境中解决独特问题的框架。帮助您快速创建应用程序、页面、组件等的命令行界面工具。它由以下部分组成：

插件式美的核心我们的核心

抽象打包App和Page，保持传统微信小程序开发姿态，开放一些原生能力，让他们具备“插件”的能力。

一些官方插件-美我们插件

由于Core的“可插拔”特性，复杂的逻辑被封装并可插拔。官方提供了一些通用需求的插件，比如增强存储、发布/订阅、状态机、Logger、缓存策略等等。

一套现成的项目框架——美好我们框架

描述了一种开箱即用的项目组织形式，集成BeautyWe Core，提供全局窗口、开发规范、多环境开发、全局配置、NPM等解决方案。

一个命令行界面工具-BeautyWe命令行界面

用于快速创建应用程序、页面、插件和构建项目的命令行工具。它还支持创建自定义模板。

一个简单的例子

下载

用美丽包装你的申请

之后，您可以使用BeautyWe Plugin提供的功能。

打开本机应用程序/页面并支持插件

新BtApp的执行结果({ 0.})是对原生Application进行打包，包括“插件”处理，然后返回一个新的实例，该实例适应原生app()方法。

我们来谈谈插件做了什么。

首先，插件开辟了原生App的四大功能：

1.1。数据域

将插件数据域合并到本机应用程序数据域很容易理解。

2.本机钩子函数

使本机钩子函数(如onShow、onLoad)可插拔。让原生App和多个插件同时监听同一个钩子函数。下面将详细解释其工作原理。

3.事件挂钩功能

事件钩子函数(钩子函数与视图层交互)在实现上有一定的区别，但其实现原理与“原生钩子函数”相同。

4.自定义方法

启用插件向消费者提供API。为了确保插件提供的API足够优雅，支持在调用插件API时(如事件插件this.event.on(.))，仍然可以通过这个在API方法内部获取原生实例。

挂钩功能插件

原生钩子函数和事件钩子函数统称为“钩子函数”。

对于每个钩子函数，内部是维护一个以Series Promise方式执行的执行队列。

以onShow为例，它将以这种形式执行：

原生. onshowplugina . onshowpluginb . onshow.

让我们深入探讨插件的原理：

工作原理如下：

包装在新的BtApp中(.)，所有的钩子函数都会有一个独立的执行队列。首先，每个原始的钩子函数将被推送到相应的队列。然后，每次使用插件时，插件的钩子函数都会被分解并推送到相应的队列中。当原生App触发钩子时，BtApp将以承诺系列的形式依次执行相应队列中的功能。特别地，在onLaunch和onLoad的执行队列中，一个初始化任务将被插入到队列的顶部，并且它将以同步的方式依次执行初始化队列中的函数。这只是插件生命周期函数中的plugin.initialize。该设计可以提供以下功能：

1.插件

只需将任务插入到相应钩子函数的事件队列中。

2.支持异步

因为是以Promise Series的方式运行，所以其中一个任务会返回Promise，下一个任务会等待这个任务完成后再开始。如果发生错误，它将流向本机onError()。

3.解决了微信小程序app.js中GetApp ()===Undefined的问题

这个问题的本质是在使用App()时没有创建本机实例。但是，由于Promise是事件循环中的一个微任务，因此它会在下一个循环中注册。所以App()在Promise执行的时候已经完成了。

一些官方插件

BeautyWe我们正式提供了一系列插件：

增强存储：存储数据列表：列表页缓存策略：缓存日志：记录器事件发布/订阅：事件状态机：状态。它们很容易使用，需要插在任何需要的地方。

由于篇幅的原因，我们挑几个有趣的来看看官方文档：BeautyWe

增强型存储存储

该功能由@beautywe/plugin-storage提供。

因为微信小程序的原始数据存储生命周期与小程序本身是一致的，也就是说，除非用户主动删除或者在一定时间后自动清理，否则数据永远是可用的。

因此，基于wx.getStorage/setStorage,该插件提供了两种扩展功能：

过期控制版本隔离的一些简单示例

装置

从“@beautywe/core”导入{ BTapp }；从“@beautywe/plugin-storage”导入存储；const app=new BTapp()；app . use(storage())；过期控制

//7天后过期app.storage.set ('name '，' JC '，{ expir e : 7 })；版本隔离

app . use({ app version : ' 0 . 0 . 1 ' })；app.set('name '，' JC ')；//返回jcapp . get(' name ')；//版本更新时，app . use({ app version : ' 0 . 0 . 2 ' })；//返回未定义；app . get(' name ')；查看@beautywe/plugin-storage的更多官方文档

数据列表列表页

@beautywe/plugin-listpage为非常常见的数据列表分页业务场景提供了一个包方案：

满足常见“数据列表分页”的业务场景支持分页并支持多个数据列表自动捕获下拉重载：onPullDownRefresh自动捕获上拉加载：onReacteBookstore自带请求锁，防止帕金森手抖用户简单优雅的API一个简单的例子：

从“@beautywe/core”导入BeautyWe；从“@beautywe/plugin-listpage”导入list page；const page=new BeautyWe。BtPage()；//使用listpage插件page . use(listpage({ lists : [{ name 3360 ' goods '，//数据名pageSize: 20，//每页多少条数据，默认为10 //每页的数据源，当页面没有加载时，会调用函数，然后取出返回的数据。Get pagedata ({pageno，page size }){//get data return pi . getgoodslist({ page no，page size })//有时候需要处理服务器的数据，dataCooker就是你定义的一个函数。然后((raw data)=dataCooker(raw data))；}，}]，enabledpulldown refresh : true，//启用下拉重载，默认为false enabledreachbottom : true，//启用上拉加载，默认为false })；//商品数据将加载到视图层，其中商品为名称//this . data . listpage . goods={//data :[.]如上定义。//具体数据可通过该字段获取。//Hasmore 3360 True。//查看图层，使用此字段标识是否有下一页//currentPage: 1，//当前页//totalpage:未定义。//}只需告诉listpage如何获取数据，它就会自动处理“下拉重载”和“上拉翻页”操作，然后将数据更新为this.data.listPage.goods

视图层只需描述数据的显示方式：

对于=' listpage.goods.data '，视图类=' good' wx:/view view class=' no-more ' wx : if=' listpage . goods . has more==false '仅此而已。/viewlistpage还支持多个数据列表和其他更多配置。详情见：@美女

缓存策略缓存

@beautywe/plugin-cache提供了微信小程序端的缓存策略，其底层有超级缓存支持。

特征

针对“服务器接口需要很长时间，但需要很高的加载性能”的场景提供一套解决方案，以满足最基本的缓存需求。获取和设置支持缓存逻辑代理的灵活可配置的数据存储方法。

请求数据的一般形式是，加载页面时，从服务器获取数据，然后在等待数据返回后呈现页面：

但是，在这种模式下，加载性能会受到耗时的服务器接口和网络环境的影响。

我们有很多解决方案(比如服务器端渲染、服务器端缓存、SSR等。)用于一般的Web开发。但是也有一些环境不能使用这种技术(比如微信小程序)。

超级缓存为中间数据缓存提供了解决方案：

思考：

当你需要获取一个数据时，如果有缓存，先给你旧的数据。然后从服务器获取新数据并刷新缓存。如果开始时没有缓存，请求服务器数据并返回数据。下一个请求缓存，从第一步开始。这个解决方案舍弃了一点实时数据(不是第一个请求，只是最后一个最新的数据)，大大提高了前端的加载性能。合适的场景：

对数据的实时性要求不高。服务器接口需要很长时间。使用

从“@beautywe/core”导入{ BTapp }；从“@beautywe/plugin-cache”导入缓存；const app=new BTapp()；app . use(cache({ adapters :[{ key : ' name ')，data(){ return API . fetch(' XXX/name ')；} }]}));假设API.fetch('xxx/name ')是请求服务器接口，返回的数据是data_from_server

所以：

app.cache.get('name ')。然后((value)={//value : ' data _ from _ server ' })；有关更多配置，请参见：@beautywe/plugin-cache

日志记录器

@beautywe/logger-plugin提供的轻量级日志处理方案支持：

可控日志级别自定义前缀日志用于统一处理

从“@beautywe/core”导入{ BTapp }；从“@beautywe/plugin-logger”导入logger；const page=new BTapp()；page . use(logger({//options })；应用程序接口

page.logger.info('这是info ')；page.logger.warn('这是warn ')；page.logger.error('这是错误')；page.logger.debug('这是debug ')；//输出//[信息]这是信息//[警告]这是警告//[错误]这是错误//[调试]这是调试级别控制

您可以通过配置控制应打印哪个级别：

page . use(logger({ level : ' warn '，})；那么上面警告的日志(信息、调试)就不打印了，满足了开发和生成环境对日志的不同要求。

级别如下：

伐木工。LEVEL={ error: 1，warn: 2，info: 3，debug: 4，}；更多配置请见：@beautywe/plugin-logger

美好我们的框架

@beautywe/core和@beautywe/plugin-.为小程序提供：

开放原生，核心支持插件——，插件支持各种插件——。但是在开发中实际会遇到的痛点还是有很多的，以上两个是无法解决的。

比如项目组织、规范、工程、配置、多环境等等

这些都是“美好我们框架”要解决的领域。

作为一个现成的项目框架，它提供了以下功能：

集成BeautyWe我们核心NPM支持全局窗口、全局页面、组件全局配置文件、多环境开发、示例页面、正常项目所需的标准：ES2015、sass、uglify、watch等。以及项目规范(eslint、提交日志、目录结构等。)我们认为好的也是由于空间的原因。挑选几个有趣的，我们可以看看官方文件：BeautyWe。

快速创建

首先安装@beautywe/cli

$ NPM @ beautywe/CLI-g创建应用程序

$ beauty we新app appname : my-app版本： 0.0.1 appid : 123456这样可以吗： {'appname' :' my-app '，'版本' 3360' 0.0.1 '，' appid' : '

我的应用

页

主包页面：beauty we新页面路径|名称分包页面：beautywe新页面-子包名称路径|名称组件

beautywe新组件名称

插件

美丽我们新的插件名称

自定义模板

在。/.模板目录中，存储了快速创建命令的创建模板：

$ tree .templates.templates组件指数. js 指数. json 指数. scss index.wxml页面指数. js 指数. json 指数。scss index.wxml 插件 index.js可以修改里面的模板来满足项目级的自定义模板创建。

全局窗口

我们都知道微信小程序是一个“单窗口”的互动平台，一个页面对应一个窗口。

在业务发展中，经常有这样的说法：

稍微不那么优雅的实现可以被做成单独的组件，然后每个页面都被引入。

这样我们会有很多重复的代码，每次创建新的页面都会重新引入，后期的维护会非常繁琐。

“全局窗口”的概念是：希望所有页面都有一个地方，可以放全局逻辑和交互。

全局视图组件

这是一个自定义组件，源代码在/src/components/global-view中

每个页面的Wxml只需要在顶层包装：

全局视图id='全局视图'./global-view需要全局实现的交互、样式和组件，维护这个组件就足够了。

全球概况

在src/config/目录下，可以存储各种全局配置文件，支持Node.js模式下运行(得益于Node.js Power特性)。

例如src/config/logger.js:

const ENV=process . ENV . RUN _ ENV | | ' dev '；const logger=object . assign({ prefix : ' beauty we '，level :' debug '，}，{//开发环境配置dev3360 {level :' debug '，}，//测试环境配置test: {level:' info '，}，//联机环境配置prod: { level3360 ' warn '，}，}[env]| { })；module . exports . logger=logger；然后我们可以这样阅读配置内容：

从“/config/index”导入{ logger }；//logger.level将根据不同的环境而变化。默认情况下，Beautywe框架将配置集成到getApp()的示例中：

getApp()。配置；多环境发展

BeautyWe框架支持多环境开发，其中预设了三套策略：

开发测试产品我们可以通过命令运行这三种构建策略：

三种美容环境的差异我们运行devbeauty run测试beauty run产品

Beautywe框架源代码默认在两个方面使用多个环境：

构建任务(gulpfile.js/env/.)全局配置(src/config/.)构建任务的差异

施工任务描述开发测试产品清理区文件复制复制资源文件脚本编译js文件sass编译scss文件 npm编译npm文件 nodejs-power编译Node.js文件监视监听文件修改脚本-最小压缩JS文件sass-最小压缩scss文件npm-最小压缩NPM文件图像-最小压缩图片

Beautywe框架的代码有两种操作环境：

运行Node.js的环境，比如构建任务。微信小程序的运行环境，比如dist文件夹中打包的代码。运行过程

Node.js Power的本质是一个静态编译实现。将一个文件在Node.js环境下运行的结果输出到微信小程序的运行环境中，以满足特定的需求。

Node.js Power会将项目src目录中名为xxx.nodepower.js的文件作为Node.js运行，然后将运行结果以“文字对象”的形式写入dist目录中同名的对应文件xxx.nodepower.js。

以src/config/index.nodepower.js为例：

const fs=require(' fs ')；const path=require(' path ')；const files=fs . readdirsync(path . join(_ _ dirname))；const结果={ }；文件。过滤器(名称=名称！=='index.js ')。forEach((name)={ Object.assign(结果，要求(路径. join(__dirname，`。/$ { name } `)))；});module.exports=结果；该文件由Node.js Power构建后，为：

dist/config/index . node power . js :

module . exports={ ' appInfo ' : { ' version ' : ' 0 . 0 . 1 '，' env': 'test '，' appid': 'wx85fc0d03fb0b224d '，' name ' : ' BeautyWe-framework-test-app ' }，' logger ' 3: { ' prefix ' : ' BeautyWe '，' level ' : ' info ' } }够了。如果您随意将配置文件扩展到src/config/目录，它可以自动打包。

Node.js Power已经集成到多环境开发的开发、测试和生产中。

当然，您可以手动运行这个构建任务：

$大口nodejs-powerNPM

BeautyWe框架实现中支持npm的原理非常简单。总结一句话：

用webpack打包src/npm/index.js，并以commonjs格式输出到dist/npm/index.js