wxapp-project

wxapp-project是一个小程序前端工程构建流的工具。

增加了小程序的demo文件和程序的架构设计，在template/下，供大家一起学习交流。

目前已经支持:

✔︎ less转化为wxss

✔︎ 支持px转化rpx（不编译px请用大写PX表示）

✔︎ 支持打包压缩，文件内联base64转换

✔︎ 可以配置忽略文件、某些设置的开关等

✔︎ 增加增量编译，已编译过的文件不会再次编译

✔︎ 自动压缩项目内png、jpg、jpeg、svg、gif文件

✔︎ 腾讯云快速上传储存桶支持(cos对象存储)

✔︎ 快速创建小程序模版文件

更新预告:

➟ 阿里云快速上传储存桶支持(oss对象存储)

...

安装&使用

npm i -g wxapp-project

• 尝试在小程序根目录跑通wxp run

• 查看更多帮助信息请使用wxp -h

使用说明

• wxp init

  将会在当前目录下创建.wxp.json配置文件（*注：必须要在每个小程序下面的根目录创建此文件）

  {
  	'less2wxss': true,
  	'minifyImage': true,
  	'px2rpx': true,
  	'rpxUnit': 1,
  	'inlineUrl': true,
  	'minifyWxss': false,
  	'ignore': [{
  		'type': 'folder',
  		'value': 'node_modules',
  	}],
  	'os': ''
  }

  • less2wxss 是否开启less转化成wxss的功能 默认为true
  • minifyImages 是否开启压缩图片的功能 默认为true
  • px2rpx 是否开启px转化成rpx 默认为false
  • rpxUnit px转化成rpx的倍数 默认为1
  • inlineUrl 是否将less中内联的文件转化成base64 默认为false
  • minifyWxss 是否开启转化打包后的wxss进行压缩 默认为false
  • ignore 忽略监听文件
    • type 类型，如folder file glob等
    • value 路径或取值，如node_modules
  • template 模版文件（用于快速创建小程序模版，详细用法如下）
    • type 类型，值为page|component|project|js|wxml|less|json
    • path 路径，如 page/example
  • os 对象存储的类型，可填写的值有tx 默认为空
  • osfiles 你选定需要对象存储的文件

    • type 类型，如folder file glob等

    • value 路径或取值，如node_modules

  *如果os类型填的是tx，那么需要配置的必填项为

  • secretId secretKey bucket region 详见腾讯云对象存储

  其中ignore与osfiles的详细的使用方式和微信小程序project.config.json中的ignore忽略方法如出一辙，点击此处查看。（注意，less的忽略只是不打包成wxss。如a.less import b.less，b.less文件被忽略，那么b.less的保存还是会监听到并且会追溯到a的更新打包，只是b.less不打包成wxss），图片的监听忽略是不压缩

• wxp run

  wxapp-project的核心，以小程序目录为根目录，运行wxp run命令，将会以项目运行目录为根目录进行监听编译。

有时候你需要能够快速创建某些自定义项目的文件(比如自定义快速创建wxml less js)

比如你需要快速创建一个page文件，里面有自定义的通用方法和模版等，示例文件路径如下

├── page
  ├── page.wxml                                     
  ├── page.less                                       
  ├── page.js                                  
  ├── page.json
├── app.json
├──...     

然后在.wxp.json中配置如下

"template": {
  "test": {                                    
    "type": "page",                                      
    "path": "page"    //基于项目目录的相对路径                              
  }
},

那么你就可以通过命令行快速创建对应template name的文件

命令行示例 wxp create test -n filename // 其中filename 为你创建的文件名， test为上面配置的key值

详细介绍请看如下

• wxp new <type>

  快速创建wxp项目中的小程序工程，type值有demo|page|component|project|js|wxml|less|json

  • -n --name 参数必填 文件/文件夹名

  示例 wxp new page -n filename

  点击此处可以查看demo的小程序模版代码片段

• wxp create <key>

  快速创建自己配置项目中的小程序工程，key值为你template配置中的key，workflow会找出相对应的的路径进行创建

  • -n --name 参数必填 文件/文件夹名

  示例 wxp create test -n filename

bug&tip

• 欢迎在issue中提出
• 如果想要交流可以邮[email protected]