uniapp官方有提供的相關(guān)api實(shí)現(xiàn)跳轉(zhuǎn)到web網(wǎng)頁(yè)（h5）的功能，在開發(fā)小程序中，是一項(xiàng)很常見的功能開發(fā)。該功能使用到的api uni.scanCode
詳細(xì)步驟如下：
1.在ui庫(kù)中找到掃碼icon，以u(píng)ViewUI為例
綁定點(diǎn)擊事件@click
<u-icon class="scanIcon" name="scan" size="28" color="white" @click="clickScan"></u-icon>
2. 在事件clickScan中處理邏輯
// 點(diǎn)擊掃一掃
clickScan() {
// 使用uniapp提供掃碼api
uni.scanCode({
scanType: ['qrCode'],
// 掃碼成功后的回調(diào)
success: (res) => {
// res中包含二維碼中的信息，其中就有網(wǎng)絡(luò)鏈接
// 使用navigateTo跳轉(zhuǎn)，并且攜帶參數(shù)，參數(shù)為二維碼中的鏈接
uni.navigateTo({
// 這里注意，此地址只是自己提前寫好的，并且路徑前面一定要加/
url:`/pages/webpage/index?link=${res.result}`
})
}
})
}
3. 在src文件夾中寫一個(gè)組件，我定義為webpage
4. 在pages.json中添加該組件頁(yè)面
{
"path": "pages/webpage/index",
"style": {
"navigationBarTitleText": "詳情",
"navigationBarTextStyle": "black",
"app-plus": {
"popGesture": "none"
}
}
}
5. 來(lái)到該組件頁(yè)面，完成網(wǎng)絡(luò)鏈接的渲染
- 使用uniapp中onLoad鉤子獲取到上一個(gè)頁(yè)面跳轉(zhuǎn)過(guò)來(lái)時(shí)，攜帶的參數(shù)，剛剛在邏輯處理中，跳轉(zhuǎn)到該組件時(shí)，攜帶了一個(gè)網(wǎng)絡(luò)鏈接。
- 將網(wǎng)絡(luò)鏈接給到data中的src，然后再使用Vue的數(shù)據(jù)綁定，綁定到web-view的src屬性。
- 這里注意：渲染頁(yè)面用到的是web-view組件，在uniapp官網(wǎng)有詳解；將網(wǎng)絡(luò)鏈接給到src屬性，這樣就實(shí)現(xiàn)了一整個(gè)頁(yè)面，就是我要跳轉(zhuǎn)的web頁(yè)面。
<template>
<view>
<web-view :src="src"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
src: ''
}
},
onLoad(option) {
console.log(option.link)
this.src = option.link
},
methods: {
}
}
</script>
<style>
</style>
到此，完結(jié)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-727232.html
原文出處：https://blog.csdn.net/lll12366123/article/details/131107819文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-727232.html
到了這里，關(guān)于uniapp實(shí)現(xiàn)掃一掃功能，掃碼成功后跳轉(zhuǎn)頁(yè)面的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
