kbone 高級(jí)- 跨頁(yè)面通信和跨頁(yè)面數(shù)據(jù)共享

　　在 kbone 中，每個(gè)頁(yè)面擁有獨(dú)立的 window 對(duì)象，頁(yè)面與頁(yè)面間是相互隔離的，為此需要一個(gè)跨頁(yè)面通信和跨頁(yè)面數(shù)據(jù)共享的方式。

　　1、用法

　　1.1 在頁(yè)面中訂閱廣播消息

　　// 頁(yè)面1

　　window.$$subscribe('hello', data => {

　　console.log('receive a msg: ', data)

　　})

　　1.2 在其他頁(yè)面中發(fā)布廣播消息

　　// 頁(yè)面2

　　window.$$publish('hello', 'I am june')

　　在訂閱了此消息的頁(yè)面則會(huì)輸出 receive a msg: I am june。

　　PS：如果需要取消訂閱消息，可以使用 window.$$unsubscribe 接口進(jìn)行取消。

　　PS：頁(yè)面關(guān)閉后，會(huì)取消該頁(yè)面所有的訂閱。

　　如果需要跨頁(yè)面數(shù)據(jù)進(jìn)行共享，可以使用 window.$$global 對(duì)象，所有頁(yè)面的 window.$$global 均會(huì)指向同一個(gè)對(duì)象：

　　// 頁(yè)面1

　　window.$$global.name = 'june'

　　// 頁(yè)面2

　　console.log(window.$$global.name) // 輸出 june

　　PS：具體 API 可參考 dom/bom 擴(kuò)展 API 文檔。

　　2、案例

　　在 kbone-advanced 目錄下創(chuàng)建 08-share-message 目錄，本案例在這個(gè)目錄下完成。

　　2.1 創(chuàng)建 package.json

　　cd 08-share-message

　　npm init -y

　　編輯 package.json：

　　{

　　"scripts": {

　　"mp": "cross-env NODE_ENV=production webpack --config build/webpack.mp.config.js --progress --hide-modules"

　　},

　　"dependencies": {

　　"vue": "^2.5.11",

　　"vuex": "^3.1.3"

　　},

　　"browserslist": [

　　"> 1%",

　　"last 2 versions",

　　"not ie <= 8"

　　],

　　"devDependencies": {

　　"babel-core": "^6.26.0",

　　"babel-loader": "^7.1.2",

　　"babel-preset-env": "^1.6.0",

　　"babel-preset-stage-3": "^6.24.1",

　　"cross-env": "^5.0.5",

　　"css-loader": "^0.28.7",

　　"extract-text-webpack-plugin": "^3.0.2",

　　"file-loader": "^1.1.4",

　　"html-webpack-plugin": "^4.0.0-beta.5",

　　"mini-css-extract-plugin": "^0.5.0",

　　"optimize-css-assets-webpack-plugin": "^5.0.1",

　　"stylehacks": "^4.0.3",

　　"vue-loader": "^15.7.0",

　　"vue-template-compiler": "^2.6.10",

　　"webpack": "^4.29.6",

　　"webpack-cli": "^3.2.3",

　　"mp-webpack-plugin": "latest"

　　}

　　}

　　安裝依賴包：

　　npm install

　　2.2 配置 webpack

　　在 08-share-message/build 目錄下創(chuàng)建 webpack.mp.config.js，內(nèi)容如下：

　　const path = require('path')

　　const webpack = require('webpack')

　　const MiniCssExtractPlugin = require('mini-css-extract-plugin')

　　const { VueLoaderPlugin } = require('vue-loader')

　　const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

　　const TerserPlugin = require('terser-webpack-plugin')

　　const MpPlugin = require('mp-webpack-plugin') // 用于構(gòu)建小程序代碼的 webpack 插件

　　const isOptimize = false // 是否壓縮業(yè)務(wù)代碼，開(kāi)發(fā)者工具可能無(wú)法完美支持業(yè)務(wù)代碼使用到的 es 特性，建議自己做代碼壓縮

