久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

        手機(jī)站
        千鋒教育

        千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

        千鋒教育

        掃一掃進(jìn)入千鋒手機(jī)站

        領(lǐng)取全套視頻
        千鋒教育

        關(guān)注千鋒學(xué)習(xí)站小程序
        隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

        當(dāng)前位置:首頁  >  技術(shù)干貨  > kbone 高級(jí)- 跨頁面通信和跨頁面數(shù)據(jù)共享

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

        來源:千鋒教育
        發(fā)布人:qyf
        時(shí)間: 2022-09-15 16:04:05 1663229045

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

          1、用法

          1.1 在頁面中訂閱廣播消息

          // 頁面1

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

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

          })

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

          // 頁面2

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

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

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

          PS:頁面關(guān)閉后,會(huì)取消該頁面所有的訂閱。

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

          // 頁面1

          window.$$global.name = 'june'

          // 頁面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ù)代碼,開發(fā)者工具可能無法完美支持業(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頁面

          在 /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)頁面2</a>

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

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

            <button @click="startFetchData">開啟數(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('開始發(fā)送輪詢消息,10s一次')

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

            }, 10000)

            window.$$subscribe('page1', data => console.log('首頁收到來自其他頁面的消息', 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頁面

          在 /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)頁面3</a>

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

            <button @click="onClickBack">回到上一頁</button>

            <button @click="sendPage1">發(fā)布消息給首頁</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('頁面2收到來自首頁的輪詢消息 --> ' + count))

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

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

          },

          methods: {

            onClickBack() {

              if (process.env.isMiniprogram) {

                wx.navigateBack()

              }

            },

         

            sendPage1() {

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

            },

          },

        }

        </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頁面

          在 /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)頁面4</a>

            <button @click="onClickBack">回到上一頁</button>

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

            <button @click="sendPage2">發(fā)布消息給頁面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('頁面3收到來自首頁的輪詢消息 --> ' + count))

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

          },

          methods: {

            onClickBack() {

              if (process.env.isMiniprogram) {

                wx.navigateBack()

              }

            },

         

            sendPage1() {

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

            },

         

            sendPage2() {

              window.$$publish('page2', {from: '頁面3', to: '頁面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頁面

          在 /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">回到上一頁</button>

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

            <button @click="sendPage23">發(fā)布消息給頁面2和頁面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('頁面4收到來自首頁的輪詢消息 --> ' + count))

          },

          methods: {

            onClickBack() {

              if (process.env.isMiniprogram) {

                wx.navigateBack()

              }

            },

         

            sendPage1() {

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

            },

         

            sendPage23() {

              window.$$publish('page23', {from: '頁面4', to: '頁面2、頁面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

        圖片5

        tags:
        聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
        10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
        請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
        免費(fèi)領(lǐng)取
        今日已有369人領(lǐng)取成功
        劉同學(xué) 138****2860 剛剛成功領(lǐng)取
        王同學(xué) 131****2015 剛剛成功領(lǐng)取
        張同學(xué) 133****4652 剛剛成功領(lǐng)取
        李同學(xué) 135****8607 剛剛成功領(lǐng)取
        楊同學(xué) 132****5667 剛剛成功領(lǐng)取
        岳同學(xué) 134****6652 剛剛成功領(lǐng)取
        梁同學(xué) 157****2950 剛剛成功領(lǐng)取
        劉同學(xué) 189****1015 剛剛成功領(lǐng)取
        張同學(xué) 155****4678 剛剛成功領(lǐng)取
        鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
        董同學(xué) 138****2867 剛剛成功領(lǐng)取
        周同學(xué) 136****3602 剛剛成功領(lǐng)取
        相關(guān)推薦HOT
        抖店入駐收費(fèi)多少?開抖店費(fèi)用是多少?

        如果要開通抖音小店,需要先把抖音賬號(hào)開通商品櫥窗功能。入駐之后,可以選擇頭條賬號(hào)、抖音賬號(hào)、火山賬號(hào)任一類型注冊(cè)或登錄。那開個(gè)抖店要多...詳情>>

        2023-09-19 07:50:26
        想做直播帶貨的貨源哪里來?怎么找貨源?

        現(xiàn)如今直播推廣的方式是非?;鸬?,有著非常多的賣家都是利用直播推廣店鋪產(chǎn)品,效果也是非常不錯(cuò)。但很多賣家想要了解現(xiàn)在直播帶貨的話什么產(chǎn)品...詳情>>

        2023-09-19 07:47:16
        適合三農(nóng)領(lǐng)域的名字?有何技巧?

        現(xiàn)在在抖音上很多博主會(huì)選擇直播來賺取更多的流量以及利潤(rùn),直播間的東西也有很多讓消費(fèi)者信任并且喜歡的,而且隨著越來越多人直播,很多農(nóng)產(chǎn)品...詳情>>

        2023-09-19 07:06:05
        抖店商品發(fā)布違規(guī)怎么申訴?有何規(guī)則?

        抖店服務(wù)市場(chǎng)服務(wù)商發(fā)布違禁信息如何處理?情節(jié)嚴(yán)重程度判定原則:違規(guī)嚴(yán)重等級(jí)主要通過服務(wù)商違規(guī)次數(shù)、造成后果的嚴(yán)重程度、獲利或?qū)е聯(lián)p失的...詳情>>

        2023-09-19 06:59:55
        “泛垂直起號(hào)”可能是2023年最高效的起號(hào)方式

        這可能是明年最好用的旗號(hào)方式了,今天教大家一個(gè)很野,但是可以讓你三天漲1000粉的偏方。去年前年啊,每個(gè)人都教你,誰知七號(hào)對(duì)著自己的產(chǎn)品拍...詳情>>

        2023-09-19 06:37:38
        開班信息
        北京校區(qū)
        • 北京校區(qū)
        • 大連校區(qū)
        • 廣州校區(qū)
        • 成都校區(qū)
        • 杭州校區(qū)
        • 長(zhǎng)沙校區(qū)
        • 合肥校區(qū)
        • 南京校區(qū)
        • 上海校區(qū)
        • 深圳校區(qū)
        • 武漢校區(qū)
        • 鄭州校區(qū)
        • 西安校區(qū)
        • 青島校區(qū)
        • 重慶校區(qū)
        • 太原校區(qū)
        • 沈陽校區(qū)
        • 南昌校區(qū)
        • 哈爾濱校區(qū)
        博客| 吉安市| 兰溪市| 财经| 高要市| 浦江县| 航空| 上蔡县| 扎囊县| 广饶县| 专栏| 文山县| 忻城县| 广元市| 古丈县| 哈巴河县| 阜新| 临朐县| 新宾| 宁海县| 罗田县| 榆林市| 安宁市| 仪陇县| 全椒县| 郯城县| 宝应县| 阿拉尔市| 绵阳市| 嘉义县| 宝山区| 长子县| 肥东县| 富裕县| 临潭县| 康保县| 双鸭山市| 西平县| 葵青区| 新平| 浠水县|