Uniapp连接iBeacon设备——实现无线定位与互动体验(实现篇)

简介: Uniapp连接iBeacon设备——实现无线定位与互动体验(实现篇)
export default {
        data() {
            return {
                iBeaconDevices: [], // 存储搜索到的iBeacon设备
                deviceId: [],
                data: [],
                url: getApp().globalData.url,
                innerAudioContext: null,
                num: 0, //秒
                int: null, //定时器
                duration: '111', //总时长
                isSliderDisabled: false,
                status: false,
                audio_status: false,
                type: 2
            }
        },
        // 下拉刷新
        onPullDownRefresh() {
            try {
                this.explain()
                uni.stopPullDownRefresh(); //停止刷新
            } catch (e) {}
        },
        onLoad() {
            this.explain()
        },
        methods: {
            play() {
                if (!this.status) {
                    this.int = setInterval(() => {
                        this.num++
                    }, 1000)
                    this.status = true
                    this.change({
                        detail: {
                            value: this.num
                        }
                    })
                } else {
                    this.status = false
                    clearInterval(this.int)
                    this.innerAudioContext.pause()
                }
            },
            change(e) {
                if (this.status) {
                    this.isSliderDisabled = true;
                    this.num = e.detail.value;
                    this.innerAudioContext.seek(e.detail.value)
                    setTimeout(() => {
                        this.innerAudioContext.play()
                        this.isSliderDisabled = false;
                    }, 500)
                }
            },
            box(deviceid) {
                console.log(deviceid, 99909);
                let that = this
                uni.openBluetoothAdapter({ //蓝牙初始化
                    success(res) {
                        uni.getLocation({
                            success(res) {
                                uni.startBeaconDiscovery({ //搜索蓝牙设备
                                    uuids: deviceid,
                                    success(res) {
                                        console.log(res, 888);
                                        uni.onBeaconUpdate((res) => { //监听蓝牙搜索到的设备
                                            console.log(res, 999);
                                            uni.hideLoading()
                                            that.type = 1
                                        })
                                    },
                                    fail(res) {
                                        console.log('暂未搜索到蓝牙设备', res);
                                        uni.showToast({
                                            title: '暂未搜索到蓝牙设备,请下拉刷新',
                                            icon: 'none'
                                        })
                                    }
                                })
                            },
                            fail(res) {
                                uni.showToast({
                                    title: '请打开位置信息,并下拉刷新',
                                    icon: 'none'
                                })
                            }
                        })
                    },
                    fail(res) {
                        console.log('蓝牙未打开', res);
                        uni.showToast({
                            title: '请打开蓝牙,并下拉刷新',
                            icon: 'none'
                        })
                    }
                })
            },
            async explain() {
                uni.showLoading({
                    title: '加载中...'
                })
                const res = await explain({
                    scenic_id: 3
                })
                this.data = res.data
                if (!this.audio_status) {
                    this.innerAudioContext = uni.createInnerAudioContext()
                    this.innerAudioContext.src = this.url + this.data[0].audio;
                    this.innerAudioContext.onCanplay(() => {
                        // 获取音频总时长,单位为秒
                        this.duration = this.innerAudioContext.duration
                        console.log('音频总时长:', this.innerAudioContext.duration, 9)
                    })
                }
                this.audio_status = true
                this.box([(res.data[0].deviceid)])
            }
        },
相关文章
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的小型医院医疗设备管理系统附带文章源码部署视频讲解等
59 6
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的教学仪器设备销售网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的教学仪器设备销售网站附带文章源码部署视频讲解等
35 1
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的实验室设备管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的实验室设备管理系统附带文章和源代码部署视频讲解等
47 9
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的餐饮掌上设备点餐系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的餐饮掌上设备点餐系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的设备配件管理和设备检修的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的设备配件管理和设备检修的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的农业设备租赁系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的农业设备租赁系统附带文章源码部署视频讲解等
39 0
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的工厂生产设备维护管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的工厂生产设备维护管理系统附带文章和源代码部署视频讲解等
28 0
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的学生宿舍设备报修管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的学生宿舍设备报修管理系统附带文章和源代码部署视频讲解等
43 0
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的设备故障报修管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的设备故障报修管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
测试技术 数据安全/隐私保护 Java
基于SpringBoot+Vue+uniapp的学生宿舍设备报修管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的学生宿舍设备报修管理系统的详细设计和实现(源码+lw+部署文档+讲解等)