　　module.exports = {

　　mode: 'production',

　　entry: {

　　page1: path.resolve(__dirname, '../src/page1/main.mp.js'),

　　page2: path.resolve(__dirname, '../src/page2/main.mp.js'),

　　page3: path.resolve(__dirname, '../src/page3/main.mp.js'),

　　page4: path.resolve(__dirname, '../src/page4/main.mp.js'),

　　},

　　output: {

　　path: path.resolve(__dirname, '../dist/mp/common'), // 放到小程序代碼目錄中的 common 目錄下

　　filename: '[name].js', // 必需字段，不能修改

　　library: 'createApp', // 必需字段，不能修改

　　libraryExport: 'default', // 必需字段，不能修改

　　libraryTarget: 'window', // 必需字段，不能修改

　　},

　　target: 'web', // 必需字段，不能修改

　　optimization: {

　　runtimeChunk: false, // 必需字段，不能修改

　　splitChunks: { // 代碼分隔配置，不建議修改

　　chunks: 'all',

　　minSize: 1000,

　　maxSize: 0,

　　minChunks: 1,

　　maxAsyncRequests: 100,

　　maxInitialRequests: 100,

　　automaticNameDelimiter: '~',

　　name: true,

　　cacheGroups: {

　　vendors: {

　　test: /[\\/]node_modules[\\/]/,

　　priority: -10

　　},

　　default: {

　　minChunks: 2,

　　priority: -20,

　　reuseExistingChunk: true

　　}

　　}

　　},

　　minimizer: isOptimize ? [

　　// 壓縮CSS

　　new OptimizeCSSAssetsPlugin({

　　assetNameRegExp: /\.(css|wxss)$/g,

　　cssProcessor: require('cssnano'),

　　cssProcessorPluginOptions: {

　　preset: ['default', {

　　discardComments: {

　　removeAll: true,

　　},

　　minifySelectors: false, // 因?yàn)?wxss 編譯器不支持 .some>:first-child 這樣格式的代碼，所以暫時(shí)禁掉這個(gè)

　　}],

　　},

　　canPrint: false

　　}),

　　// 壓縮 js

　　new TerserPlugin({

　　test: /\.js(\?.*)?$/i,

　　parallel: true,

　　})

　　] : [],

　　},

　　module: {

　　rules: [

　　{

　　test: /\.css$/,

　　use: [

　　MiniCssExtractPlugin.loader,

　　'css-loader'

　　],

　　},

　　{

　　test: /\.vue$/,

　　loader: [

　　'vue-loader',

　　],

　　},

　　{

　　test: /\.js$/,

　　use: [{

　　loader: 'babel-loader',

　　options: {

　　presets: ['env', 'stage-3'],

　　},

　　}],

　　exclude: /node_modules/

　　},

　　{

　　test: /\.(png|jpg|gif|svg)$/,

　　loader: 'file-loader',

　　options: {

　　name: '[name].[ext]?[hash]'

　　}

　　}

　　]

　　},

　　resolve: {

　　extensions: ['*', '.js', '.vue', '.json']

　　},

　　plugins: [

　　new webpack.DefinePlugin({

　　'process.env.isMiniprogram': process.env.isMiniprogram, // 注入環(huán)境變量，用于業(yè)務(wù)代碼判斷

　　}),

　　new MiniCssExtractPlugin({

　　filename: '[name].wxss',

　　}),

　　new VueLoaderPlugin(),

　　new MpPlugin(require('./miniprogram.config.js')),

　　],

　　}

　　在 08-share-message/build 目錄下創(chuàng)建 miniprogram.config.js，內(nèi)容如下：

