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