??微信小程序和內(nèi)嵌 H5 之間來回跳轉(zhuǎn)，來回交互。

1 微信小程序跳轉(zhuǎn) H5

1.2. web-view

??微信小程序官方提供了 web-view 組件來實現(xiàn)微信小程序跳轉(zhuǎn)到 H5 頁面，實現(xiàn)的方式也很簡單，具體實現(xiàn)方式如下：
1、新建一個頁面用來單獨(dú)存放 web-view 組件，并且所有的內(nèi)嵌 H5 都可以通過這個頁面來實現(xiàn)跳轉(zhuǎn)；
（1）myWeb.wxml

<web-view src="{{webUrl}}" bindmessage="bindMessages"></web-view>

（2）myWeb.js

const spConstant = require('../../public/js/spConstant');
const app = getApp()
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    webUrl: ''
  },
  onLoad(options) {
    var that = this
    if (options.params == '您沒有進(jìn)入系統(tǒng)權(quán)限!') {
      app.data.isRelogin = true
      wx.showToast({
        title: '您沒有進(jìn)入系統(tǒng)權(quán)限!',
        icon: 'none'
      })
      setTimeout(function () {
        wx.switchTab({
          url: `../home/home`,
        })
      }, 1000)
    } else if (options.params == '登錄失效') {
      app.data.isRelogin = true
      wx.showToast({
        title: '登錄失效',
        icon: 'none'
      })
      setTimeout(function () {
        wx.switchTab({
          url: `../home/home`,
        })
      }, 1000)
    } else {
      var webUrl = options.webUrl
      that.setData({
        webUrl: webUrl + "?applet=true&token=" +
        wx.getStorageSync(spConstant.SP_TOKEN) + "&userId=" +  wx.getStorageSync(spConstant.SP_USER_ID)
        //webUrl: " http://120.224.9.76:18080/app/html/activity-add.html?applet=true"
      });
    }
  },
  /**
   * 接收參數(shù)，也可以跳轉(zhuǎn)到小程序其他頁面將參數(shù)傳遞過去
   */
  postMessage(e) {
    console.log("ewferferg==", e)
    app.data.isRelogin = true
    wx.navigateBack({
      delta: 10
    })
  },
  bindMessages: function (e) {
    console.log("bindMessages:==", e)
    this.shareData = e.detail.data[e.detail.data.length - 1]
  },
})

1.2. H5跳微信小程序

??H5 往微信小程序跳轉(zhuǎn)需要借助微信 JS-SDK （官方文檔），官方提供的是引入 js 文件的方式來使用微信 JS-SDK；當(dāng)然在 vue 的項目里我們還可以以依賴的方式來安裝：weixin-js-sdk；

1.2.1. 內(nèi)嵌H5跳轉(zhuǎn)到微信小程序

??這種不需要配置，直接就可以通過微信 sdk 提供的方法來實現(xiàn)跳轉(zhuǎn)；注意：只能跳轉(zhuǎn)回當(dāng)前小程序；

wx.miniProgram.navigateTo({url:''})
wx.miniProgram.navigateBack({url:''})
wx.miniProgram.switchTab({url:''})
wx.miniProgram.reLaunch({url:''})
wx.miniProgram.redirectTo({url:''})

1.3. 微信小程序傳值給內(nèi)嵌H5

??小程序直接通過修改 web-view 的 src 屬性就行了，將需要傳遞的參數(shù)拼接在路徑上，H5 頁面之間通過 query 來拿參數(shù)；

//其他小程序頁面
let url = 'xxxx?name=xxx&number=123';
uni.navigateTo({
	url: `/pages/webview/webview?url=${url}`
})

1.4. 內(nèi)嵌H5傳值給微信小程序

??以下兩種方式都需要在 H5 的 index.html 頁面引入下面 js：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

1.4.1. 用 postMessage

??在 web-view 組件上有一個屬性 bindmessage ，網(wǎng)頁向小程序 postMessage 時會觸發(fā)并接收消息；

//web-view
<web-view :src="url" @message="getMessage"></web-view>
export default{
	data(){
		return{
			url:''
		}
	},
	onLoad(option){
		this.url = option.url
	}
	methods:{
		getMessage(e){
			//接收參數(shù)，也可以跳轉(zhuǎn)到小程序其他頁面將參數(shù)傳遞過去
			console.log(e.detail)
		}
	}
}

//H5頁面
wx.miniProgram.postMessage({ data: {name: 'xxx'} })

1.4.2. 路徑傳參

??調(diào)用微信 wx.miniProgram API 跳轉(zhuǎn)到小程序頁面時，通過路徑拼接把參數(shù)傳遞過去；

wx.miniProgram.navigateTo({
  url："/pages/xxx/xxx/xxx?name=xxx"
});

文章來源地址http://www.zghlxwxcb.cn/news/detail-787472.html

到了這里，關(guān)于微信小程序和H5之間互相跳轉(zhuǎn)、互相傳值的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！