微信小程序和H5之间互相跳转、互相传值

小程序 0

  微信小程序和内嵌 H5 之间来回跳转,来回交互。

1 微信小程序跳转 H5

1.2. web-view

  微信小程序官方提供了 web-view 组件来实现微信小程序跳转到 H5 页面,实现的方式也很简单,具体实现方式如下:
1、新建一个页面用来单独存放 web-view 组件,并且所有的内嵌 H5 都可以通过这个页面来实现跳转;
(1)myWeb.wxml

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

(2)myWeb.js

const spConstant = require('../../public/js/spConstant');const app = getApp()Page({  /**   * 页面的初始数据   */  data: {    webUrl: ''  },  onLoad(options) {    var that = this    if (options.params == '您没有进入系统权限!') {      app.data.isRelogin = true      wx.showToast({        title: '您没有进入系统权限!',        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"      });    }  },  /**   * 接收参数,也可以跳转到小程序其他页面将参数传递过去   */  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 往微信小程序跳转需要借助微信 JS-SDK (官方文档),官方提供的是引入 js 文件的方式来使用微信 JS-SDK;当然在 vue 的项目里我们还可以以依赖的方式来安装:weixin-js-sdk;

1.2.1. 内嵌H5跳转到微信小程序

  这种不需要配置,直接就可以通过微信 sdk 提供的方法来实现跳转;注意:只能跳转回当前小程序;

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

1.3. 微信小程序传值给内嵌H5

  小程序直接通过修改 web-view 的 src 属性就行了,将需要传递的参数拼接在路径上,H5 页面之间通过 query 来拿参数;

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

1.4. 内嵌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 ,网页向小程序 postMessage 时会触发并接收消息;

//web-view<web-view :src="url" @message="getMessage"></web-view>export default{	data(){		return{			url:''		}	},	onLoad(option){		this.url = option.url	}	methods:{		getMessage(e){			//接收参数,也可以跳转到小程序其他页面将参数传递过去			console.log(e.detail)		}	}}
//H5页面wx.miniProgram.postMessage({ data: {name: 'xxx'} })

1.4.2. 路径传参

  调用微信 wx.miniProgram API 跳转到小程序页面时,通过路径拼接把参数传递过去;

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

在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/2dcc9c8a93d94e8b8762f3e50881ade4.png
在这里插入图片描述

也许您对下面的内容还感兴趣: