本小节我们一起去看一下微信小程序端的代码,已经写完,我们大致看一下其中的原理。首先我们打开main.js
文件,里面有Ajax请求的全局路径。
let api = "http://WindowsIP地址:8090/emos-api"
Vue.prototype.url = {
……
checkQrCode: api + "/user/checkQrCode"
}
上节课我们写的checkQrCode方法路径已经封装在main.js
文件中了。接下来我们去看mine.vue
页面,里面有一段标签是扫一扫的。
<uni-list-item title="扫一扫" clickable @click="scanQRCode"></uni-list-item>
这个列表点击事件回调函数是scanQRCode()
,我们一起来看一下。
scanQRCode: function() {
let that = this;
//调用摄像头扫描二维码
uni.scanCode({
onlyFromCamera: true,
success: function(resp) {
//把扫描的结果字符串进行拆分
let temp = resp.result.split('@@@');
let module = temp[0]; //@@分割符前的内容是命令
let id = temp[1]; //@@分隔符后面的字符串
if (module == 'login') {
uni.showModal({
title: '提示信息',
content: '是否登陆Emos管理系统?',
success: function(resp) {
if (resp.confirm) {
uni.login({
provider: 'weixin',
success: function(resp) {
let code = resp.code;
that.ajax(that.url.checkQrCode, 'POST', { uuid: id, code: code }, function(resp) {
if (resp.data.result) {
uni.showToast({
title: '登陆成功',
icon: 'success'
});
} else {
uni.showToast({
title: '登陆失败',
icon: 'none'
});
}
});
}
});
}
}
});
} else if (module == 'MRIF') {
uni.navigateTo({
url: '../../meeting/meeting_room?meetingRoomId=' + id
});
} else if (module == 'MTCK') {
uni.navigateTo({
url: '../../meeting/meeting_checkin?meetingRoomId=' + id
});
}
}
});
}
现在把各种程序都运行起来,然后在浏览器上切换到二维码登陆,用小程序扫描二维码登陆试一下。