uniapp implements the scan function and jumps to the page after successfully scanning the code.

uniapp officially provides relevant APIs to implement the function of jumping to web pages (h5). It is a very common function development in the development of small programs. The api used by this function uni.scanCode

The detailed steps are as follows:

1. Find the scan code icon in the ui library, taking uViewUI as an example

Bind the click event @click

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

2. Process logic in event clickScan

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

3. Write a component in the src folder, which I define as webpage

4. Add this component page in pages.json

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

5. Go to the component page and complete the rendering of the network link.

• Use the onLoad hook in uniapp to obtain the parameters carried when jumping to the previous page. Just in the logic processing, when jumping to the component, a network link is carried.
• Give the network link to the src in the data, and then use Vue's data binding to bind it to the src attribute of the web-view.
• Note here: The web-view component is used to render the page, which is explained in detail on the uniapp official website; give the network link to the src attribute, so that a whole page is realized, which is the web page I want to jump to.

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

That's it, it's over

Original source: https://blog.csdn.net/lll12366123/article/details/131107819