一款小而美的小程序脚手架，让你更流畅的开发小程序

今天向你们推荐一款本身开发的小程序开发脚手架，已经使用了近一年，相对比较稳定，后续也会持续更新，欢迎使用，欢迎 star.

相较于目前市场上的各类跨端解决方案，这个开发流程更加纯粹，没有引入任何新的开发难度，彻底在原生小程序的基础上进行开发效率的提高 ~

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 接口，因此务必保证小程序开发者工具启动，而且 设置 -> 安全 -> 安全（服务端口）开启