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

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

解决方案

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

uni-app

<script>
	export default {
		data() {
			return {
				on: true
			}
		},
		methods: {
		},
		onLoad() {
		},
		onShow() {
			var that = this
			if (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 = this
    if (that.data.on) {
      var call = that.data.call
      wx.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 = this
    var on = that.data.on
    that.setData({
      on: !on
    })
  },