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

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

详细步骤如下：

1.在ui库中找到扫码icon，以uViewUI为例

绑定点击事件@click

1

2. 在事件clickScan中处理逻辑

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

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

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

        {
			"path": "pages/webpage/index",
			"style": {
				"navigationBarTitleText": "详情",
				"navigationBarTextStyle": "black",
				"app-plus": {
					"popGesture": "none"
				}
			}
		}
1
2
3
4
5
6
7
8
9
10

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

到此，完结

原文出处：https://blog.csdn.net/lll12366123/article/details/131107819