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

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

详细步骤如下：

1.在ui库中找到扫码icon，以uViewUI为例
在这里插入图片描述
绑定点击事件@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

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

猜你喜欢