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进行操作
  }
}
相关文章
|
7月前
|
移动开发 JavaScript 前端开发
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
【5月更文挑战第15天】Uniapp 和 Flutter 是跨平台开发的热门框架。Uniapp 以其强大的跨平台兼容性和基于 Vue.js 的易学性著称,适合快速开发适用于 iOS、Android 和 H5 的应用。其丰富的组件生态简化了功能集成。然而,在复杂场景下,性能可能不及原生。Flutter 则以其全新渲染引擎实现流畅界面和高度自定义,性能接近原生,但学习成本较高,需处理特定平台适配。适用于高要求的项目。两者各有优势,选择应考虑项目需求、技术储备和开发周期。
852 1
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
|
2月前
|
JavaScript 数据安全/隐私保护
uniapp功能权限判断$auth.auth $auth.role显示判断生成源码
uniapp功能权限判断$auth.auth $auth.role显示判断生成源码
31 0
|
4月前
|
开发框架 移动开发 前端开发
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
82 1
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现
83 12
|
7月前
|
存储 开发框架 自然语言处理
【Uniapp 专栏】Uniapp 的多语言支持功能详解
【5月更文挑战第14天】Uniapp是一款跨平台开发框架,提供强大多语言支持,助力开发者轻松构建支持多种语言的应用,提升用户体验和市场拓展。其特点包括灵活的语言管理、跨平台一致性。通过语言文件存储内容,切换机制让用户自由切换。注重翻译准确性和文化适应性,集成到页面和组件中,同时关注性能优化。面对翻译不一致和更新及时性等问题,Uniapp将持续发展和完善,为全球化应用开发提供强有力支持。
292 3
【Uniapp 专栏】Uniapp 的多语言支持功能详解
|
5月前
|
前端开发 JavaScript 索引
uniapp的u-album组件自定义删除功能
这样,你就可以在u-album组件中实现自定义的删除功能了。需要注意的是,这个删除操作只是在前端删除了图片项,并没有在后端删除对应的图片文件,如果你需要在后端也删除对应的图片文件,你还需要在删除操作后发送一个请求到后端,让后端删除对应的图片文件。
120 0
|
7月前
|
移动开发 前端开发 JavaScript
uniapp中IO模块(管理本地文件系统)的常用功能封装
uniapp中IO模块(管理本地文件系统)的常用功能封装
682 1
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
46 0