uniapp 实现扫码成功获取内容并跳转页面功能

uniapp 提供了一个方法 直接调用就ok 

uni.scanCode(OBJECT)

先绑定一个点击事件

<view @click="clickScan"> 扫一扫</view>

在点击事件当中处理

检查并请求相机权限

// 点击扫一扫
			clickScan() {
				// 检查并请求相机权限
				uni.authorize({
				  scope: 'scope.camera',
				  success() {
				    // 用户已授权，可以继续调用uni.scanCode
				    uni.scanCode({
					  // scanType: ['barCode'],
				      success: (res) => {
				        console.log('扫码结果：' + res.result);
						// res中包含二维码中的信息，其中就有网络链接
						// 使用navigateTo跳转，并且携带参数，参数为二维码中的链接
						uni.navigateTo({
							// 这里注意，此地址只是自己提前写好的，并且路径前面一定要加/
							url: '/pages/echart/echart?link='+ res.result
						})
				      },
				      fail: (err) => {
				        console.error('调用失败：' + err);
				      }
				    });
				  },
				  fail() {
				    // 用户拒绝授权，引导用户开启
				    uni.showModal({
				      title: '提示',
				      content: '此功能需要摄像头权限，请设置打开权限',
				      success: (modalRes) => {
				        if (modalRes.confirm) {
				          uni.openSetting();
				        }
				      }
				    });
				  }
				});
			}

		},

uni.scanCode(OBJECT)参数说明 可根据不同需求配置参数

在pages.json中添加该跳转后页面

{
            "path" : "pages/echart/echart",
            "style" :                                                                                   
            {
                "navigationBarTitleText": "详情",
				"enablePullDownRefresh": false
            }
            
        }

在跳转页面种使用uniapp中onLoad钩子获取到上一个页面跳转过来时携带的参数

<script>
export default{
    data() {
        return {
            date: ''
        }
    },
    onLoad(option) {
        console.log(option.link)
        this.date= option.link
    }
}
</script>
 
<template>
   <view>{
   
   {date}}</view>
</template>

扫描二维码关注公众号，回复： 17516645 查看本文章