公告列表
公告列表
收藏
评论

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

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 构建能力，原因如下：

  1. pandora-boilerpalte-wechat 脚手架开发时，官方并不支持 npm

  2. 官方 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 接口，所以务必保证小程序开发者工具启动，并且  设置 -> 安全 -> 安全（服务端口）开启

pandora-boilerplate-wechat

npm version

一款小而美的微信小程序脚手架。

我们专注于微信小程序开发，所以我们不会引入新的复杂度来限制小程序的能力。

Feature

  • [x] Less
  • [x] ES6 兼容性参考这里
  • [x] async / await
  • [x] dev / test / pre / prod 环境配置、打包
  • [x] npm
  • [x] module alias
  • [x] icon font
  • [x] components
  • [x] CICD

WePY, Taro, mpvue

以上三套框架的目标都很高远，总结起来就是一句话：“Write once, build anywhere。”

目标高远的很让人敬佩，正所谓理想很丰满现实很骨感，各个平台的最初设计人，由于没有超强的预判能力，所以他们在设计这套平台的时候没有坐在一起讨论过，所以不同的平台间总是存在无法相互 hack 的坑点，导致跨平台的 DSL 编出来的目标代码总是无法 100% 发挥各平台原生的能力。

所以当使用以上三套框架，或者说 DSL 来开发小程序的时候，总是或多或少的阉割掉一部分小程序原生的能力，或者引入各种各样与预期不符的 bug, 说句大实话，原生微信小程序本身相较 HTML 就有各种限制与 bug 了，然后在此基础上，又引入了新的复杂度，那对于只有小程序开发需求的团队来说，用这些 DSL 到底能不能提升开发效率呢？ 会不会出现使用了框架后，结果变成了：用原来 20% 的时间完成了现在 80% 的需求，然后用原来 80% 的时间来 hack 剩下 20% 的需求 ？

如果对这些框架没有足够的认识，还真有可能出现上述有意思的场景，开发的时间总长没变，开发同学却被搞的没有任何幸福感而言。

当然上述的场景只是我个人 YY 的，Taro, mpvue 没用过，WePY 在上手的时候还是比较痛苦的，但是后来也就好了，也不用原生自定义组件，所以问题不是很大，用大话西游中的一句话来形容就是：“吐哇吐哇的就习惯了！”

我们专注于小程序开发，所以，我们写了如上的小程序项目模板，借助构建工具补齐了微信小程序项目工程化的短板，使用原生小程序语法开发，所以，我们可以 100% 的使用小程序的特性而没有任何后遗症，所以对于需求单一的团队来说，请谨慎选型！！

使用

使用 pandora-cli

  • 项目初始初始化
  npm i -g pandora-cli

  pa init projectname

  // 或者对于已有项目目录
  pa init .
  • 进入项目目录，安装依赖
  npm i
  • 构建
  // 开发环境
  pa start

  // 测试环境
  pa start --env test

  // 预发环境
  pa start --env pre

  // 生产环境
  pa start --env prod
  • 安装组件，目前我们提供了一套小程序自定义的组件库 pandora-ui-wechat, 通过以下命令来安装组件库中的组件。自动分析依赖，安装所需组件。
  pa i drawer
  • 创建样板代码
  // 创建页面样板代码
  pa c page home

  // 创建组件样板代码
  pa c component login

  // 创建 js 文件
  pa c index.js
  • 从控制台打开小程序开发者工具
  pa open
  • 从控制台发布小程序
  pa release patch -m 'some comments.'

注意：使用 release 发布的时候不需要手动输入版本号，采用和 npm 相同机制的语义化版本管理。

更多命令使用可以参照 pandora-cli

使用该命令的时候，请先确认小程序开发者工具 设置 -> 安全 -> 安全（服务端口）开启，否则小程序的所有 HTTP / 命令行调用都无法使用。

单独使用

  • 初始化
  // 克隆代码库
  git clone https://github.com/pandolajs/pandora-boilerplate-wechat.git

  // 克隆组件库
  git clone https://github.com/pandolajs/pandora-ui-wechat.git

  // 移除 .git
  rm -rf .git

  // 如需使用组件库组件，请自行手动拷贝，自行分析依赖
  • 构建
  // 构建
  npm start           // dev
  npm run build:test  // test
  npm run build:pre   // pre
  npm run build:prod  // prod

目录介绍

.
├── config
│   └── app.yaml                  // 环境配置
├── dist                          // 构建后的目录
├── icons                         // 图标 svg, 自动构建为 icon 图标
│   └── 0-wechat.svg
├── mock                          // 接口 mock
│   └── home.json
├── package.json
├── project.config.json
├── build.config.js               // 构建配置，模板别名
├── scripts                       // 构建脚本
│   ├── gulp-plugin-alias.js
│   ├── gulp-plugin-font.js
│   ├── gulp-plugin-npm.js
│   ├── gulp-plugin-wxss.js
│   ├── gulp-plugin-yaml.js
│   └── gulpfile.js
└── src                           // 源码目录
    ├── app.js
    ├── app.json
    ├── app.wxss
    ├── components
    ├── images
    ├── pages
    ├── services
    └── utils

TODO

  • [ ] 构建脚本独立发布为 gulp plugin

LICENSE

MIT License

Copyright (c) 2018 pandolajs

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

https://github.com/pandolajs/pandora-boilerplate-wechat
最后一次编辑于  2019-02-27
收藏

1 个评论

  • 神经蛙
    神经蛙
    2019-03-01

    挺棒的东西 值得试试

    2019-03-01
    赞同 1
    回复 1
    • 侯全
      侯全
      2019-03-05

      欢迎使用，目前已经使用近一年，相对稳定，并且在持续更新中 ~

      2019-03-05
      赞
      回复
请 登录 后发表内容