Awesome Open Source
Awesome Open Source

微信小程序模板

模板介绍

  • 集成了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目录中,并且将关联的actionreducer逻辑放到同一个文件中。

更多内容可以查看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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
css (7,393
redux (1,172
weixin (165
wxapp (78
wxml (23
wxss (20