关键词：
最近又开始写小程序了，刚好遇到微信小程序和内嵌 H5 之间来回跳转，来回交互；这里记录一下微信小程序和 H5 之间交互的实现；（我的小程序是通过 un-app 框架来写的，内部代码基本都是 vue）
文章目录
一、微信小程序跳转 H5
1、web-view
微信小程序官方提供了 web-view 组件来实现微信小程序跳转到 H5 页面，实现的方式也很简单，具体实现方式如下：
1、新建一个页面用来单独存放 web-view 组件，并且所有的内嵌 H5 都可以通过这个页面来实现跳转；
//web-view
<web-view :src="url"></web-view>
export default
data()
return
url:''
,
onLoad(option)
this.url = option.url
其他小程序页面跳转只需要将 H5 的地址拼接在路径上；
//其他小程序页面
let url = 'xxxx';
uni.navigateTo(
url: `/pages/webview/webview?url=$url`
)
二、H5跳微信小程序
H5 往微信小程序跳转需要借助微信 JS-SDK（官方文档），官方提供的是引入 js 文件的方式来使用微信 JS-SDK；当然在 vue 的项目里我们还可以以依赖的方式来安装：weixin-js-sdk；
1、H5 直接跳到微信小程序
可以借助微信 sdk 里面的标签（ wx-open-launch-weapp）直接跳转；不过这种方式需要申请配置：
- 已认证的服务号（公众号），服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
- 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<script type="text/wxtag-template">
<style>.btn padding: 12px </style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
这种方式可以跳转到任何小程序，不过需要用户的点击操作才能跳转，跳转的同时，H5页面可以把需要传递的参数通过 path 路径拼接的方式将参数传递过去；
可参考：开发标签说明文档
2、内嵌H5跳转到微信小程序
这种不需要配置，直接就可以通过微信 sdk 提供的方法来实现跳转；注意：只能跳转回当前小程序；
wx.miniProgram.navigateTo(url:'')
wx.miniProgram.navigateBack(url:'')
wx.miniProgram.switchTab(url:'')
wx.miniProgram.reLaunch(url:'')
wx.miniProgram.redirectTo(url:'')
完整的操作应该是：
//先判断当前环境是小程序环境
wx.miniProgram.getEnv(function(res)
if(res.miniprogram)
//跳转到小程序页面
wx.miniProgram.navigateTo(
url:"/pages/xxx"
)
)
三、微信小程序传值给内嵌H5
1、路径传参
小程序直接通过修改 web-view 的 src 属性就行了，将需要传递的参数拼接在路径上，H5 页面之间通过 query 来拿参数；
//其他小程序页面
let url = 'xxxx?name=xxx&number=123';
uni.navigateTo(
url: `/pages/webview/webview?url=$url`
)
四、内嵌H5传值给微信小程序
以下两种方式都需要在 H5 的 index.html 页面引入下面 js：
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
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' )
2、路径传参
调用微信 wx.miniProgram API 跳转到小程序页面时，通过路径拼接把参数传递过去；
wx.miniProgram.navigateTo(
url："/pages/xxx/xxx/xxx?name=xxx"
);
微信小程序h5页面跳转小程序（超详细讲解）(代码片段)
...式分为云函数跳转和开放性标签跳转。开放性标签是针对微信里面浏览器使用的，而云函数跳转在外部以及微信里面都可以使用。建议需要的同学先全部浏览一遍本文。内容较长较为啰嗦。一、不用开放性标签（wx-open-lau... 查看详情
微信小程序webview内页面分享(代码片段)
需求：微信小程序内部使用webview嵌套了h5页面，现在要添加一个新的功能，用户在哪个页面进行了分享，被分享的用户从链接进来就跳转到哪个分享页面。由于webview内部页面无法直接调起小程序的转发，所以为了实现webview中的... 查看详情
微信小程序（视图与逻辑）(代码片段)
微信小程序1、小程序--视图与逻辑1.1页面导航1.2页面事件1.3生命周期1.4WXS脚本1、小程序–视图与逻辑1.1页面导航页面导航指页面之间的相互跳转小程序实现页面导航的两种方式：声明式导航在页面上声明一个<navigator>导... 查看详情
h5打开微信小程序带参数
参考技术Ah5打开微信小程序带参数还是版本低的原因，升级版本就可以了。 参考技术B我们可能希望在h5网页中点击按钮或者图片跳转小程序任意页面；也就是说H5链接带参数跳转微信小程序。 查看详情
微信小程序webview内h5多级跳转没有返回键问题
参考技术A我们可以在H5页面使用jssdk中H5页面跳转到小程序页面的方法wx.miniProgram.navigateTo，然后再携带一个url参数 查看详情
#yyds干货盘点#愚公系列2022年11月微信小程序-导航(跳转)(代码片段)
前言1.navigatornavigator是页面跳转的标签，具体参数如下：属性类型默认值必填说明最低版本targetstringself否在哪个目标上发生跳转，默认当前小程序2.0.7urlstring否当前小程序内的跳转链接1.0.0open-typestringnavigate否跳转方式1.0.0deltanumbe... 查看详情
一招解决微信小程序中的h5缓存问题(代码片段)
一招解决微信小程序中的H5缓存问题1、问题描述开发过程中，为了更新代码方便，往往会在小程序中嵌入H5页面。但问题来了，小程序原生代码更新版本后，简单的从微信中删除或者代码强刷就可以解决缓存问题&#... 查看详情
webview嵌入h5页面互相通信
...定小程序某个页面（如首页）第一步：H5页面引入小程序微信sdk第二步：第三步：小程序新建一个页面调用webview组件（暂时用ip地址测试，上线请配置业务域名等信息）h5跳转小程序就是这么简单，但有一点要注意，那就是h5页面... 查看详情
微信小程序如何跳转到另一个小程序？(代码片段)
...要得东西： 跳转目标小程序的APPID 使用微信小程序API（wx.navigateToMiniProgram）一、如何获取目标小程序APPID（如已知目标小程序appid可直接阅读第二步） &nbs 查看详情
微信小程序--如何在两个页面之间传值
参考技术A你看，在这个出发城市和目的地城市这两个搜索框点击了之后都跳转了页面，这也就意味着我们在这个工程项目里要新建两个文件夹。拿出发城市为例，原页面名字叫productList.wxml，点击了出发城市的搜索框之后跳转到... 查看详情
uniapp微信小程序外壳内联h5实现支付(代码片段)
业务场景：用户有现成的微信H5应用（有微信支付）。用户想要一个一摸一样的小程序版本，但是又不想高成本去重新开发，所以可以考虑采用小程序的web-view组件内联现有的微信H5应用（哇简直不要再偷懒... 查看详情
uniapp微信小程序跳转h5后video自动播放
参考技术A1.在跳转到H5上面 autoplay无效。2.网上搜索过各种方法，目前各大厂也需要用户点击方可播放，但是如果加上muted=true静音播放，在跳转过来变可以自动播放了。但是需要手动来开启声音。还是不推荐使用，通常处于... 查看详情
微信小程序跳转的探索——开放标签为什么存在？(代码片段)
1、有哪些途径可以拉起小程序？微信开放标签小程序链接URLScheme小程序链接URLLinkAPP拉起小程序2、各种途径的示例URLScheme示例URLLink和微信开放标签示例查看第二个示例和官方文档，可以看到，URLLink就是在微信外用URLS... 查看详情
《微信小程序跳转页面安卓闪现两次》(代码片段)
背景为适应需求变化，跳转新的页面，增添逻辑后发现跳转页面闪现两次，核心代码如下：exportconstonViewGoods=(obj,opts,ckType)=>if(jumpLink==='/xx/xx/xx')wxRouter.navigateTo(url:jumpLink, 查看详情
微信小程序系列：一携带参数跳转半屏微信小程序先a-＞b后b-＞a(代码片段)
一.前言hello，打算以后弄个微信小程序的常用技巧的文章系列，这是第一篇~以后会持续更二.概念普通的小程序里跳转其它小程序大家都知道，用wx.navigateToMiniProgram，而跳半屏的小程序比较少，是用wx.openEmbedded... 查看详情
微信小程序延时执行延时跳转(代码片段)
在微信小程序开发中，经常会遇到这样的需求：当用户操作后，我们需要先提醒用户操作成功，然后再进行页面跳转，这时候我们就需要用到setTimeout()来实现。success(res)wx.showToast(title:'修改成功',icon:'s... 查看详情
微信小程序延时执行延时跳转(代码片段)
在微信小程序开发中，经常会遇到这样的需求：当用户操作后，我们需要先提醒用户操作成功，然后再进行页面跳转，这时候我们就需要用到setTimeout()来实现。success(res)wx.showToast(title:'修改成功',icon:'s... 查看详情
微信小程序web-view与h5通信方式探索(代码片段)
...程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。需求微信小程序H5混合开发就是在一个小程序中，采用部分小程序原生页面，部分通过Webview内嵌H5页面¹... 查看详情