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>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值