　　module.exports = {

　　origin: 'https://test.miniprogram.com',

　　entry: '/',

　　router: {

　　page1: ['/'],

　　page2: ['/page2'],

　　page3: ['/page3'],

　　page4: ['/page4'],

　　},

　　redirect: {

　　notFound: 'page1',

　　accessDenied: 'page1',

　　},

　　generate: {

　　// 構(gòu)建完成后是否自動(dòng)安裝小程序依賴。'npm'：使用 npm 自動(dòng)安裝依賴

　　autoBuildNpm: 'npm'

　　},

　　app: {

　　navigationBarTitleText: 'miniprogram-project',

　　},

　　projectConfig: {

　　appid: '',

　　projectname: 'kbone-demo22',

　　},

　　packageConfig: {

　　author: 'wechat-miniprogram',

　　},

　　}

　　2.3 創(chuàng)建page1頁(yè)面

　　在 /src/ 下創(chuàng)建 page1 文件夾，在 page1 下創(chuàng)建 main.mp.js 文件，內(nèi)容如下：

　　import Vue from 'vue'

　　import {createStore} from '../store'

　　import App from './App.vue'

　　export default function createApp() {

　　const container = document.createElement('div')

　　container.id = 'app'

　　document.body.appendChild(container)

　　return new Vue({

　　el: '#app',

　　store: createStore(),

　　render: h => h(App)

　　})

　　}

　　在 /src/ 下創(chuàng)建 store 文件夾，在 store 下創(chuàng)建 index.js 文件，內(nèi)容如下：

　　import Vue from 'vue'

　　import Vuex from 'vuex'

　　Vue.use(Vuex)

　　export function createStore() {

　　const state = window.$$global.state || {

　　count: 0,

　　data: {},

　　}

　　window.$$global.state = state

　　return new Vuex.Store({

　　state,

　　actions: {

　　FETCH_DATA: ({commit}, data) => {

　　setTimeout(() => {

　　commit('SET_DATA', data)

　　}, 100)

　　},

　　},

　　mutations: {

　　SET_DATA: (state, data) => {

　　state.count++

　　Vue.set(state.data, 'name', data.name)

　　},

　　},

　　});

　　}

　　在 /src/page1 下創(chuàng)建 App.vue 文件，內(nèi)容如下：

<template>

  <div class="cnt">

    <Header></Header>

    <a href="/page2" target="_blank">跳轉(zhuǎn)頁(yè)面2</a>

    <a href="/page3" target="_blank">跳轉(zhuǎn)頁(yè)面3</a>

    <a href="/page4" target="_blank">跳轉(zhuǎn)頁(yè)面4</a>

    <button @click="startFetchData">開(kāi)啟數(shù)據(jù)更新</button>

    <div>count: {{count}} - name: {{data.name || ''}}</div>

    <Footer></Footer>

  </div>

</template>

 

<script>

import {mapState, mapActions} from 'vuex'

import Header from '../common/Header.vue'

import Footer from '../common/Footer.vue'

 

export default {

  name: 'App',

  components: {

    Header,

    Footer

  },

  computed: {

    ...mapState(['count', 'data'])

  },

  mounted() {

    let count = 0

    setInterval(() => {

      console.log('開(kāi)始發(fā)送輪詢消息，10s一次')

      window.$$publish('polling', ++count)

    }, 10000)

    window.$$subscribe('page1', data => console.log('首頁(yè)收到來(lái)自其他頁(yè)面的消息', data))

  },

  methods: {

    startFetchData() {

      const nameList = ['june', 'green']

      let count = 0

      let name = nameList[count % 2]

 

      setInterval(() => {

        count++

        name = nameList[count % 2]

 

        this.FETCH_DATA({

          count,

          name,

        })

      }, 1000)

    },

 

    ...mapActions(['FETCH_DATA'])

  },

}

</script>

 

<style>

.cnt {

  margin-top: 20px;

  text-align: center;

}

a, button {

  display: block;

  width: 100%;

  height: 30px;

  line-height: 30px;

  text-align: center;

  font-size: 20px;

  border: 1px solid #ddd;

}

</style>

