微信小程序模板

模板介绍

• 集成了Redux，数据管理更方便
• 开发过程中，使用xml取代wxml，对开发工具更友好
• 开发过程中，使用less取代wxss，功能更强大
• 引入es-promise，以便可以创建并使用Promise
• 添加promisify工具函数，可以便捷的将官方Api转换成Pormise模式
• 引入normalizr，可以将数据扁平化，更方便进行数据管理
• 引入babel自动进行ES2015特性转换
• 对wxml/wxss/js/img压缩，相对开发者工具提供的压缩，会减小一丢丢体积。

内置Demo

为了让大家更快上手，内置了三个Demo页面，分别是首页，研究所列表页，文章详情页。

新建项目的时候，选择无appId即可体验。Demo不是最新版代码，不定期更新。

更多内容可以查看博客 微信小程序全面实战，架构设计 && 躲坑攻略

如何使用最佳实践开发微信小程序？

1. 先设计Redux数据结构

为了不让代码过于分散，该模板将Redux相关的代码全部放到了redux目录中，并且将关联的action和reducer逻辑放到同一个文件中。

更多内容可以查看src/redux目录

2. 微信小程序App & Page模板

// 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);

3. 开发 components下的组件，强烈建议写成非状态组件

更多内容可以查看src/components目录

如何运行项目？

1. npm run dev: 开发模式使用，构建项目并监听改动 使用微信小程序开发工具添加dist目录的时候，最好先构建，再添加，不然微信小程序开发工具可能会监听不到dist目录下的文件。

2. npm run build: 生产模式使用，构建项目

一些开发过程中的总结，欢迎反馈更多

更多内容可以查看博客 微信小程序全面实战，架构设计 && 躲坑攻略

第二部分：构建系统 && 组件化

第三部分：微信小程序的坑 以及 躲坑技巧【不断更新中】

感谢

该模板参考并借鉴了以下两个开源项目，特此感谢！

weapp-boilerplate wechat-weapp-redux