CONTACT US
联系信息
选择适合您的沟通方式
咨询时间:7:00-23:00
你可能遇到了下面的问题
关闭右侧工具栏
微信小程序webview如何检测a链接并跳转到二级页面?
  • 作者:杭谐科技
  • 发表时间:2018-01-03 13:30
  • 来源:未知

第一步:
在网页的底部添加以下js代码(需引入jquery)

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
<script type="text/javascript">
$(function(){
$("a").each(function(){
var ahref=$(this).attr("href");
if(isContains(ahref,"/mobile/")==true && isContains(ahref,"membercard.hzappkf.com")==false){
ahref = "https://membercard.hzappkf.com" + ahref;
}else if(isContains(ahref,"/mobile/")==false && isContains(ahref,"membercard.hzappkf.com")==false){
ahref = "https://membercard.hzappkf.com/mobile/" + ahref;
}else{
ahref="https://membercard.hzappkf.com/mobile/index.php";
}
$(this).attr("href","javascript:gotoView('"+ahref+"');");
});
});
function isContains(str, substr) {
    return str.indexOf(substr) >= 0;
}
function gotoView(action){
wx.miniProgram.navigateTo({url:'/pages/common/common?url='+encodeURIComponent(action)});
}
</script>
说明:检测页面上面所有的a链接,并自动加入域名,然后替换为微信小程序所支持的页面跳转链接写法。注意:必须url encode

第二步:
微信小程序上,创建一个公共页面:
common.wxml

<view class='holderview'>
<view class='loadingview'>
<view><image/></view>
<view>载入中..</view>
</view>
</view>
<web-view src="{{url}}"></web-view>

common.js
Page({
data: {
url: ""
},
onLoad: function (options) {
var that = this
var url = decodeURIComponent(options.url)
that.setData({
url: url
})
},
onReady: function () {
 
},
onShow: function () {
 
},
onHide: function () {
 
},
onUnload: function () {
 
},
onPullDownRefresh: function () {
 
},
onReachBottom: function () {
 
},
onShareAppMessage: function () {
 
}
})
说明:比如a页面加载了webview。在a页面的url网页a链接全部转化为微信小程序链接后,点击链接即可跳转入:common.wxml页面