devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序跳转到外部连接和外部链接跳回小程序_微信小程序外部链接怎么回到小程序当前页面

作者：从前慢现在也慢 | 2024-02-16 22:04:48

赞

踩

微信小程序外部链接怎么回到小程序当前页面

微信小程序跳转到外部连接和外部链接跳回小程序

官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

1、跳转外部连接

1.1、新建一个页面wxml存放web-view组件（page1）

该组件 SRC 填写外部链接 url

1.2需要跳转的页面，跳转到page1

用
navigator（<navigator url="url"> sdsad</navigator>）
或者
wx.navigateTo或其它等效页面跳转方法

1.3添加业务域名

需登录小程序管理后台配置业务域名。
按照官方流程总结如下步骤

1.3.1在域名服务器根目录上传微信验证文件

1.3.2添加业务域名

2、外部连接跳回微信小程序

在1的基础上，web-view显示的html文件，需要增加支持微信JSSDK的js代码

代码流程

2.1 显示的HTML增加微信 JSSDK 的js代码

2.2 如若是2.1用的是 wx.miniProgram.postMessage,会触发 web-view api 的 bindmessage 方法，在bindmessage 中跳转到小程序对应的页面。

如
test.html是外部连接显示的内容，点击按钮跳回到微信小程序页面page2（“/page/page2/page2”）

test.html代码

<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button onclick="jump()">测试点击</button>
<script type="text/javascript" 
src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> 
<script> 
function jump(){
    console.log("外部连接");
    wx.miniProgram.postMessage({ 
        data: {
         link: "test"
        });
    }


</script>

<body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

page2代码
page2.wxml

<web-view src="https://yourWeb.com/test.html" bindmessage="postMessage">
</web-view>

  • 1
  • 2

page2.js
主要代码

postMessage:function(options){
        console.log("bindmessage",options);
        wx.navigateTo({
            url:  `/pages/page2/page2`,
          })
    
    },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/97130
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号