微信小程序的开发范式BeautyWe.js入门详解-创新互联

一个简单的介绍

在达拉特等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、成都网站建设 网站设计制作按需网站设计,公司网站建设,企业网站建设,品牌网站设计,成都全网营销推广,成都外贸网站制作,达拉特网站建设费用合理。

BeautyWe.js 是什么?

它是一套专注于微信小程序的企业级开发范式,它的愿景是:

让企业级的微信小程序项目中的代码,更加简单、漂亮。


为什么要这样命名呢?

Write beautiful code for wechat mini program by the beautiful we!


「We」 既是我们的 We,也是微信的 We,Both beautiful!

那么它有什么卖点呢?

  • 专注于微信小程序环境,写原汁原味的微信小程序代码。
  • 由于只专注于微信小程序,它的源码也很简单。
  • 插件化的编程方式,让复杂逻辑更容易封装。
  • 再加上一些配套设施:
    • 一些官方插件。
    • 一套开箱即用,包含了工程化、项目规范以及微信小程序环境独特问题解决方案的框架。
    • 一个CLI工具,帮你快速创建应用,页面,组件等。

它由以下几部分组成:

一个插件化的核心 - BeautyWe Core


对 App、Page 进行抽象和包装,保持传统微信小程序开发姿势,同时开放部分原生能力,让其具有「可插件化」的能力。


一些官方插件 — BeautyWe Plugins


得益于 Core 的「可插件化」特性,封装复杂逻辑,实现可插拔。官方对于常见的需求提供了一些插件:如增强存储、发布/订阅、状态机、Logger、缓存策略等。


一套开箱即用的项目框架 - BeautyWe Framework


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


一个CLI工具 - BeautyWe Cli


提供快速创建应用、页面、插件,以及项目构建功能的命令行工具。并且还支持自定义的创建模板。

一个简单的例子

下载

用 BeautyWe 包装你的应用

开放原生App/Page,支持插件化


new BtApp({...}) 的执行结果是对原生的应用进行包装,其中包含了「插件化」的处理,然后返回一个新的实例,这个实例适配原生的 App() 方法。

下面来讲讲「插件化」到底做了什么事情。

首先,插件化开放了原生 App 的四种能力:

1.Data 域

把插件的 Data 域合并到原生 App 的 Data 域中,这一块很容易理解。


2.原生钩子函数


使原生钩子函数(如 onShow, onLoad)可插件化。让原生App与多个插件可以同时监听同一个钩子函数。如何工作的,下面会细说。


3.事件钩子函数


使事件钩子函数(与 view 层交互的钩子函数),尽管在实现上有一些差异,但是实现原理跟「原生钩子函数」一样的。


4.自定义方法


让插件能够给使用者提供 API。为了保证插件提供的 API 足够的优雅,支持当调用插件 API 的时候(如 event 插件 this.event.on(...) ),API 方法内部仍然能通过 this 获取到原生实例。


钩子函数的插件化


原生钩子函数,事件钩子函数我们统一称为「钩子函数」。

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

onShow 为例,将会以这样的形式执行:

native.onShow → pluginA.onShow → pluginB.onShow → ...


下面深入一下插件化的原理:

  • 经过 new BtApp(...) 包装,所有的钩子函数,都会有一个独立的执行队列,
  • 首先会把原生的各个钩子函数 push 到对应的队列中。然后每 use 插件的时候,都会分解插件的钩子函数,往对应的队列 push
  • Native App(原生)触发某个钩子的时候,BtApp 会以 Promise Series 的形式按循序执行对应队列里面的函数。
  • 特殊的,onLaunchonLoad 的执行队列中,会在队列顶部插入一个初始化的任务(initialize),它会以同步的方式按循序执行 Initialize Queue 里面的函数。这正是插件生命周期函数中的 plugin.initialize

这种设计能提供以下功能:

1.可插件化


只需要往对应钩子函数的事件队列中插入任务。


2.支持异步


由于是以 Promise Series 方式运行的,其中一个任务返回一个 Promise,下一个任务会等待这个任务完成再开始。如果发生错误,会流转到原生的 onError() 中。


3.解决了微信小程序 app.js 中 getApp() === undefinded 问题

造成这个问题,本质是因为 App() 的时候,原生实例未创建。但是由于 Promise 在 event loop 中是一个微任务,被注册在下一次循环。所以 Promise 执行的时候 App() 早已经完成了。

一些官方插件


BeautyWe 官方提供了一系列的插件:

  • 增强存储: Storage
  • 数据列表:List Page
  • 缓存策略:Cache
  • 日志:Logger
  • 事件发布/订阅:Event
  • 状态机:Status

它们的使用很简单,哪里需要插哪里。


由于篇幅的原因,下面挑几个比较有趣的来讲讲,更多的可以看看官方文档:BeautyWe

增强存储 Storage


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

由于微信小程序原生的数据存储生命周期跟小程序本身一致,即除用户主动删除或超过一定时间被自动清理,否则数据都一直可用。

所以该插件在 wx.getStorage/setStorage 的基础上,提供了两种扩展能力:

  • 过期控制
  • 版本隔离

一些简单的例子

安装

import { BtApp } from '@beautywe/core';
import storage from '@beautywe/plugin-storage';

const app = new BtApp();
app.use(storage());

当前题目:微信小程序的开发范式BeautyWe.js入门详解-创新互联
浏览路径:http://bzwzjz.com/article/dhcojh.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 重庆企业网站建设 成都网站建设 网站制作公司 成都商城网站建设 成都网站设计 成都网站制作 营销型网站建设 定制网站设计 高端网站设计 成都定制网站建设 成都网站制作 成都营销网站制作 成都网站建设 成都网站设计 成都网站制作 成都网站制作 盐亭网站设计 成都h5网站建设 重庆外贸网站建设 手机网站制作设计 成都网站建设 网站制作