失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 微信小程序跳转到外部连接和外部链接跳回小程序

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

时间:2023-08-30 15:51:43

相关推荐

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

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

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 中跳转到小程序对应的页面。

官方文档

https://developers./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./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="/test.html" bindmessage="postMessage"></web-view>

page2.js

主要代码

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

如果觉得《微信小程序跳转到外部连接和外部链接跳回小程序》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。