　　在 /src/ 下創(chuàng)建 common 文件夾，在 common 下創(chuàng)建 Header.vue 文件，內(nèi)容如下：

<template>

  <div class="header">

    <p>wechat-miniprogram-header</p>

  </div>

</template>

 

<script>

export default {}

</script>

 

<style>

.header {

  margin-bottom: 10px;

  width: 100%;

  text-align: center;

}

</style>

　　在 /src/common 下創(chuàng)建 Footer.vue 文件，內(nèi)容如下：

<template>

  <div class="header">

    <p>wechat-miniprogram-header</p>

  </div>

</template>

 

<script>

export default {}

</script>

 

<style>

.header {

  margin-bottom: 10px;

  width: 100%;

  text-align: center;

}

</style>

　　2.4 創(chuàng)建page2頁(yè)面

　　在 /src/ 下創(chuàng)建 page2 文件夾，在 page2 下創(chuàng)建 main.mp.js 文件，內(nèi)容如下：

　　import Vue from 'vue'

　　import {createStore} from '../store'

　　import App from './App.vue'

　　export default function createApp() {

　　const container = document.createElement('div')

　　container.id = 'app'

　　document.body.appendChild(container)

　　return new Vue({

　　el: '#app',

　　store: createStore(),

　　render: h => h(App)

　　})

　　}

　　在 /src/page2 下創(chuàng)建 App.js 文件，內(nèi)容如下：

<template>

  <div class="cnt">

    <Header></Header>

    <a href="/page3" target="_blank">跳轉(zhuǎn)頁(yè)面3</a>

    <a href="/page4" target="_blank">跳轉(zhuǎn)頁(yè)面4</a>

    <button @click="onClickBack">回到上一頁(yè)</button>

    <button @click="sendPage1">發(fā)布消息給首頁(yè)</button>

    <div>count: {{count}} - name: {{data.name || ''}}</div>

    <Footer></Footer>

  </div>

</template>

 

<script>

import {mapState} from 'vuex'

import Header from '../common/Header.vue'

import Footer from '../common/Footer.vue'

 

export default {

  name: 'App',

  components: {

    Header,

    Footer

  },

  computed: {

    ...mapState(['count', 'data'])

  },

  mounted() {

    window.$$subscribe('polling', count => console.log('頁(yè)面2收到來(lái)自首頁(yè)的輪詢消息 --> ' + count))

    window.$$subscribe('page2', data => console.log('頁(yè)面2收到來(lái)自頁(yè)面3的消息', data))

    window.$$subscribe('page23', data => console.log('頁(yè)面2收到來(lái)自頁(yè)面4的消息', data))

  },

  methods: {

    onClickBack() {

      if (process.env.isMiniprogram) {

        wx.navigateBack()

      }

    },

 

    sendPage1() {

      window.$$publish('page1', {from: '頁(yè)面2', to: '首頁(yè)'})

    },

  },

}

</script>

 

<style>

.cnt {

  margin-top: 20px;

  text-align: center;

}

a, button {

  display: block;

  width: 100%;

  height: 30px;

  line-height: 30px;

  text-align: center;

  font-size: 20px;

  border: 1px solid #ddd;

}

</style>

　　2.5 創(chuàng)建page3頁(yè)面

　　在 /src/ 下創(chuàng)建 page3 文件夾，在 page3 下創(chuàng)建 main.mp.js 文件，內(nèi)容如下：

　　import Vue from 'vue'

　　import {createStore} from '../store'

　　import App from './App.vue'

　　export default function createApp() {

　　const container = document.createElement('div')

　　container.id = 'app'

　　document.body.appendChild(container)

　　return new Vue({

　　el: '#app',

　　store: createStore(),

　　render: h => h(App)

　　})

　　}

　　在 /src/page3 下創(chuàng)建 App.js 文件，內(nèi)容如下：

