微信小程序的开发范式BeautyWe.js入门详解

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

你是否厌倦了繁琐复杂的小程序开发流程？渴望有一个更加简洁、美观的开发范式？那么，BeautyWe.js可能是你的理想选择！这款专注于微信小程序的企业级开发范式，致力于让代码更简单、更美观。接下来，让我们深入BeautyWe.js的特性和优势。

一、BeautyWe.js简介

BeautyWe.js是一套专注于微信小程序的企业级开发范式，旨在让代码更简单、更漂亮。它提供了一个插件化的核心，一些官方插件，一套开箱即用的项目框架以及一个强大的CLI工具。这些特性使得开发者能够更高效地编写代码，提高开发效率和代码质量。

二、核心特性

1.插件化的核心：对App、Page进行抽象和包装，保持传统微信小程序开发姿势，同时开放部分原生能力，让其具有“可插件化”的特性。这意味着开发者可以方便地封装复杂逻辑，实现插件的插拔。

2.官方插件：为了满足常见的开发需求，BeautyWe.js提供了一些官方插件，如增强存储、发布/订阅、状态机、Logger、缓存策略等。这些插件可以帮助开发者解决一些常见的问题，提高开发效率。

3.开箱即用的项目框架：提供了一个项目的组织形式，集成了BeautyWe Core，并提供了如全局窗口、开发规范、多环境开发、全局配置、NPM等解决方案。这使得开发者可以快速地开始项目，减少重复性工作。

4.CLI工具：提供了一个命令行工具，可以快速创建应用、页面、插件，以及进行项目构建。这个工具还支持自定义的创建模板，让开发者能够根据自己的需求进行定制。

三、实例

让我们通过一个简单的例子来了解BeautyWe.js的使用方法。你需要下载并安装BeautyWe.js。然后，使用BeautyWe包装你的应用。之后，你就可以使用BeautyWe Plugin提供的能力了。其中，“插件化”是BeautyWe.js的核心特性之一，它开放了原生App的四种能力：Data域、原生钩子函数、事件钩子函数和自定义方法。这些能力使得插件能够给使用者提供API，方便开发者进行二次开发和扩展。

BeautyWe.js是一款极具潜力的微信小程序开发范式。它的插件化特性、官方插件、开箱即用的项目框架以及强大的CLI工具，让开发者能够更高效地编写代码，提高开发效率和代码质量。如果你正在寻找一个更简洁、更美观的小程序开发范式，那么BeautyWe.js绝对值得你一试！在构建优雅的插件体系时，我们致力于确保API的简洁与统一。当开发者调用插件API（如`this.event.on(...)`）时，这些API方法内部依然能够顺畅地访问原生实例，保证了插件与原生应用无缝集成。

钩子函数的插件化

我们所说的钩子函数，包括原生钩子函数和事件钩子函数。每一个钩子函数背后，都有一个以Series Promise方式执行的执行队列。以`onShow`为例，它的执行流程是：`native.onShow` → `pluginA.onShow` → `pluginB.onShow` → ... 这样的顺序。

这种设计带来了以下优势：

1. 可插件化

2. 支持异步操作

由于采用Promise Series方式运行，如果一个任务返回Promise，下一个任务会等待这个任务完成再开始。如果出现错误，会流转到原生的`onError()`中处理。

3. 解决微信小程序中的`getApp() === undefined`问题

这个问题的根源在于App()初始化时，原生实例还未创建。而Promise在event loop中是一个微任务，会在下一次循环中执行。当Promise执行时，App()已经完成初始化。我们的设计巧妙地解决了这一问题。

官方插件简介

BeautyWe官方提供了一系列实用的插件，如：

增强存储：Storage，为小程序提供更强的数据存储解决方案。

数据列表：List Page，方便创建数据列表页面。

缓存策略：Cache，优化小程序性能。

日志：Logger，方便调试和监控。

事件发布/订阅：Event，实现组件间解耦。

状态机：Status，管理应用状态。

这些插件使用简单，哪里需要就插哪里。

