$ tree .templates .templates ├── component │ ├── index.js │ ├── index.json │ ├── index.scss │ └── index.wxml ├── page │ ├── index.js │ ├── index.json │ ├── index.scss │ └── index.wxml └── plugin └── index.js
可以修改里面的模板，来满足项目级别的自定义模板创建。
全局窗口
我们都知道微信小程序是「单窗口」的交互平台，一个页面对应一个窗口。
而在业务开发中，往往会有诸如这种述求：
自定义的 toast 样式
页面底部 copyright
全局的 loading 样式
全局的悬浮控件
......
稍微不优雅的实现可以是分别做成独立的组件，然后每一个页面都引入进来。
这种做法，我们会有很多的重复代码，并且每次新建页面，都要引入一遍，后期维护也会很繁琐。
而「全局窗口」的概念是：希望所有页面之上有一块地方，全局性的逻辑和交互，可以往里面搁。
global-view 组件
这是一个自定义组件，源码在 /src/components/global-view
每个页面的 wxml 只需要在顶层包一层：
<global-view> ... </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: 'BeautyWe', level: 'debug', }, { // 开发环境的配置 dev: { level: 'debug', }, // 测试环境的配置 test: { level: 'info', }, // 线上环境的配置 prod: { level: 'warn', }, }[env] || {}); module.exports.logger = logger;
然后我们可以这样读取到 config 内容：
import { logger } from '/config/index'; // logger.level 会根据环境不同而不同。
Beautywe Framework 默认会把 config 集成到 getApp() 的示例中：
getApp().config;
多环境开发
BeautyWe Framework 支持多环境开发，其中预设了三套策略：
dev
test
prod
我们可以通过命令来运行这三个构建策略：
beautywe run dev beautywe run test beautywe run prod
三套环境的差异
Beautywe Framework 源码默认在两方面使用了多环境：
构建任务（gulpfile.js/env/...）
全局配置（src/config/...）
构建任务的差异
构建任务
说明
dev
test
prod
clean
清除dist文件
√
√
√
copy
复制资源文件
√
√
√
scripts
编译JS文件
√
√
√
sass
编译scss文件
√
√
√
npm
编译npm文件
√
√
√
nodejs-power
编译Node.js文件
√
√
√
watch
监听文件修改
√
scripts-min
压缩JS文件
√
sass-min
压缩scss文件
√
npm-min
压缩npm文件
√
image-min
压缩图片文件
√
clean-example
清除示例页面
√
Node.js Power
Beautywe Framework 的代码有两种运行环境：
Node.js 运行环境，如构建任务等。
微信小程序运行环境，如打包到 dist 文件夹的代码。
运行过程