微信小程序跳转外部链接（h5页面）以及数据交互

微信⼩程序跳转外部链接（h5页⾯）以及数据交互最近项⽬有个需求，在微信⼩程序中跳转外部链接完成相关的操作，操作完成后返回微信⼩程序的相关页⾯。

1、跳转外部链接（）
1）⼊⼝
//跳转到⼊⼝
wx.navigateTo({url: '../out/out'})
2）app.json
{
"pages": [
"pages/main/main",
"pages/logs/logs",
"pages/out/out" ,
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true
},
"sitemapLocation": "sitemap.json"
}
3）新建out⽂件夹
4）pages/out/out.wxml
//指向⽹页的链接
<web-view src="https:/h5info"></web-view>
注意：外部链接需要到⼩程序配置业务域名（需要后端协助哦）。

2、从H5页⾯跳回⼩程序
1）安装jssdk包，才能调⽤跳转的⽅法哦～
npm install wechat-jssdk --save
2）调⽤⽅法，亲测有效，这⾥举⼀个例⼦（还有多个详情查看官⽅⽂档）//同⼩程序使⽤⽅法，url和在⼩程序的格式⼀样即可
wx.miniProgram.navigateTo({url: ''})
3、⼩程序跳转H5页⾯（传参数）
⽬录结构与上⾯保持⼀致。

1) ⼊⼝
wx.navigateTo({url: '../out/out?name=zhangsan'})
2）pages/out/out.js
// pages/out/out.js
Page({
/**
* 页⾯的初始数据
*/
data: {
url:'',
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function (options) {
this.setData({
url: `https:///h5info?name=${}}`
});
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady: function () {
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow: function () {
},
/**
* ⽣命周期函数--监听页⾯隐藏
*/
onHide: function () {
},
/**
* ⽣命周期函数--监听页⾯卸载
*/
onUnload: function () {
},
/**
* 页⾯相关事件处理函数--监听⽤户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页⾯上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* ⽤户点击右上⾓分享
*/
onShareAppMessage: function () {
},
})
3) pages/out/out.wxml
<web-view src="{{url}}"></web-view>
4) h5页⾯，获取参数
//获取url参数
getParams(params) {
const reg = new RegExp("(^|&)" + params + "=([^&]*)(&|$)", "i"); const r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return null;
}
//调⽤
const name = getParams(name);
（完）。