以增强存储 Storage为例，该功能为小程序提供了更强大的数据存储方案，由于微信小程序原生的数据存储生命周期与小程序的运行周期一致，除非用户主动删除或数据超过自动清理时间，否则数据始终可用。我们的插件在此基础上提供了更多的功能优化和便捷操作。

以上是插件体系的部分介绍，更多内容可查阅官方文档。我们致力于提供最好的开发体验，让开发者能够更高效地构建优雅的小程序应用。这款插件在原有的wx.getStorage/setStorage基础上，赋予了两种强大的扩展能力。

一、过期控制

想象一下，你希望某些存储的数据在一段时间后自动失效。这款插件可以轻松实现这一需求。例如，当你设置名为'name'的数据为'jc'，并希望它在7天后过期，你可以这样操作：

```javascript

app.storage.set('name', 'jc', { expire: 7 });

```

二、版本隔离

随着应用的更新，有时我们希望某些数据在新版本中被保留，而在旧版本中被删除或更改。这款插件允许你根据应用的版本存储和获取数据。当应用版本更新后，旧版本的数据将被自动隔离。

关于数据列表分页的业务场景，@beautywe/plugin-listpage提供了一个优雅的解决方案。它支持分页、多个数据列表，并能自动处理下拉重载和上拉加载的操作。你只需要告诉listpage如何获取数据，剩下的工作就交给它来完成。

@beautywe/plugin-cache为微信小程序端提供了一个强大的缓存策略，其底层有强大的技术支持。

以下是简单的安装和使用示例：

安装：

```javascript

import { BtApp } from '@beautywe/core';

import storage from '@beautywe/plugin-storage';

import listpage from '@beautywe/plugin-listpage';

import cache from '@beautywe/plugin-cache';

const app = new BtApp();

app.use(storage()); // 使用存储插件

app.use(listpage()); // 使用列表页插件

app.use(cache()); // 使用缓存插件

```

过期控制示例：

```javascript

// 7天后过期

app.storage.set('name', 'jc', { expire: 7 });

```

数据列表分页示例：

```javascript

page.use(listpage({

lists: [{

name: 'goods', // 数据名

pageSize: 20, // 每页数据数量

fetchPageData({ pageNo, pageSize }) {

// 获取数据

return API.getGoodsList({ pageNo, pageSize });

},

}],

enabledPullDownRefresh: true, // 开启下拉重载

enabledReachBottom: true, // 开启上拉加载

}));

```

在视图层，你只需要描述数据如何展示：

```html

...

没有更多了

```

@beautywe/plugin-cache和其他插件一样，提供了丰富的配置和强大的功能。详情可查看相关文档。这款插件能够极大地简化微信小程序的开发过程，让开发者更加专注于业务逻辑的实现。服务端接口耗时慢但加载性能要求高场景下的解决方案——BeautyWe Framework中的缓存与日志模块

一、背景介绍

在现代Web开发中，前端页面加载性能是一大关键。特别是在服务端接口响应耗时较长的情况下，如何确保用户能够快速获取所需数据并流畅地体验页面成为了一项挑战。为此，我们提出了一种基于BeautyWe Framework的解决方案，该方案主要围绕缓存管理和日志记录展开。

二、缓存解决方案——Super Cache

为了满足服务端接口耗时但加载性能要求高的场景，我们引入了Super Cache作为中间数据缓存的解决方案。Super Cache的主要思路是：当需要获取数据时，首先检查是否存在缓存，如果存在则先返回旧的数据给用户；后台异步从服务端获取新的数据并更新缓存。这样，即便服务端接口响应较慢，用户也能快速获取到数据，避免了长时间的等待。这种策略可能会导致数据的非实时性，但它大大提高了前端的加载性能。适用场景为数据实时性要求不高、服务端接口耗时长的情况。

三、日志解决方案——BeautyWe Logger

为了更方便开发过程中的问题追踪与调试，我们提供了BeautyWe Logger插件。这是一个轻量的日志处理方案，它支持多种功能如可控的log level、自定义前缀以及日志统一处理等。开发者可以通过简单的配置来满足不同场景下的日志需求。通过level控制，可以方便地关闭或打开不同级别的日志打印，以满足开发和生产环境的不同需求。

