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

标签:一款,美的,程序,脚手,脚手架,让你,流畅,流畅的 发布时间:2019年05月24日 点击2

今天向大家保举一款本身开发的小程序开发脚手架,已经使用了近一年,相对比较稳固,后续也会持续更新,迎接使用,迎接 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.dev3564'
    test:
      env: 'test'
      host: 'https://api.test3564'
    preproduction:
      env: 'preproduction'
      host: 'https://api.pre3564'
    production:
      env: 'production'
      host: 'https://api8693d3564'
复制代码

在项目启动后, 即 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.dev3564'
}
复制代码

使用 pa build --env test , 得到的配置对象如下:

{   
 
    appId: 'wxxxxxxxxx',
 
    appName: 'test-pandora',
    version: '1.0.0',
    env: 'test',
    host: 'https://api.test3564'
}
复制代码

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 接口,所以务必保证小程序开发者工具启动,并且 设置 -> 安全 -> 安全(服务端口)开启

手机网站建设