uniapp实现扫一扫功能，扫码成功后跳转页面

这篇具有很好参考价值的文章主要介绍了uniapp实现扫一扫功能，扫码成功后跳转页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uniapp官方有提供的相关api实现跳转到web网页（h5）的功能，在开发小程序中，是一项很常见的功能开发。该功能使用到的api uni.scanCode

详细步骤如下：

1.在ui库中找到扫码icon，以uViewUI为例
uniapp实现扫一扫功能，扫码成功后跳转页面,uni-app
绑定点击事件@click

<u-icon class="scanIcon" name="scan" size="28" color="white" @click="clickScan"></u-icon>

2. 在事件clickScan中处理逻辑

 // 点击扫一扫
    clickScan() {
      // 使用uniapp提供扫码api
      uni.scanCode({
        scanType: ['qrCode'],
       // 扫码成功后的回调
        success: (res) => {
        // res中包含二维码中的信息，其中就有网络链接
        // 使用navigateTo跳转，并且携带参数，参数为二维码中的链接
          uni.navigateTo({
            // 这里注意，此地址只是自己提前写好的，并且路径前面一定要加/
            url:`/pages/webpage/index?link=${res.result}`
          })
        }
      })
    }

3. 在src文件夹中写一个组件，我定义为webpage

4. 在pages.json中添加该组件页面

        {
			"path": "pages/webpage/index",
			"style": {
				"navigationBarTitleText": "详情",
				"navigationBarTextStyle": "black",
				"app-plus": {
					"popGesture": "none"
				}
			}
		}

5. 来到该组件页面，完成网络链接的渲染

使用uniapp中onLoad钩子获取到上一个页面跳转过来时，携带的参数，刚刚在逻辑处理中，跳转到该组件时，携带了一个网络链接。
将网络链接给到data中的src，然后再使用Vue的数据绑定，绑定到web-view的src属性。
这里注意：渲染页面用到的是web-view组件，在uniapp官网有详解；将网络链接给到src属性，这样就实现了一整个页面，就是我要跳转的web页面。

<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>

到此，完结

原文出处：https://blog.csdn.net/lll12366123/article/details/131107819文章来源地址https://www.toymoban.com/news/detail-727232.html

到了这里，关于uniapp实现扫一扫功能，扫码成功后跳转页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！