四、如何使用

在BeautyWe Framework中，使用Super Cache和BeautyWe Logger非常简单。只需按照以下步骤进行配置和使用：

1. 引入相关的依赖模块。

2. 进行必要的配置，如定义缓存策略、设置log level等。

3. 使用API进行数据的获取、缓存的读取和日志的打印。

五、结语

BeautyWe Framework通过Super Cache和BeautyWe Logger两个模块，为开发者提供了强大的缓存管理和日志记录功能。在面临服务端接口耗时但加载性能要求高的挑战时，开发者可以更加便捷地优化前端性能、追踪问题并进行调试。BeautyWe Framework还提供了开放原生、插件化的核心模块以及丰富的插件，满足开发者在实际开发中遇到的多种痛点需求。「BeautyWe Framework」：高效构建与开发的全方位框架

作为一套开箱即用的项目框架，「BeautyWe Framework」致力于解决项目组织、规范、工程化、配置、多环境等一系列核心问题。它不仅提供了丰富的功能，还注重项目的流畅开发与维护。

一、核心特性概览

「BeautyWe Framework」集成了多种核心功能，包括全局窗口、全局Page和Component、全局配置文件以及多环境开发等。它还提供了Example Pages，以满足正常项目所需的标配技术，如ES2015+、sass、uglify、watch等。并且，框架内置了良好的项目规范，如eslint、mit log、目录结构等。

二、快速创建与自定义模板

通过简单的命令行操作，即可快速创建应用、页面、组件和插件。只需安装「@beautywe/cli」，然后运行相关命令，回答几个问题后，项目即可快速生成。框架还支持自定义模板，用户可以在.templates目录中存放自己的模板，以满足项目级别的快速创建需求。

三、全局窗口概念

在微信小程序开发中，「全局窗口」是一个重要的概念。由于微信小程序是「单窗口」的交互平台，一个页面对应一个窗口，因此往往会有诸如自定义的 toast 样式、页面底部 copyright、全局的 loading 样式、全局的悬浮控件等需求。「BeautyWe Framework」通过引入全局窗口的概念，提供了一个全局性的逻辑和交互区域，使得这些需求得以方便实现。其中，global-view组件是一个自定义组件，源码在 /src/components/global-view，每个页面的wxml只需在顶层包一层，即可实现全局性的交互和样式。

四、全局配置文件

「BeautyWe Framework」在src/config/目录中，允许用户存放各种全局的配置文件，并且支持以Node.js的方式运行。这一特性得益于Node.js的强大功能，使得项目配置更加灵活、便捷。

在深入 src/config/logger.js 文件时，我们发现它为我们提供了一个灵活且功能强大的日志记录配置。该文件首先确定了运行环境，默认为开发环境（'dev'）。在此基础上，它构建了一个 logger 对象，该对象带有预设的日志前缀 "BeautyWe" 和日志级别 "debug"。

这个 logger 对象会根据不同的环境进行配置。对于开发环境（dev），日志级别保持为 'debug'，这意味着会记录大量的调试信息。对于测试环境（test），日志级别被设置为 'info'，这样只会记录重要的信息，有助于测试人员了解系统运行状态。而当应用部署到生产环境（prod）时，日志级别被进一步调整为 'warn'，此时只会记录警告和错误信息，以减轻服务器压力并快速定位问题。

这样的配置使得开发者可以根据当前的环境轻松调整日志级别，无需在代码中做大量的修改。环境的判断通过 process.env.RUN_ENV 变量实现，如果没有设置该变量，则默认为开发环境。

在应用程序的其他部分，我们可以通过简单地导入 logger 对象，然后访问其 level 属性，就可以知道当前环境的日志级别。例如，在 /config/index 文件中，我们可以这样读取 logger 配置：

```javascript

import { logger } from '/config/index';

// 根据当前环境，logger.level 的值会有所不同，开发者可以根据这个值来确定应该记录哪些级别的日志。

```

