uniapp-uni.scanCode调用扫一扫功能(整理)

简介: uniapp-uni.scanCode调用扫一扫功能(整理)

官方地址:https://uniapp.dcloud.io/api/system/barcode.html

<template>
  <view class="scanCodeBox">
    <image class='imgCode' src="../static/code.png" mode="" @click="scanCode"></image>
    <view class="desc">
      扫一扫
    </view>
  </view>
</template>
<script>
  export default {
    methods: {
      // 点击扫一扫按钮
      scanCode() {
        uni.scanCode({
          success: (res) => {
            console.log('扫码成功', res)
          },
          fail: (err) => {
            console.log('扫码失败', err)
          },
          complete: () => {
            console.log('扫码结束')
          }
        })
      },
    }
  }
</script>
var that = this
 // 只允许从相机扫码
 wx.scanCode({
   onlyFromCamera: true,
   scanType: ['qrCode'],
   success(res) {
     console.log(res)
     if (res.path) {//合法本小程序路径
       var str = res.path
       var index = str.indexOf("=");//截取=符号后面的字符串
       var scene = str.substr(index + 1, str.length); //获得=符号后面所有字符
       var type = parseInt(scene[0])
       // console.log(type)
       //console.log(scene[2])
       if (type == 3) {
         that.setData({
           oil_station_id: scene[2]
         })
        //执行获得参数后的操作
       }
     }
   }
 })
//decodeURIComponent解析生成二维码的链接。
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    if (options.scene) {
     //获取二维码的携带的链接信息
      let qrUrl = decodeURIComponent(options.scene)
      console.log(qrUrl)
      this.setData({
        //获取链接中的参数信息
        name: utils.getQueryString(qrUrl, 'name'),
        id: utils.getQueryString(qrUrl, 'id'),
      })
    } 
  },
onLoad (option) {
  console.log(option)
  if (option.scene) {
    let obj = decodeURIComponent(option.scene)
    ... // 这里就是你拿着参数obj进行操作
  }
}
相关文章
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
686 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
PHP
全新uniapp小说漫画APP小说源码/会员阅读/月票功能
价值980的uniapp小说漫画APP小说源码/会员阅读/月票功能
724 20
|
JavaScript 数据安全/隐私保护
uniapp功能权限判断$auth.auth $auth.role显示判断生成源码
uniapp功能权限判断$auth.auth $auth.role显示判断生成源码
313 0
|
开发框架 移动开发 前端开发
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
282 7
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现
349 12
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
334 1
|
移动开发 前端开发 JavaScript
uniapp中IO模块(管理本地文件系统)的常用功能封装
uniapp中IO模块(管理本地文件系统)的常用功能封装
2362 1
|
前端开发 JavaScript 索引
uniapp的u-album组件自定义删除功能
这样,你就可以在u-album组件中实现自定义的删除功能了。需要注意的是,这个删除操作只是在前端删除了图片项,并没有在后端删除对应的图片文件,如果你需要在后端也删除对应的图片文件,你还需要在删除操作后发送一个请求到后端,让后端删除对应的图片文件。
344 0
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
174 0

热门文章

最新文章

下一篇
开通oss服务