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

• 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文档参考

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

如何玩转小程序登录体系