微信硬件jsapi前端逻流程详解。_openwxdevicelib

对于微信硬件的开发，后端部分之前已经说过，前端页面我们需要按照微信官方文档给出的jsapi接口进行判断和编写，我自己总结了10个详细的流程，希望能帮助大家详细的了解和运用。蓝牙模式

对于wx.config注入块可由后端来实现，因此跳过这次步骤，直接从wx.ready(function(){})来讲

1：首先初始化微信硬件环境 jsapi接口为 openWXDeviceLib(),其有返回值，判断成功后

wx.invoke("openWXDeviceLib", {
		connType: "blue"
	}, function(res) {
		if (res.err_msg == "openWXDeviceLib:ok") {
			if (res.bluetoothState == "off") {
				alert("您的蓝牙未开启，请开启蓝牙！");
				return;
			}
			if (res.bluetoothState == "unauthorized") {
				alert("未授权微信使用蓝牙功能")
				return;
			}
			scanDevice();//设备扫描函数
		} else {
			alert("初始化微信硬件环境失败")
		}
	});

蓝牙的状态，这部分逻辑完成后进行总要的设备扫描接口运行 

2：startScanWXDevice（）

在扫描之前应该判断用户的操作系统是Android还是ios系统，不同的系统传入的参数不同。

使用navigator.userAgent.toLowerCase()来判断系统。

3：扫描时，要对设备列表的值进行判断，判断其是否存在，无值得话设定超时时间（10s）,并在页面出现重新请求按钮进行重新请求。

var timeout = 0; //超时时间，10秒超时一次
var listner;
function listnerScanList() {
	timeout++;
	console.log(timeout)
	if (timeout >= 10) {
		timeout = 0;
		listner && clearInterval(listner);
		if (scanList.length == 0) {
			$("#scan,#scanend").show();
			$("#scaning").hide();
		}
	}
}

function scanDevice() {

	$("#scan,#scaning").show();
	$("#scanend").hide();
	var config = {
		connType: "blue",
		btVersion: "ble"
	};
	if (!isAndroid()) {
		config = {
			connType: "blue"
		}
	}
	wx.invoke("startScanWXDevice", config, function() {
		if (scanList.length == 0) {
			listner = setInterval("listnerScanList()", 1000);
		}
	});
}

4：对事件的监听当扫描到设备时触发 
onScanWXDeviceResult（）
其中有返回的参数devices设备列表，因此也要判断设备列表有无值，没有显是重新扫描，有的话将其注入到html（js模板）
wx.on("onScanWXDeviceResult", function(res) {
		if (res.devices.length == 0) {
			$("#scan,#scanend").show();
			$("#scaning").hide();
			return;
		}
		$("#scan").hide();
		renderScanList(res.devices);
	});
var scanList = [];//设备列表
//更新扫描列表，重复设备不在添加
function renderScanList(scanDevices) {
	for (var i = 0; i < scanDevices.length; i++) {
		scanList.push(scanDevices[i]);
	}
	$("#doorList").html(template("doorlistTmpl", {
		scanList: scanList
	}));
	$("#page1").show();
}
5：注入html（js模板）
6：监听蓝牙状态，
onWXDeviceBluetoothStateChange（）
并判断蓝牙状态情况，也需要判断设备列表：
wx.on("onWXDeviceBluetoothStateChange", function(res) {
		if (res.state == "off" && scanList == 0) {
			alert("检测到您的蓝牙已关闭，请开启蓝牙！");
			return;
		}
		if (scanList == 0) {
			scanDevice();
		}
	});
7：监听设备状态 
onWXDeviceStateChange（）
返回值中state 有三种状态，在连接上状态中执行
sendDataToWXDevice（）函数，向设备发送数据；
8：监听，接受来自设备的数据
onReceiveDataFromWXDevice（）；
9：对重新扫描按钮添加扫描函数
$("#refreshScan").click(function() {
		$("#scan,#scaning").show();
		$("#scanend").hide();
		listner = setInterval("listnerScanList()", 1000);
	});
10：由于要避免客户每次要输入信息，可以用window.localStorage方法保存。
以上为我总结出来的逻辑顺序，如有漏洞，希望大家给我提出来进行改进。