最近項目有個需求，在微信小程序中跳轉(zhuǎn)外部鏈接完成相關(guān)的操作，操作完成后返回微信小程序的相關(guān)頁面。

1、跳轉(zhuǎn)外部鏈接(官方文檔)

1)入口

//跳轉(zhuǎn)到入口

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

//指向網(wǎng)頁的鏈接

注意：外部鏈接需要到小程序配置業(yè)務(wù)域名(需要后端協(xié)助哦)。

2、從H5頁面跳回小程序

1)安裝jssdk包，才能調(diào)用跳轉(zhuǎn)的方法哦～

npm install wechat-jssdk --save

2)調(diào)用方法，親測有效，這里舉一個例子(還有多個詳情查看官方文檔)

//同小程序使用方法，url和在小程序的格式一樣即可

wx.miniProgram.navigateTo({url: ''})

3、小程序跳轉(zhuǎn)H5頁面(傳參數(shù))

目錄結(jié)構(gòu)與上面保持一致。

1)? 入口

wx.navigateTo({url: '../out/out?name=zhangsan'})

2)pages/out/out.js

//pages/out/out.js

Page({/**

* 頁面的初始數(shù)據(jù)*/data: {

url:'',

},/**

* 生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad:function(options) {this.setData({

url: `https://www.test.com/h5info?name=${options.name}}`

});

},/**

* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成*/onReady:function() {

},/**

* 生命周期函數(shù)--監(jiān)聽頁面顯示*/onShow:function() {

},/**

* 生命周期函數(shù)--監(jiān)聽頁面隱藏*/onHide:function() {

},/**

* 生命周期函數(shù)--監(jiān)聽頁面卸載*/onUnload:function() {

},/**

* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作*/onPullDownRefresh:function() {

},/**

* 頁面上拉觸底事件的處理函數(shù)*/onReachBottom:function() {

},/**

* 用戶點擊右上角分享*/onShareAppMessage:function() {

},

})

3)? pages/out/out.wxml

4)? h5頁面，獲取參數(shù)

//獲取url參數(shù)

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;

}//調(diào)用

const name = getParams(name);

(完)

總結(jié)

以上是生活随笔為你收集整理的微信小程序html文章添加跳转链接,微信小程序跳转外部链接（h5页面）以及数据交互...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。