wxapp boilerplate

wxapp-boilerplate

WeChat/Alipay mini program project scaffolding developed using webpack , babel , scss

Function

• Supports referencing node_modules modules
• Support configuring alias to avoid module references such as ../../../
• Support richer ES6 compatibility through babel , including async/await
• Built-in promise and lodash ( lodash introduces corresponding modules on demand, not all)
• Use scss to write .wxss files, with some useful mixins and extends built-in
• Provide __DEV__ and process.env.NODE_ENV global constants to assist development
• Supports automatic compilation into WeChat and Alipay applets
• Provide __WECHAT__ and __ALIPAY__ global constants to determine whether it is a WeChat applet or Alipay applet
• Quickly create WeChat applet pages through the command line
• Support compressing code in production environment

Get started

Make sure you have Node.js (>= v4.2 ) and yarn or npm installed

1. git clone this project
2. Use the command line tool cd to this directory and execute yarn to install dependent modules.
3. Execute yarn start to start development
4. Through WeChat developer tools, add dist/wechat directory to the project

Built-in commands

• yarn start starts webpack to develop WeChat applet projects, which can monitor file changes and automatically recompile
• yarn start:alipay starts webpack to develop Alipay applet project, which can monitor file changes and automatically recompile
• yarn build compiles and generates the code for production environment to dist/wechat and dist/alipay
• yarn lint:build executes the yarn build command and uses eslint and stylelint to verify code specifications
• yarn prettier executes prettier to format the code in the src directory
• yarn create-page quickly creates a WeChat applet page (for more usage of create-page , please see create-wxapp-page)

Compatible with WeChat and Alipay mini programs

Developers can choose a set of source codes to develop WeChat and Alipay applets. This scaffolding supports automatic compilation wxml to axml , conversion of wx:attr to a:attr , conversion of API wx to my , and vice versa. However, individual interfaces are slightly different on the platform, and developers can dynamically handle them through __WECHAT__ or __ALIPAY__ .

File copy

If wxml or axml has dynamically imported files (such as src="{{'images/' + type + '.png'}}" ), webpack will not be able to dynamically import them, so there may be missing files after packaging.

If you encounter this situation, you can solve it through copy-webpack-plugin and copy the entire images directory to dist .

This plugin already has this plug-in built into this scaffolding. For ease of use, you can also add a copyWebpack string array to package.json to automatically copy directories or files. For example:

package.json

 {
  // ...
  "copyWebpack" : [ "images" , "icons" ]
}

By executing yarn start or yarn build , the src/images and src/icons directories will be automatically copied to dist/wechat/images and dist/wechat/icons directories (the same applies to the Alipay applet).

Change log

Changelog

Related projects

• create-wxapp-page
• react-lib-boilerplate
• front-end-lib-boilerplate
• node-cli-boilerplate

License

MIT