微信小程序在底部导航栏使用扫一扫功能【代码可用】

微信小程序在底部导航栏使用扫一扫功能

解决方案
- uni-app
- 微信原生代码

在家躺着也能遇到奇奇怪怪的需求，这不，需要在微信小程序底部的导航栏中加一个扫一扫功能⭐╮（￣﹏￣）╭⭐。

解决方案

在导航栏的页面只会加载一次，需要使用其他方式解决。
在onshow内加载扫一扫功能？恭喜你写出了一个令人抓狂的扫一扫功能，启用它会陷入扫一扫循环中。
最简单的解决方案就是在onshow、onhide做一个判断变量，在页面打卡与关闭之间做一个切换。

uni-app

<script>export default {data() {return {on: true}},methods: {},onLoad() {},onShow() {var that = thisif (that.on) {uni.scanCode({success: function(res) {console.log('条码类型：' + res.scanType);console.log('条码内容：' + res.result);...},fail: (err) => {console.log(err, 'fail')wx.switchTab({url: '/pages/index/index',})}});}},onHide: function() {this.on = !this.on},}
</script>

微信原生代码

 data: {on: true},onShow: function () {console.log('onShow')var that = thisif (that.data.on) {var call = that.data.callwx.scanCode({success: (res) => {console.log('条码类型：' + res.scanType);console.log('条码内容：' + res.result);...},fail: (err) => {console.log(err, 'fail')wx.switchTab({url: '/pages/index/index',})}})}},onHide: function () {var that = thisvar on = that.data.onthat.setData({on: !on})},

微信小程序在底部导航栏使用扫一扫功能【代码可用】相关推荐

微信小程序添加底部导航栏
我们平时上微信可以看到,微信的底部是4个导航栏选项进行切换的,我们自己开发小程序时,如果要添加像微信那样的底部导航栏的话,其实实现方式非常简单,便捷. 在微信小程序开发IDE中,我们新建一个小程序项目 ...
微信小程序实现底部导航栏tabbar
参考链接: (1)微信小程序底部导航Tabbar https://www.cnblogs.com/huangjialin/p/6278429.html (2)小程序自定义tabbar实现中间图标突出效 ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
html导航栏代码跳转,微信小程序自定义底部导航栏tabBar（含跳转页面wx.navigateTo）...
一.app.json配置这里配置 {"pages": ["pages/usersLists/usersLists","pages/addMember ...
你会微信小程序自定义底部导航栏吗？
一. 在目录下创建文件如下图: tabbar.js: // pages/tabbar/tabbar.js const app = getApp(); Component({/*** 组件的属性列表*/ ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）
设置标题栏标题栏window 在app.json文件里面,通过window对象里面的属性进行设置示例: app.json: 运行: 设置导航栏导航栏TabBar 如果我们的小程序是一个多 tab ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...

微信小程序在底部导航栏使用扫一扫功能【代码可用】

微信小程序在底部导航栏使用扫一扫功能

解决方案

uni-app

微信原生代码

微信小程序在底部导航栏使用扫一扫功能【代码可用】相关推荐

最新文章

热门文章