Giter VIP home page Giter VIP logo

wxapp-redux-starter's Introduction

微信小程序模板

模板介绍

  • 集成了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

wxapp-redux-starter's People

Contributors

qixiuss avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wxapp-redux-starter's Issues

the vendor lib version

should you list all the verdor version?
like the normalizr, I think it's version 2.X.X.
cause the newest api has changed.

修改组件 less 文件时, 页面样式未发生变化

现在监听了所有 Less 文件变动, 但是当组件 Less 变动时, 只是重新编译了组件的 Less 文件 => WXSS 文件. 而页面引用的对应组件, 还是缓存里的文件, 所以导致页面的 WXSS 未更新.

比如 Page A.less 引用组件 b.less, 当组件 b.less 变动时, 只是编译了 b.less => b.wxss. 而 A.less 引用的组件 b, 还是缓存里的文件(即包含旧内容), 所以导致 A.wxss 没有得到修改后的内容.

引申的问题:

  • 其实没有必要编译组件 Less, 只需要将页面样式文件(比如 pages/home/index.less) 作为打包入口即可.

推荐解决方案:

  • 只编译页面样式 Less => WXSS.
  • 监听所有样式文件, 如果有变动, 找到对应影响的 Page 样式文件, 重新编译一次. 如果是修改公共组件, 就编译全部页面样式文件.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.