温州四都乡一款小而美小程序脚手架，让你更流畅快速的开发小程序

今天向大家推荐一款自己开发的小程序开发脚手架，已经使用了近一年，相对比较稳定，后续也会持续更新，欢迎使用，欢迎 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 我们就可以把需要的组件及其依赖安装到项目中样板文件创建及其方便的 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 --npm 或者 npm i 以上两种方式都可以讲对应 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 类即可其中 icon-font 是必须的，第二个类型的组成 icon-font_
'
其中 version-type 为 major, minor, patch 可以参考 npm version 语义化版本comments 为此次发布的描述，必填。
这里需要注意的是，pa release 使用的是小程序开发者工具的 HTTP 接口，所以务必保证小程序开发者工具启动，并且 设置 -> 安全 -> 安全（服务端口）开启推荐教程：
《微信小程序》以上就是一款小而美小程序脚手架，让你更流畅快速的开发小程序的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
微信小程序本文转载于：
掘金社区，如有侵犯，请联系a@php.cn删除
上一篇：
小程序与H5比较的区别
下一篇：
小程序之picker 数据是 Object Array相关文章相关视频怎么退出微信小程序的登录？用微信小程序实现WebSocket心跳重连Promise实践 实现微信小程序接口封装看不到关联的小程序怎么办？一款小而美小程序脚手架，让你更流畅快速的开发小程序（欧阳克）微信小程序与CMS后台认识小程序开发工具认识小程序的目录结构 [温州做小程序]