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