大家好，又见面了，我是你们的朋友全栈君。
最近项目有个需求，在微信小程序中跳转外部链接完成相关的操作，操作完成后返回微信小程序的相关页面。
1、跳转外部链接（官方文档）
1）入口
代码语言：javascript复制//跳转到入口
wx.navigateTo({url: '../out/out'})2）app.json
代码语言：javascript复制{
"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
代码语言：javascript复制//指向网页的链接
<web-view src="https:www.test.com/h5info"></web-view>注意：外部链接需要到小程序配置业务域名（需要后端协助哦）。
2、从H5页面跳回小程序
1）安装jssdk包，才能调用跳转的方法哦～
代码语言：javascript复制npm install wechat-jssdk --save2）调用方法，亲测有效，这里举一个例子（还有多个详情查看官方文档）
代码语言：javascript复制//同小程序使用方法，url和在小程序的格式一样即可
wx.miniProgram.navigateTo({url: ''})3、小程序跳转H5页面（传参数）
目录结构与上面保持一致。
1) 入口
代码语言：javascript复制wx.navigateTo({url: '../out/out?name=zhangsan'})2）pages/out/out.js
代码语言：javascript复制// pages/out/out.js Page({ /** * 页面的初始数据 */ data: { url:'', }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ url: `https://www.test.com/h5info?name=${options.name}}` }); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, })3) pages/out/out.wxml
代码语言：javascript复制<web-view src="{{url}}"></web-view>4) h5页面，获取参数
代码语言：javascript复制//获取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);（完）
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/167056.html原文链接：https://javaforall.cn
