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

最新推荐文章于 2024-06-28 10:31:26 发布

玲～～

最新推荐文章于 2024-06-28 10:31:26 发布

阅读量4k

点赞数 1

分类专栏：知识点总结文章标签：小程序

本文链接：https://blog.csdn.net/violin256/article/details/109120219

版权

知识点总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

1、跳转外部连接
2、外部连接跳回微信小程序
- 2.1 显示的HTML增加微信 JSSDK 的js代码
- 2.2 如若是2.1用的是 wx.miniProgram.postMessage,会触发 web-view api 的 bindmessage 方法，在bindmessage 中跳转到小程序对应的页面。

官方文档
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>

page2代码
page2.wxml

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

page2.js
主要代码

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

玲～～

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
微信小程序跳转到外部连接和外部链接跳回小程序

微信小程序跳转到外部连接和外部链接跳回小程序1、跳转外部连接1.1、新建一个页面wxml存放web-view组件（page1）1.2需要跳转的页面，跳转到page11.3添加业务域名1.3.1在域名服务器根目录上传微信验证文件1.3.2添加业务域名2、外部连接跳回微信小程序2.1 显示的HTML增加微信 JSSDK 的js代码2.2 如若是2.1用的是 wx.miniProgram.postMessage,会触发 web-view api 的 bindmessage 方法，在bindmessage 中跳转到
复制链接

扫一扫

专栏目录