background
Convenient applications have become the label of small programs, so as a developer how to achieve fast and high quality development? A scaffold based on Wepy, Weui, and Redux became the cornerstone of our first steps as developers.
Environmental installation
Wepy scaffolding
- Install wepy – cli
npm install wepy-cli -g Copy the code
- Initialize the project
wepy init standard myproject Copy the code
- Install dependencies
npm install Copy the code
- run
npm run dev Copy the code
Weui applets component
-
Download the components and base style WeUI components and add the styles to the WeUI folder once they are downloaded. The following figure
-
Weui base styles introduced weui. WXSS in app.vue style
<style lang="scss"> @import "./styles/weui/weui.wxss"; </style> Copy the code
-
The use of weUI components is referenced in our page as follows:
config = { usingComponents: { 'mp-cells': '.. /.. /weui/cells/cells'.'mp-cell': '.. /.. /weui/cell/cell'}}Copy the code
Then use it directly on our page:
wepy-redux
- Install dependencies
npm install redux redux-actions redux-promise wepy-redux --save-dev Copy the code
- Redux file – > store
. ├ ─ ─ the README. Md ├ ─ ─ package. The json └ ─ ─ the SRC ├ ─ ─ page ├ ─ ─ weui ├ ─ ─ app. Vue └ ─ ─ store └ ─ ─ the actions ├ ─ ─ test. The js └ ─ ─ index, js └ ─ ─ types ├ ─ ─ test. Js └ ─ ─ index. The js └ ─ ─ reducers ├ ─ ─ test. The js └ ─ ─ index. The js └ ─ ─ index, jsCopy the code
- index.js
To initialize the store, the code is as follows// 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}) Copy the code
- types
Types stores string variables as common types. Use as follows// types test.js export const INIT = 'INIT' export const PRICE = 'PRICE' Copy the code
// types index.js export * from './test.js' Copy the code
- reducers
It is a pure function that can manipulate state changes by type and payload// 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) { / / initialization return{... state, ... defaultState} }, [PRICE](state, action) {// Modify the quantity and price const price = defaultState['price'] * action.payload['count'] return{... state, ... action.payload, price} } }, defaultState)Copy the code
// reducers index.js import { combineReducers } from 'redux' import test from './test.js' export default combineReducers({ test }) Copy the code
- actions
Actions is the processing of data. Request processing can be done, or state can be changed by triggering the Reducer. Here is an action that mimics an asynchronous Ajax request// actions test.js import {createAction} from 'redux-actions' import {PRICE} from '.. /types' export const stepListener = createAction(PRICE, ({payload}) => { return new Promise((resolve, reject) = > { setTimeout((a)= > { resolve(payload) }, 500)})})Copy the code
// actions index.js export * from './test.js' Copy the code
The demo development
Demo implements synchronous +-, asynchronous changes. The specific code is as follows:
// page/demo/index.vue<template> <view> <view class="page__bd"> <mp-cells ext-class="my-cells" > <mp-cell> <view> number </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 > amount < / 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 realize the demo'})} the methods = {inputCount ({the 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>Copy the code
The specific demo effect is as follows
Recommended links
The demo git address
WePY development documentation reference
Weui applets component documentation reference
Wepy-redux documentation reference
Play wechat mini program location authorization
How to play small program login system