Awesome Open Source
Awesome Open Source

wxapp-boilerplate 🗜🖖

微信小程序开发脚手架 (ES6, Redux, Immutable-js, Async/await, Promise, Reselect, Babel, ESLint, Stylelint, Gulp ... )

支持Yarn,所以npm的命令可以使用yarn的相关命令替换

安装

首先需要有 Node.js 环境.

$ git clone https://github.com/ihahoo/wxapp-boilerplate.git
$ npm install

启动开发环境

$ npm run dev

注:会自动监视 src/ 文件夹,有代码变动会自动生成到 dist/ 文件夹。请将微信的开发者工具的项目目录设置为 dist/ 文件夹,就会自动刷新调试界面。

如果在开发中,发现没有及时更新,可尝试停止并重新运行此命令,或者尝试在微信开发者工具中刷新一下。

构建发布用的文件

$ npm run build

会使用 uglify 对js代码压缩,也会调用不同的压缩工具对wxss, wxml, json 和图片进行压缩。

微信开发者工具新建项目

请将 项目目录 设置到你项目所在目录的 dist/ 目录下。因为最终构建的目标代码会发布到这里,如果还没有 dist/ 这个文件夹,你可以手动创建或者运行 npm run dev 后自动创建。

说明

开发方式

使用你喜欢的编辑器编写代码 <=> 微信官方的开发者工具预览调试和发布

注意

请在微信官方的开发者工具的 项目 下将 开启ES6转ES5 设置为关闭,这里使用 GulpBabel 进行转换。在开发目录 src/ 可使用 .xml 替代 .wxml.css 替代 .wxss,会通过构建工具自动转换到目标文件夹 dist/ 中。(主要为了编辑器对扩展名的识别,方便开发使用)

目录结构

  • src/ 开发目录
  • src/lib 引用的模块库目录,由于微信小程序不支持 node_modules 使用npm安装的库无法直接使用,这里放置了转换后的库。以下是整合的一些库,当然你可以根据自己喜欢重新整合。
  • src/lib/redux-act-reducer/ redux-act-reducer 是本人开发的创建redux action和reducer的工具。
  • src/lib/regenerator-runtime/ 使用async/await用到的库
  • src/lib/wx-app-redux/ 本人开发的类似于 react-redux 的Redux数据绑定工具。将Page() 下的 data 与redux绑定。
  • src/lib/immutable.js 从官方immutable-js生成的文件。
  • src/lib/redux-immutable.js 为了支持immutable,替换了redux下的 combineReducers
  • src/lib/redux-thunk.js 支持redux的异步通信
  • src/lib/redux.js 从官方redux生成的可直接调用的库。
  • reselect.js Reselect 是为了提高性能而用到的redux state选择工具。
  • src/pages/ 微信小程序的页面
  • src/utils/request.jswx.request 的一个封装,返回 Promise ,所以方便使用 async/await 方式调用,为了让一套request代码,可以方便的用到各个端(比如web,服务器渲染,或者app),所以抽象了一个封装,这样可以方便代码的重用,当然你可以根据自己需要选择不使用或者自行封装。具体使用参数请看这里:https://awesomeopensource.com/project/hahoocn/hahoorequest#usage
  • dist/src/ 下的文件通过 Gulp 构建工具转化生成的可让微信小程序运行环境解读的目标文件。

支持的语法

支持 ES6 相关语法,支持 Promise,支持 async/await,支持 importexport

async/await 使用注意

请在使用了 async/await 的页面顶部加入以下代码:

import regeneratorRuntime from '../../lib/regenerator-runtime/runtime-module';

关于代码规范的统一

使用 eslintstylelinteditorconfig 可以对编码进行规范,特别是多人合作情况下,使用统一规范很重要。所以请将代码编辑器增加对eslintstylelinteditorconfig 的插件和支持,在编码的同时,即可提示错误和警示。可以通过 .eslintrc 配置js规范的规则,通过.stylelintrc 配置样式表的规范规则,通过 .editorconfig 配置编辑器编码的一些规则。

关于Redux、Immutable-js等相关工具

Redux 做为管理数据流的工具,可以用到各种前端框架中。比如ReactVueReact Native等,当然微信小程序也可使用。Redux和Immutable-js在初步使用的时候,会觉得有点麻烦或难理解,不过对于数据流的管理或构建复杂的项目会更好,性能也不错。其实这里与微信小程序框架结合的Redux相关技术栈和我使用React下的Redux相关技术栈是一样的,所以可以方便代码的重用。在构建h5应用,小程序,pc软件,app等都可以用上Redux、Immutable-js等相关技术栈。

Alternatives To Wxapp Boilerplate
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Es6 (1,059,387
Javascript (1,059,387
Js (1,059,387
Redux (27,898
Promise (10,877
Eslint (8,289
Weapp (4,250
Immutable (2,812
Async Await (2,806
Await (2,806
Stylelint (1,324
Wechat App (164