微信小程序跳转到外部连接和外部链接跳回小程序
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`,})},