第一次在公司里負(fù)責(zé)做小程序，因?yàn)榈谝淮巫雠掠龅酱罂?，所以用的原生開(kāi)發(fā)。頁(yè)面數(shù)據(jù)共享比較常用，所以來(lái)研究研究。

1. A頁(yè)面直接url傳參 B頁(yè)面onload里接收。這種簡(jiǎn)單粗暴但B如果還想給A傳參感覺(jué)不太方便。而且傳一個(gè)很大的對(duì)象過(guò)去，必須要stringfy。但是地址長(zhǎng)度有限所以會(huì)有bug
2. 直接wx.setStorage 簡(jiǎn)單粗暴，直接存微信本地。有時(shí)候我并不想存太久，只是臨時(shí)的數(shù)據(jù)也給我存本地了感覺(jué)怪怪的。
3. getCurrentPages() 這個(gè)可以拿當(dāng)前的頁(yè)面棧，通過(guò)他來(lái)那上一個(gè)頁(yè)面，上上個(gè)頁(yè)面的信息。有時(shí)候一個(gè)頁(yè)面說(shuō)不定有很多種進(jìn)入途徑，也不知道上個(gè)頁(yè)面是啥，用起來(lái)也有點(diǎn)怕怕的。
4. app.globalData 里存一個(gè)臨時(shí)數(shù)據(jù)比如payload:null,當(dāng)要A頁(yè)面要傳參時(shí)改變payload值，然后B頁(yè)面獲取到后置為null。我一般就這么搞感覺(jué)還行。
5. 有米有什么更好的方法呢，我發(fā)現(xiàn)現(xiàn)在的小程序框架都是有狀態(tài)管理的，要不我也整個(gè)。我就研究了下，抄個(gè)乞丐版的redux放在小程序里用用。以下為代碼。

一、上來(lái)建個(gè)文件夾把redux相關(guān)的代碼丟上去。

//createStore.js

export default function createStore(reducer, preloadedState, enhancer) {
  //放中間件用 其實(shí)就是在enhancer里調(diào)用createStore 并修改dispatch
  if (enhancer && typeof enhancer === 'function') {
    return enhancer(createStore)(reducer, preloadedState)
  }
  
  //初始state賦值
  let state = preloadedState;
  let listeners = [];

  const getState = () => state;
   //觸發(fā)動(dòng)作
  const dispatch = (action) => {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  };
  //添加監(jiān)聽(tīng)器，無(wú)非加些有setData的方法進(jìn)去
  const subscribe = (listener) => {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter(l => l !== listener);
    }
  };

   //初始化
  dispatch({});

  return { getState, dispatch, subscribe };
}

具體代碼可以看代碼地址
對(duì)于redux不太理解的同學(xué)可以看看其它文章。有很多高手寫(xiě)，我這個(gè)菜鳥(niǎo)就不寫(xiě)了:)

二、把store 存到app.js里

import store from './store/index.js'
import bindActionCreator from '/store/hcyRedux/bindActionCreator.js'
App({
  globalData: {
    store,
    bindActionCreator //方便dispatch
  }
})

三、建action

// /action/page2
import * as types from '../action-types'
//創(chuàng)建 action的函數(shù)
export default {
  change(obj) {
    return { type: 'page2/' + types.INPUT, payload: obj }
  },
  promiseChange(obj) {
    return {
      type: 'page2/' + types.INPUT,
      payload: new Promise(function (resolve, reject) {
        setTimeout(function () {
          resolve(obj)
        }, 1000)
      })
    }
  }
}

// /action/page1
import * as types from '../action-types'
//創(chuàng)建 action的函數(shù)
export default {
  change(obj) {
    return { type: 'page1/' + types.INPUT, payload: obj}
  }
}

四、建reducer

import * as types from '../action-types'
const head = 'page2/'
const defaultValue = {
  input1: 4,
  input2: 5,
  input3: 6
}
export default function (state = defaultValue, action) {
  switch (action.type) {
    case head + types.INPUT:
      return { ...state, ...action.payload };
    default:
      return state
  }
}

這是page2的page1也差不多

這樣子不管什么頁(yè)面可以通過(guò)app.globalData.store.getState()想怎么取值都可以了。
當(dāng)然每個(gè)頁(yè)面的onload 和 onUnLoad 都必須添加和刪除監(jiān)聽(tīng)（就是setData）這樣dispatch 之后頁(yè)面才會(huì)渲染。

這樣基本就完成了。但我不想每個(gè)頁(yè)面都添加刪除監(jiān)聽(tīng)?？梢赃@么干。

// 自己封裝了一個(gè)mini-redux.js
const app = getApp();
const store = app.globalData.store;

//得到一個(gè){page1:{。。。},page2{。。。}}這樣一個(gè)對(duì)象
function getData (obj) {
  let res = {}
  obj.pages.forEach(x => {
    res[x] = store.getState()[x]
  })
  return res
}

export default function (obj) {
  let listener = null;
  let res = {};
  this.action = obj.action.map(x => app.globalData.bindActionCreator(x, store.dispatch));
  this.store = store
  return {
    ...obj,
    data: getData(obj),
    onLoad: function () {
      listener = store.subscribe(() => {
        this.setData(getData(obj))
      })
      store.dispatch({})
      obj.onLoad && obj.onLoad();
    },
    onUnload() {
      listener();
      obj.onUnload && obj.onUnload();
    }
  }
}

page2頁(yè)面

<view class="page-section">
  <view class="weui-cells__title">{{page2.input1}}</view>
  <view class="weui-cells weui-cells_after-title">
    <view class="weui-cell weui-cell_input">
      <input class="weui-input" placeholder="test" value="{{page2.input1}}" bindinput="bindKeyInput" data-key="input1" />
    </view>
  </view>
</view>
<view class="page-section">
  <view class="weui-cells__title">{{page2.input2}}</view>
  <view class="weui-cells weui-cells_after-title">
    <view class="weui-cell weui-cell_input">
      <input class="weui-input" placeholder="test" value="{{page2.input2}}" bindinput="bindKeyInput" data-key="input2" />
    </view>
  </view>
</view>
<view class="page-section">
  <view class="weui-cells__title">{{page2.input3}}</view>
  <view class="weui-cells weui-cells_after-title">
    <view class="weui-cell weui-cell_input">
      <input class="weui-input" placeholder="test" value="{{page2.input3}}" bindinput="bindKeyInput" data-key="input3" />
    </view>
  </view>
</view>
<text>{{page1.input1}}</text>
<navigator url="/pages/page2/page2">
  <button type="primary"> 2 </button>
</navigator>

page2.js

import actions1 from '../../store/actions/page1.js'
import actions2 from '../../store/actions/page2.js'
import V from '../../utils/mini-redux.js'
const page = {}

Page(V.call(page,{
  action: [actions1, actions2], //定義好用那些action
  pages:['page1', 'page2'], //定義好需要用那些store 是在reducer/index.js 定義的
  bindKeyInput(e) {
    //action[0] 就是actions1
    page.action[0].change({
      [e.target.dataset.key]: e.detail.value
    });
    page.action[1].promiseChange({
      [e.target.dataset.key]: e.detail.value
    });
  },
  onShow() {
    console.log('show2')
  },
  onLoad () {
    console.log('load2')
  }
}))

具體代碼可以看代碼地址

還是有些問(wèn)題 每次dispatch 會(huì)觸發(fā)頁(yè)面棧的所有頁(yè)面的監(jiān)聽(tīng)，頁(yè)面可以直接setData store 等等。這些地方應(yīng)該還可以?xún)?yōu)化。

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶(hù)學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.juherenli.com/25242.html