一款小而美的小程序脚手架,让你更流畅的开发小程序
pandora-boierpalte-wechat 是一款小而美的微信小程序开发脚手架,我们没有引入任何新的复杂度,百分百使用小程序的能力,但是我们有补齐了小程序开发者工具相较于正常 web 开发所存在的短板,让你更加轻松的搞定微信小程序的开发。 我们支持如下增强能力: - Less 预编译编写样式,自动转成 wxss - 自动引入 async/await 依赖 - dev / test / pre / prod 多环境配置 - npm 依赖,像正常 web 项目那样使用 npm 包,剩下的就交给脚手架 - 模块别名,再也不用使用相对路径来引入 js 模块了 - icon font 字体文件,小的图标直接使用字体文件,我们可以去 IconFont 站点下载喜欢的 svg 文件 - 我们默认集成了有赞提供的 vant-weapp 来小程序组件库,只需 `pa i <component-name>` 我们就可以把需要的组件及其依赖安装到项目中 - 样板文件创建 - 及其方便的 CICD 能力,`pa release` 一键部署到小程序控制后台,更加语义化的版本号管理 我们推荐配合使用 pandora-cli 来进行微信小程序的开发。 Less 使用 其实这个无需多说,直接床架 less 文件替换 wxss 文件即可。 自动引入 async/await 依赖 脚手架的构建脚本会自动分析代码中是否使用了 async 和 await 关键字,如果使用了,就会自动把其所依赖的三方库引入到最终的构建代码中,所以大家可以放心的使用 async/await 语法。 多环境配置 在小程序项目初始化完成后,可以在 `config/app.yaml` 中进行多环境配置。姿势如下: app.yaml 配置内容如下: [代码]appId: 'wxxxxxxxxx'[代码][代码]appName: 'test-pandora'[代码][代码]version: '1.0.0'[代码][代码]development:[代码][代码] [代码][代码]env: 'development'[代码][代码] [代码][代码]host: 'https://api.dev.com'[代码][代码]test:[代码][代码] [代码][代码]env: 'test'[代码][代码] [代码][代码]host: 'https://api.test.com'[代码][代码]preproduction:[代码][代码] [代码][代码]env: 'preproduction'[代码][代码] [代码][代码]host: 'https://api.pre.com'[代码][代码]production:[代码][代码] [代码][代码]env: 'production'[代码][代码] [代码][代码]host: 'https://api.prod.com'[代码] 在项目启动后, 即 pa start 后,每次更新修改 app.yaml 文件都会触发自动编译 在需要使用的使用的 js 文件中,使用如下方式引入 [代码]import config from [代码][代码]'config'[代码] config 对象就是我们通过不同环境构建出来的配置文件 比如 pa start 启动后,我们得到的配置对象如下: [代码]{[代码][代码] [代码][代码]appId: [代码][代码]'wxxxxxxxxx'[代码][代码],[代码][代码] [代码][代码]appName: [代码][代码]'test-pandora'[代码][代码],[代码][代码] [代码][代码]version: [代码][代码]'1.0.0'[代码][代码],[代码][代码] [代码][代码]env: [代码][代码]'development'[代码][代码],[代码][代码] [代码][代码]host: [代码][代码]'https://api.dev.com'[代码][代码]}[代码] 使用 pa build --env test , 得到的配置对象如下: [代码]{ [代码] [代码] [代码][代码]appId: [代码][代码]'wxxxxxxxxx'[代码][代码],[代码] [代码] [代码][代码]appName: [代码][代码]'test-pandora'[代码][代码],[代码][代码] [代码][代码]version: [代码][代码]'1.0.0'[代码][代码],[代码][代码] [代码][代码]env: [代码][代码]'test'[代码][代码],[代码][代码] [代码][代码]host: [代码][代码]'https://api.test.com'[代码][代码]}[代码] npm 依赖 该脚手架没有使用小程序官方提供的 npm 构建能力,原因如下: pandora-boilerpalte-wechat 脚手架开发时,官方并不支持 npm 官方 npm 能力需要 node_modules 目录位于小程序 root 目录中,与目前脚手架的目录约定有冲突,且与正常 web 项目结构也不同 基于以上原因,我们打算继续使用我们自己提供的 npm 机制,公司项目运行将近一年,暂未遇到问题。 你可以使用如下方式安装 npm 包,在项目根目录下: pa i <pkg> --npm 或者 npm i <pkg> 以上两种方式都可以讲对应 pkg 的最新版本安装到项目 node_modules 中 组件库 我们集成了有赞开源的 vant-weapp 小程序组件库,使用时,只需要通过 pa 命令安装自己需要的组件即可,我们会自动将所需的所有依赖进行安装,接下来就按照小程序自定义组件的使用姿势进行使用即可,最大程度的提升小程序的开发效率。 比如我们要安装 dialog 组件 [代码]pa i dialog[代码]该命令会自动从 vant-weapp 库中只将 dialog 组件及其依赖安装到项目 src/compnents 中。 模块别名 配置在项目更目录 build.config.js 文件中。我们可以为项目中的目录配置别名,源码中使用别名引用即可。 icon font 支持 去阿里 IconFont 官网下载喜欢的图标 SVG 文件到项目根目录 `icons` 中,构建会自动生成字体文件,并内联到项目中,按照如下姿势使用即可。 icons 目录下有如下文件 wechat.svg 在 wxml 文件中通过为对应标签添加如下 class 类即可 [代码]<[代码][代码]text[代码] [代码]class[代码][代码]=[代码][代码]"icon-font icon-font_wechat"[代码][代码]></[代码][代码]text[代码][代码]>[代码] 其中 icon-font 是必须的,第二个类型的组成 icon-font_<svg 文件名> 当然我们可以为该元素再添加其他样式 样板文件创建 创建组件 pa c component demo 或者 pa create component demo 创建好的文件会自动位于项目 src/components 中 创建页面 pa c page demo 或者 pa create page demo 创建好的文件为自动位于项目 src/pages 中 CICD支持 在项目根目录下执行以下命令可以自动发布项目到小程序后台 pa release <version-type> -m '<comments>' 其中 `version-type` 为 major, minor, patch 可以参考 npm version 语义化版本 `comments` 为此次发布的描述,必填。 这里需要注意的是,pa release 使用的是小程序开发者工具的 HTTP 接口,所以务必保证小程序开发者工具启动,并且 设置 -> 安全 -> 安全(服务端口)开启