实现h5和微信小程序互相跳转

yx_back

已于 2025-02-27 15:32:30 修改

阅读量4.8k

点赞数 8

CC 4.0 BY-SA版权

分类专栏：小程序前端文章标签：微信小程序小程序

于 2024-12-30 15:58:03 首次发布

本文链接：https://blog.csdn.net/yx_back/article/details/144827317

文章目录

h5跳转小程序
云开发静态网站跳转小程序

h5跳转小程序

小程序内打开h5

这个只需要用web-view标签即可，
可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。

<web-view src="https://www.baidu.com" bindload="bindload" binderror="binderror"></web-view>

参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

小程序内h5返回小程序

返回指定页面即可

wx.miniProgram.navigateTo({
   url: '/path/to/page'})

参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

h5 跳转到小程序（微信环境）

1、使用wx-open-launch-weapp标签
它依赖于微信 JS-SDK 的支持，因此只能在微信环境中使用。需要进行签名校验

注意微信按钮的style不好调整，所以我们将它设置为宽度100%，高度适合的一条透明按钮，再将自己所需要的按钮样式写在同样的位置。

<div style="position: relative;width: 100%;height: 3rem;">
   	//需要的按钮样式，以绝对定位放在微信跳转按钮的相同位置
  <van-button  style="position: absolute;top:1rem">打开小程序</van-button >
    //微信跳转按钮
   <wx-open-launch-weapp
       style="position: absolute;top: 0"
       id="launch-btn"
       appid="wx12345678"
  	   username="小程序原始id，即小程序对应的以gh_开头的id"
  	   path="pages/home/index?user=123&action=abc"
      referrerinfo="{'key1':'value1','key2':'value2'}"  <!-- 可选参数，传递额外信息给小程序 -->
    >
     <script type="text/wxtag-template">

最低0.47元/天解锁文章