<template>

  <div class="cnt">

    <Header></Header>

    <a href="/page4" target="_blank">跳轉(zhuǎn)頁(yè)面4</a>

    <button @click="onClickBack">回到上一頁(yè)</button>

    <button @click="sendPage1">發(fā)布消息給首頁(yè)</button>

    <button @click="sendPage2">發(fā)布消息給頁(yè)面2</button>

    <div>count: {{count}} - name: {{data.name || ''}}</div>

    <Footer></Footer>

  </div>

</template>

 

<script>

import {mapState} from 'vuex'

import Header from '../common/Header.vue'

import Footer from '../common/Footer.vue'

 

export default {

  name: 'App',

  components: {

    Header,

    Footer

  },

  computed: {

    ...mapState(['count', 'data'])

  },

  mounted() {

    window.$$subscribe('polling', count => console.log('頁(yè)面3收到來(lái)自首頁(yè)的輪詢消息 --> ' + count))

    window.$$subscribe('page23', data => console.log('頁(yè)面3收到來(lái)自頁(yè)面4的消息', data))

  },

  methods: {

    onClickBack() {

      if (process.env.isMiniprogram) {

        wx.navigateBack()

      }

    },

 

    sendPage1() {

      window.$$publish('page1', {from: '頁(yè)面3', to: '首頁(yè)'})

    },

 

    sendPage2() {

      window.$$publish('page2', {from: '頁(yè)面3', to: '頁(yè)面2'})

    },

  },

}

</script>

 

<style>

.cnt {

  margin-top: 20px;

  text-align: center;

}

a, button {

  display: block;

  width: 100%;

  height: 30px;

  line-height: 30px;

  text-align: center;

  font-size: 20px;

  border: 1px solid #ddd;

}

</style>

　　2.6 創(chuàng)建page4頁(yè)面

　　在 /src/ 下創(chuàng)建 page4 文件夾，在 page4 下創(chuàng)建 main.mp.js 文件，內(nèi)容如下：

　　import Vue from 'vue'

　　import {createStore} from '../store'

　　import App from './App.vue'

　　export default function createApp() {

　　const container = document.createElement('div')

　　container.id = 'app'

　　document.body.appendChild(container)

　　return new Vue({

　　el: '#app',

　　store: createStore(),

　　render: h => h(App)

　　})

　　}

　　在 /src/page4 下創(chuàng)建 App.js 文件，內(nèi)容如下：

<template>

  <div class="cnt">

    <Header></Header>

    <button @click="onClickBack">回到上一頁(yè)</button>

    <button @click="sendPage1">發(fā)布消息給首頁(yè)</button>

    <button @click="sendPage23">發(fā)布消息給頁(yè)面2和頁(yè)面3</button>

    <div>count: {{count}} - name: {{data.name || ''}}</div>

    <Footer></Footer>

  </div>

</template>

 

<script>

import {mapState} from 'vuex'

import Header from '../common/Header.vue'

import Footer from '../common/Footer.vue'

 

export default {

  name: 'App',

  components: {

    Header,

    Footer

  },

  computed: {

    ...mapState(['count', 'data'])

  },

  mounted() {

    window.$$subscribe('polling', count => console.log('頁(yè)面4收到來(lái)自首頁(yè)的輪詢消息 --> ' + count))

  },

  methods: {

    onClickBack() {

      if (process.env.isMiniprogram) {

        wx.navigateBack()

      }

    },

 

    sendPage1() {

      window.$$publish('page1', {from: '頁(yè)面4', to: '首頁(yè)'})

    },

 

    sendPage23() {

      window.$$publish('page23', {from: '頁(yè)面4', to: '頁(yè)面2、頁(yè)面3'})

    },

 

  },

}

</script>

 

<style>

.cnt {

  margin-top: 20px;

  text-align: center;

}

a, button {

  display: block;

  width: 100%;

  height: 30px;

  line-height: 30px;

  text-align: center;

  font-size: 20px;

  border: 1px solid #ddd;

}

</style>

　　2.7 小程序端效果預(yù)覽

　　npm run mp