思路
1.通過微信的webview實現(xiàn)在小程序頁面顯示外部鏈接
2.webview就相當(dāng)于一個容器,用于承載外部鏈接的頁面
實現(xiàn)
首先在app.json文件的page里加入一個頁面"pages/webview/webview",頁面名字可以自定義
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/webview/webview"
]
ctrl+s保存,微信開發(fā)者工具會生成對應(yīng)頁面的一些配置
接下來在webview.wxml文件里加入
<web-view src="{{url}}"></web-view>
如圖
url字段通過代碼賦值
在index.ts腳本里面,我這里用的是ts,也可以用js,寫一段函數(shù)用于跳轉(zhuǎn)
testUrl(){
wx.navigateTo({
url:'/pages/webview/webview?url=www.baidu.com',
success:(result)=>{
console.log("************ navigateTo success:"+result)
},
fail:()=>{
console.log("************ navigateTo fail:")
},
complete:()=>{
console.log("************ navigateTo complete:")
}
})
}
在index.wxml頁面建個button監(jiān)聽這個函數(shù)
<button bindtap="testUrl" > 跳轉(zhuǎn)外部鏈接</button>
最后在webview.ts腳本里的onLoad加入,onLoad有兩個重載函數(shù)文章來源:http://www.zghlxwxcb.cn/news/detail-522092.html
onLoad(options) {
console.log("*********** web view" + options.url);
let fromPath=decodeURIComponent(options.url);
this.setData({
url:fromPath
})
},
以上,即可跳轉(zhuǎn)
參考:博客文章來源地址http://www.zghlxwxcb.cn/news/detail-522092.html
到了這里,關(guān)于微信小程序打開外部頁面的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!