通过这种方式，我们可以轻松地管理和调整不同环境下的日志记录，从而更有效地进行开发和调试。Beautywe Framework 默认集成config至getApp()示例中

通过getApp()方法可以访问到Beautywe Framework的配置信息。

多环境开发

BeautyWe Framework支持多环境开发，预设了dev、test、prod三种策略。

我们可以使用以下命令来运行这三个构建策略：

beautywe run dev

beautywe run test

beautywe run prod

三套环境的差异

Beautywe Framework的源码在多环境方面默认做了两方面的配置。

首先是构建任务方面（如gulpfile.js/env/...），其次是全局配置（如src/config/...）。

构建任务的差异详解

以下是构建任务及其在不同环境下的说明：

clean：清除dist文件夹内的文件。在dev、test、prod环境中都会执行。

copy：复制资源文件，同样在三个环境中都会执行。

scripts：编译JS文件，三方库和自定义的js都在这里编译，同样适用于所有环境。

sass：编译scss文件，将scss转化为css，在所有环境中都会执行。

npm：编译npm文件，执行npm install命令安装依赖，适用于所有环境。

nodejs-power：编译Node.js文件，这是Beautywe Framework特有的任务，用于编译框架源代码，同样适用于所有环境。

watch：监听文件修改，当文件发生变化时自动重新构建项目，只在dev环境中使用。

scripts-min、sass-min、npm-min：分别是压缩JS、scss、npm文件的任务，只在生产环境（prod）中执行，用于优化前端性能。

image-min：压缩图片文件，优化前端加载速度，同样只在生产环境执行。

clean-example：清除示例页面，可能在某些特定情况下使用，比如开发新特性时需要清除旧的示例页面。

Node.js Power

Beautywe Framework的代码可以在两种运行环境中执行：Node.js运行环境和微信小程序运行环境。

运行过程

在Node.js环境下运行文件并输出到微信小程序环境中，满足特定需求的过程介绍。

Node.js Power是一个强大的工具，它能够在src目录下找到像x.nodepower.js这样的文件，并在Node.js环境下运行它们。运行的结果将以“字面量对象”的形式，写入到dist目录下对应的同名文件中。这个过程使得文件处理变得非常便捷。

以src/config/index.nodepower.js文件为例，它经过Node.js Power构建后，输出的结果是一个包含各种配置信息的对象。这个对象包含了版本信息、环境设置、应用ID和日志配置等关键信息。通过这种方式，我们可以轻松地在src/config目录中扩展任何配置文件，并且它们会被自动打包处理。

Node.js Power已经被集成到多环境开发中的dev、test、prod等环境中。你可以通过运行简单的构建任务命令 `$ gulp nodejs-power` 来手动触发这个过程。这个命令将会执行一个自动化流程，从src目录读取文件并在Node.js环境下运行它们，然后将结果输出到微信小程序环境中。这个过程对于开发微信小程序来说非常有用，因为它可以自动管理项目的配置信息和其他关键数据。

除了上述功能外，BeautyWe Framework还通过支持npm包管理的方式来实现更多的功能扩展。它的原理非常简单：使用webpack打包src/npm/index.js文件，并以monjs格式输出到dist/npm/index.js文件中。这样做的好处在于实现简单，使得npm包能够集中管理，避免不必要的依赖泛滥。通过这种方式还可以快速查看项目中使用的npm包占用的容量大小。

当需要添加新的npm依赖时，只需在src/npm/index.js文件中进行导出操作，然后在其他文件中导入即可使用。这种方式为微信小程序的开发带来了便利性和可管理性。BeautyWe框架通过提供一套完整的开发范式，帮助开发者快速构建微信小程序项目。它提供了core和plugins扩展原生功能的方式，以及framework提供的企业级项目解决方案，使开发者能够快速搭建项目并进行高效开发。当然这只是冰山一角，关于BeautyWe框架更多精彩的内容可以在官网找到更多详细信息。以上就是本文的全部内容，希望对大家的学习有所帮助并请支持狼蚁SEO的持续更新和分享。