游戏周边产品 做网站,网站免费制作平台,网站建设致谢,房产网站怎么建设微信小程序和内嵌 H5 之间来回跳转#xff0c;来回交互。
1 微信小程序跳转 H5
1.2. web-view 微信小程序官方提供了 web-view 组件来实现微信小程序跳转到 H5 页面#xff0c;实现的方式也很简单#xff0c;具体实现方式如下#xff1a; 1、新建一个页面用来单独存放 we… 微信小程序和内嵌 H5 之间来回跳转来回交互。
1 微信小程序跳转 H5
1.2. web-view 微信小程序官方提供了 web-view 组件来实现微信小程序跳转到 H5 页面实现的方式也很简单具体实现方式如下 1、新建一个页面用来单独存放 web-view 组件并且所有的内嵌 H5 都可以通过这个页面来实现跳转 1myWeb.wxml
web-view src{{webUrl}} bindmessagebindMessages/web-view2myWeb.js
const spConstant require(../../public/js/spConstant);
const app getApp()
Page({/*** 页面的初始数据*/data: {webUrl: },onLoad(options) {var that thisif (options.params 您没有进入系统权限!) {app.data.isRelogin truewx.showToast({title: 您没有进入系统权限!,icon: none})setTimeout(function () {wx.switchTab({url: ../home/home,})}, 1000)} else if (options.params 登录失效) {app.data.isRelogin truewx.showToast({title: 登录失效,icon: none})setTimeout(function () {wx.switchTab({url: ../home/home,})}, 1000)} else {var webUrl options.webUrlthat.setData({webUrl: webUrl ?applettruetoken wx.getStorageSync(spConstant.SP_TOKEN) userId wx.getStorageSync(spConstant.SP_USER_ID)//webUrl: http://120.224.9.76:18080/app/html/activity-add.html?applettrue});}},/*** 接收参数也可以跳转到小程序其他页面将参数传递过去*/postMessage(e) {console.log(ewferferg, e)app.data.isRelogin truewx.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?namexxxnumber123;
uni.navigateTo({url: /pages/webview/webview?url${url}
})1.4. 内嵌H5传值给微信小程序 以下两种方式都需要在 H5 的 index.html 页面引入下面 js
script typetext/javascript srchttps://res.wx.qq.com/open/js/jweixin-1.3.2.js/script1.4.1. 用 postMessage 在 web-view 组件上有一个属性 bindmessage 网页向小程序 postMessage 时会触发并接收消息
//web-view
web-view :srcurl messagegetMessage/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?namexxx
});