For the first time, I was responsible for making small programs in the company, because I was afraid of encountering big holes for the first time, so I used the native development. Page data sharing is more commonly used, so to study.

1. The url of page A is directly transmitted to and received in onload of page B. This is simple and rough, but it's not convenient for B to pass parameters to A. And to pass A large object in the past, stringfy must be used. But the address length is limited, so there will be bug s.
2. Direct wx.setStorage is simple and crude, and directly stored in wechat. Sometimes I don't want to save too long, but the temporary data also makes it strange for me to save locally.
3. getCurrentPages() can take the current page stack, and use it to get the information of the previous page. Sometimes a page may have many ways to enter, I don't know what the previous page is, and I'm afraid of using it.
4. A temporary data such as payload:null is stored in app.globalData. When you want page a to pass parameters, change the payload value, and then page B gets it and sets it to null. It's OK for me to do that.
5. What's the better way for youmi? I found that the current small program framework is stateful management, or I'm the whole. I've studied it and copied a beggar version of redux to use in the applet. Here is the code.

I. build a folder and drop the redux related code.

//createStore.js

export default function createStore(reducer, preloadedState, enhancer) {
  //To put Middleware in use is to call createStore and modify dispatch in enhancer.
  if (enhancer && typeof enhancer === 'function') {
    return enhancer(createStore)(reducer, preloadedState)
  }
  
  //Initial state assignment
  let state = preloadedState;
  let listeners = [];

  const getState = () => state;
   //Trigger action
  const dispatch = (action) => {
    state = reducer(state, action);
    listeners.forEach(listener => listener());
  };
  //Add listener, just add some methods with setData
  const subscribe = (listener) => {
    listeners.push(listener);
    return () => {
      listeners = listeners.filter(l => l !== listener);
    }
  };

   //Initialization
  dispatch({});

  return { getState, dispatch, subscribe };
}

The specific code can be seen Code address
For students who don't understand redux, please read other articles. There are a lot of high handwriting, I will not write:)

2. Store the store in app.js

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

III. build action

// /action/page2
import * as types from '../action-types'
//Function to create action
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'
//Function to create action
export default {
  change(obj) {
    return { type: 'page1/' + types.INPUT, payload: obj}
  }
}

IV. build 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
  }
}

This is page2's page1. It's about the same.

In this way, no matter what page you want to get through app.globalData.store.getState().
Of course, the onload and onUnLoad of each page must add and remove the listening (i.e. setData) so that the page will render after the dispatch.

This is basically done. But I don't want to add delete monitor to every page. You can do that.

// I encapsulated a mini-redux.js
const app = getApp();
const store = app.globalData.store;

//Get a {page1: {... }, page2 {... }}Such an object
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 page

<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], //Define the action s to use
  pages:['page1', 'page2'], //Those store s need to be defined in reducer/index.js.
  bindKeyInput(e) {
    //action[0] is 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')
  }
}))

The specific code can be seen Code address

There are still some problems. Each dispatch will trigger the listening of all pages of the page stack. The page can directly set the data store and so on. These places should be optimized.