微信小程序,集成redux,并且提供了方便快捷的开发环境;内置好奇心日报Demo...
Redux
,数据管理更方便xml
取代wxml
,对开发工具更友好less
取代wxss
,功能更强大es-promise
,以便可以创建并使用Promise
promisify
工具函数,可以便捷的将官方Api
转换成Pormise
模式normalizr
,可以将数据扁平化,更方便进行数据管理babel
自动进行ES2015
特性转换为了让大家更快上手,内置了三个Demo页面,分别是首页,研究所列表页,文章详情页。
新建项目的时候,选择无appId即可体验。Demo不是最新版代码,不定期更新。
更多内容可以查看博客 微信小程序全面实战,架构设计 && 躲坑攻略
Redux
数据结构为了不让代码过于分散,该模板将Redux
相关的代码全部放到了redux
目录中,并且将关联的action
和reducer
逻辑放到同一个文件中。
更多内容可以查看src/redux
目录
// App 模板
import { Provider } from './vendors/weapp-redux.js';
import { store } from './redux/store.js';
let appConfig = {};
App(Provider(store())(appConfig))
// Page 模板
const {
connect
} = require('../../vendors/weapp-redux.js')
let pageConfig = {}
let mapStateToData = (state, params, data) => ({})
let mapDispatchToPage = dispatch => ({})
pageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)
Page(pageConfig);
components
下的组件,强烈建议写成非状态组件更多内容可以查看src/components
目录
npm run dev
: 开发模式使用,构建项目并监听改动
使用微信小程序开发工具添加dist
目录的时候,最好先构建,再添加,不然微信小程序开发工具可能会监听不到dist
目录下的文件。
npm run build
: 生产模式使用,构建项目
更多内容可以查看博客 微信小程序全面实战,架构设计 && 躲坑攻略
第二部分:构建系统 && 组件化
第三部分:微信小程序的坑 以及 躲坑技巧【不断更新中】
该模板参考并借鉴了以下两个开源项目,特此感谢!