背景

便捷应用成为了小程序的标签，那么作为开发者如何完成快速高质量的开发呢？一个基于wepy、weui、redux的脚手架成为我们开发者迈出第一步的基石。

环境安装

wepy脚手架

• 安装wepy-cli

  npm install wepy-cli -g
  

• 初始化项目

  wepy init standard myproject
  

• 安装依赖

  npm install
  

• 运行

  npm run dev
  

weui小程序组件

• 下载组件以及基础样式
  weui组件以及样式下载完成后添加到weui文件夹中。如下图

  

• weui基础样式引入
  在app.vue的style中引入weui.wxss

  <style lang="scss">@import "./styles/weui/weui.wxss";</style>
  

• weui组件的使用
  在我们的page页面引用，引用方式如下：

  config = {usingComponents: {'mp-cells': '../../weui/cells/cells','mp-cell': '../../weui/cell/cell'}
  }
  

  然后在我们页面直接使用即可：

  

wepy-redux

• 安装依赖

  npm install redux redux-actions redux-promise wepy-redux --save-dev
  

• redux文件—>store

  .├── README.md├── package.json└── src├── page├── weui├── app.vue└── store└── actions├── test.js└── index.js└── types├── test.js└── index.js└── reducers├── test.js└── index.js└── index.js

• index.js
  用来初始化store，代码如下

  // store index.js
  import { createStore, applyMiddleware } from 'redux'
  import { setStore } from 'wepy-redux'
  import promiseMiddleware from 'redux-promise'
  import wepy from 'wepy'
  import reducers from './reducers'
  import {INIT} from './types'
  const store = createStore(reducers, applyMiddleware(promiseMiddleware))
  wepy.$store = store
  setStore(store)export default store.dispatch({type: INIT})

• types
  types是作为公用的类型存储字符串变量。使用方式如下

  // types test.js
  export const INIT = 'INIT'
  export const PRICE = 'PRICE'
  

  // types index.js
  export * from './test.js'
  

• reducers
  个人理解是一个纯函数，可以通过type和payload操作state的变化

  // reducers test.js
  import {handleActions} from 'redux-actions'
  import {INIT, PRICE} from '../types/test'const defaultState = {count: 1,price: 50
  }export default handleActions({[INIT](state) { // 初始化return {...state, ...defaultState}},[PRICE](state, action) { // 修改数量和价格const price = defaultState['price'] * action.payload['count']return {...state, ...action.payload, price}}
  }, defaultState)

  // reducers index.js
  import { combineReducers } from 'redux'
  import test from './test.js'
  export default combineReducers({test
  })

• actions
  actions是对数据的处理,可以进行请求处理，或者通过触发reducer去更改state。下面是一个模仿异步ajax请求的action

  // actions test.js
  import {createAction} from 'redux-actions'
  import {PRICE} from '../types'
  export const stepListener = createAction(PRICE, ({payload}) => {return new Promise((resolve, reject) => {setTimeout(() => {resolve(payload)}, 500)})
  })
  

  // actions index.js
  export * from './test.js'
  

demo开发

demo实现同步±，异步的更改。具体代码如下：

// page/demo/index.vue
<template><view><view class="page__bd"><mp-cells ext-class="my-cells" ><mp-cell><view>数量</view><view slot="footer"><button class="decrease" size="mini" @tap="descrese">-</button><input class="input-number" value="{{count}}" @input="inputCount" /><button class="add" size="mini" @tap="add">+</button></view></mp-cell><mp-cell><view>金额</view><view slot="footer">￥{{price}}</view></mp-cell></mp-cells></view></view></template><script>import wepy from 'wepy'import { connect } from 'wepy-redux'import { PRICE } from '../../store/types'import { stepListener } from '../../store/actions'@connect({price(state) {return state.test.price},count (state) {return state.test.count}})export default class Index extends wepy.page {onLoad () {wepy.setNavigationBarTitle({title: 'weui+redux实现的demo'})}methods = {inputCount ({detail: {value}}) {const judge = typeof Number(value)if (judge === 'number') {wepy.$store.dispatch(stepListener({payload: {count: Number(value)}}))}},descrese () {console.log(wepy)wepy.$store.dispatch({type: PRICE,payload: {count: this.count - 1}})},add () {wepy.$store.dispatch({type: PRICE,payload: {count: this.count + 1}})}}config = {usingComponents: {'mp-cells': '../../weui/cells/cells','mp-cell': '../../weui/cell/cell'}}}</script><style lang="scss">.add, .decrease, .input-number{display: inline-block;vertical-align: middle;margin-right: 10px;}.input-number{width: 50px;border-bottom: 1px solid #000;text-align: center;}</style>

具体demo实现效果如下

推荐链接

demo git地址

WePY开发文档参考

weui小程序组件文档参考

wepy-redux文档参考

玩转微信小程序的位置授权

如何玩转小程序登录体系