小程序中 that和this用法

小程序中 that和this用法,第1张

解决办法 为复制一份this的指向到变量中,这样在函数执行过程中虽然this改变了,但是that还是指向之前的对象

大家知道this是指当前对象,只是一个指针,真正的对象存放在堆内存中,this的指向在程序执行过程中会变化,因此如果需要在函数中使用全局数据需要合适地将this复制到变量中。

this作用域分析:

1.在Page({})里面,this关键字指代Page({})整个对象

2.因此可以通过this关键字访问或者重新设置Page({})里data的变量

3.然而在loadData函数中使用了wx.request({})API这个方法导致在wx.request({})里没办法使用this来获取Page({})对象

4.虽然在wx.request({})里没法使用this获取Page({})对象,但是可以在wx.request({})外面先把this存在某个变量中,所以就有了 var that =this 这个声明。此时that指代Page({})整个对象,这样子就可以在wx.request({})里使用that访问或者重新设置Page({})里data的变量

//index.js

//获取应用实例

const app = getApp()

const util = require('../../utils/util.js')

const bletool = require('../../utils/bletool.js')

Page({

data: {

// lists: [{ 'order_no': '1111', 'car_no': '321', 'car_type': '尚好捷', 'order_date': '2018-01-02 08:00', 'order_money': '16.00', 'order_time': '4' }],

car_no: '',

order_no: '',

lists: [],

bleList: [], //蓝牙设备数组

serviceId: '',//592B3370-3900-9A71-4535-35D4212D2837

serviceMac: '',//C9:9B:4C:E7:DE:10

service_psd: '',//855525B837253705595800000329

service_uuid: '',

deviceId:'',

characteristics:[] //特征值

},

onLoad: function (options) {

this.initBle()

},

onReady: function () {

// 页面渲染完成

},

onShow: function () {

if (app.globalData.car_no.length>0){

this.getDeviceInfo()

}

},

onHide: function () {

// 页面隐藏

},

onUnload: function () {

// 页面关闭

app.globalData.car_no=''

},

//蓝牙相关

//初始化蓝牙

initBle: function () {

var that = this

wx.onBluetoothAdapterStateChange(function (res) {

console.log('adapterState changed, now is', res)

app.globalData.ble_state = res.available

if (res.available) {

that.initBle()

} else {

util.showToast('手机蓝牙已关闭')

app.globalData.ble_isonnectting = false

}

})

//打开蓝牙适配器

wx.openBluetoothAdapter({

success: function (res) {

console.log('打开蓝牙适配器成功')

that.getBluetoothAdapterState()

app.globalData.ble_state = true

that.onBluetoothDeviceFound()

},

fail: function (res) {

// fail

console.log(res)

util.showToast('请打开手机蓝牙')

},

complete: function (res) {

// complete

}

})

},

onBluetoothDeviceFound:function(){

var that = this

//监听扫描

wx.onBluetoothDeviceFound(function (res) {

// res电脑模拟器返回的为数组;手机返回的为蓝牙设备对象

console.log('监听搜索新设备:', res)

that.updateBleList([res])

})

},

getBluetoothAdapterState: function () {

var that = this

wx.getBluetoothAdapterState({

success: function (res) {

var available = res.available

var discovering = res.discovering

if (!available) {

util.showToast('蓝牙不可用')

} else {

if (!discovering) {

// that.startBluetoothDevicesDiscovery()

}

}

}

})

},

startBluetoothDevicesDiscovery: function () {

var that = this

var services = []

services.push(this.data.serviceId)

wx.showLoading({

title: '设备搜索中'

})

setTimeout(function () {

wx.hideLoading()

if (app.globalData.deviceId.length==0){

util.showModal('设备搜索失败,请重试')

}

}, 10000)

if(bletool.isIOS()){

wx.startBluetoothDevicesDiscovery({

services: services,

allowDuplicatesKey: true,

success: function (res) {

console.log('ios搜索成功')

console.log(res)

},

fail: function (err) {

console.log(err)

}

})

}else{

wx.startBluetoothDevicesDiscovery({

// services: services,

allowDuplicatesKey: true,

success: function (res) {

console.log('Android搜索成功')

console.log(res)

},

fail: function (err) {

console.log(err)

wx.hideLoading()

that.startBluetoothDevicesDiscovery()

// that.getBluetoothAdapterState()

util.showToast('搜索失败')

}

})

}

},

startConnectDevices: function (ltype, array) {

var that = this

clearTimeout(that.getConnectedTimer)

that.getConnectedTimer = null

wx.stopBluetoothDevicesDiscovery({

success: function (res) {

// success

}

})

app.globalData.ble_isonnectting = true

console.log('连接前:'+that.deviceId)

wx.createBLEConnection({

deviceId: that.deviceId,

success: function (res) {

if (res.errCode == 0) {

console.log('连接成功:')

that.getService(that.deviceId)

}

},

fail: function (err) {

console.log('连接失败:', err)

wx.hideLoading()

util.showModal('设备连接失败,请重试')

// if (ltype == 'loop') {

// that.connectDeviceIndex += 1

// that.loopConnect(array)

// } else {

// that.startBluetoothDevicesDiscovery()

// that.getConnectedBluetoothDevices()

// }

app.globalData.ble_isonnectting = false

},

complete: function () {

}

})

},

getService: function (deviceId) {

var that = this

// 监听蓝牙连接

wx.onBLEConnectionStateChange(function (res) {

console.log(res)

app.globalData.ble_isonnectting = res.connected

if (!res.connected) {

util.showToast('连接断开')

}

})

// 获取蓝牙设备service值

wx.getBLEDeviceServices({

deviceId: deviceId,

success: function (res) {

console.log('获取蓝牙设备service值')

console.log(res)

that.getCharacter(deviceId, res.services)

}

})

},

getCharacter: function (deviceId, services) {

var that = this

services.forEach(function (value, index, array) {

if (value.isPrimary) {

that.setData({

service_uuid: value.uuid,

deviceId: deviceId

})

app.globalData.service_uuid= value.uuid

app.globalData.deviceId=deviceId

}

})

//监听通知

wx.onBLECharacteristicValueChange(function (res) {

// callback

console.log('value change', res)

const hex = bletool.buf2char(res.value)

console.log('返回的数据:', hex)

//配对密码

if (hex.indexOf('855800000106') != -1) {

wx.hideLoading()

var charact_write = that.data.characteristics[1]

bletool.writeDataToDevice(that.data.deviceId, that.data.service_uuid, charact_write, that.data.service_psd)

wx.showToast({

title: '设备已连接',

icon: 'success',

duration: 3000

})

setTimeout(function () {

bletool.writeDataToDevice(that.data.deviceId, that.data.service_uuid, charact_write, '235525B837253705590400000273')

}, 2000)

} else if (hex.indexOf('23040000') != -1) {

//启动成功

that.starRenting()

}

})

wx.getBLEDeviceCharacteristics({

deviceId: deviceId,

serviceId: that.getServiceUUID(),

success: function (res) {

wx.getBLEDeviceCharacteristics({

deviceId: deviceId,

serviceId: that.getServiceUUID(),

success: function (res) {

console.log('特征', res)

that.setData({

characteristics:res.characteristics

})

app.globalData.characteristics = res.characteristics

var charact_read = res.characteristics[0]

},

loopConnect: function (devicesId) {

var that = this

var listLen = devicesId.length

if (devicesId[this.connectDeviceIndex]) {

this.deviceId = devicesId[this.connectDeviceIndex]

this.startConnectDevices('loop', devicesId)

} else {

console.log('已配对的设备小程序蓝牙连接失败')

that.startBluetoothDevicesDiscovery()

that.getConnectedBluetoothDevices()

}

},

//更新数据 devices为数组类型

updateBleList: function (devices) {

console.log('设备数据:',devices)

var newData = this.data.bleList

var that = this

var tempDevice = null

for (var i = 0i <devices.lengthi++) {

//ios设备

if (devices[i].devices != null) {

if (devices[i].devices.length >0) {

tempDevice = devices[i].devices[0]

}

else {

continue

}

}

//安卓

else {

tempDevice = devices[i]

}

if (!this.isExist(tempDevice)) {

newData.push(tempDevice)

}

}

console.log('数据:')

console.log(newData)

this.setData({

bleList: newData

})

if (!app.globalData.ble_isonnectting) {

var that = this

this.data.bleList.forEach(function (value, index, array) {

//找到对应id的设备,ios判断服务id安卓判断mac地址

var deviceId = value['deviceId']

if(bletool.isIOS()){

let advertisServiceUUID = value['advertisServiceUUIDs'][0]

if (advertisServiceUUID == that.data.serviceId.toUpperCase()){

that.deviceId = deviceId

console.log(that.deviceId)

that.startConnectDevices()

}

}else{

if (deviceId == that.data.serviceMac) {

that.deviceId = deviceId

console.log(that.deviceId)

that.startConnectDevices()

}

}

})

}

},

//是否已存在 存在返回true 否则false

isExist: function (device) {

var tempData = this.data.bleList

for (var i = 0i <tempData.lengthi++) {

if (tempData[i].deviceId == device.deviceId) {

return true

}

}

return false

},

//服务uuid

getServiceUUID: function () {

return bletool.stringTransition(this.data.service_uuid)

},

getDeviceInfo: function () {

let car_no = app.globalData.car_no

var that = this

wx.request({

url: app.globalData.serverURL + '?c=car&a=getDeviceInfo&open_id=' + app.globalData.open_id + '&car_no=' + car_no,

method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

header: { 'content-type': 'application/json' }, // 设置请求的 header

success: function (res) {

// success

var data = res.data

console.log(data)

if (data.result == 1) {

app.globalData.serviceId = data.data.service_id

app.globalData.serviceMac = data.data.service_mac,

app.globalData.service_psd = '85' + data.data.service_psd + '5800000329'

that.setData({

serviceId: data.data.service_id,

serviceMac: data.data.service_mac,

service_psd: '85' + data.data.service_psd+'5800000329',

})

app.startBluetoothDevicesDiscovery()

// that.onBLECharacteristicValueChange()

} else {

util.showModal(data.msg)

}

},

fail: function () {

},

complete: function () {

// complete

}

})

},

})

微信小程序 setData常用错误解决办法:

1、微信小程序中,在wx.request({})方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报undefiend。

原因是,在javascript中,this代表着当前对象,会随着程序的执行过程中的上下文改变,在wx.request({})方法的回调函数中,对象已经发生改变,所以已经不是wx.request({})方法对象了,data属性也不存在了。官方的解决办法是,复制一份当前的对象,如下:

var that=this//把this对象复制到临时变量that。在success回调函数中使用that.data就能获取到数据了。

2、下面就是修改代码,必须setData一下,不然地图不会刷新。

markers: {     iconPath:

"/picture/bike.png",     id: 0,     latitude: 23.099994,     longitude:

113.324520,     width: 50,     height: 50    }

for(var i = 0i <res.data.lengthi++){         //

that.data.markers[i].id=i         // mark.id=i        var param =

{}        var string = "markers["+i+"].id"        param[string] =

res.data[i].Bike_id                that.setData(param)           

var string="markers["+i+"].iconPath"        param[string]

="/picture/bike.png"        that.setData(param)            var

string = "markers["+i+"].latitude"        param[string] =

res.data[i].BIKE_latitude                that.setData(param)       

          var string = "markers["+i+"].longitude"       

param[string] = res.data[i].BIKE_longitude               

that.setData(param)                 var string =

"markers["+i+"].width"        param[string] = 50               

that.setData(param)             var string = "markers["+i+"].height"

       param[string] = 50                that.setData(param)       

 /* that.setData({          markers:[{     iconPath:

"/picture/bike.png",     id: 0,     latitude: 23.099994,     longitude:

113.324520,     width: 50,     height: 50          }]         })*/      

  }       //   console.log(res.data[1])         var

markk=that.data.markers        that.setData({markers:markk})

小程序setData()设置,百度找到:   http://www.jb51.net/article/111691.htm


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/yw/11286305.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-15
下一篇2023-05-15

发表评论

登录后才能评论

评论列表(0条)

    保存