wepy+weui+redux实现小程序脚手架

背景

便捷应用成为了小程序的标签，那么作为开发者如何完成快速高质量的开发呢？一个基于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实现效果如下