微信小程序html文章添加跳转链接,微信小程序跳转外部链接（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
//指向網頁的鏈接
注意：外部鏈接需要到小程序配置業務域名(需要后端協助哦)。
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://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
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);
(完)
總結
以上是生活随笔為你收集整理的微信小程序html文章添加跳转链接,微信小程序跳转外部链接（h5页面）以及数据交互...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 图象关于y轴对称是什么意思_函数图象关于
- 下一篇： 安全模式怎么更改计算机用户,电脑怎么关闭