名词解释
AliOS Things： 阿里云智能IoT团队自研的物联网操作系统
HaaS：全称是Hardware as a Service，阿里云智能IoT团队基于AliOS Things系统推出的硬件即服务
HaaS UI：全称是Hardware as a Service User Interface，是源自AliOS Things操作系统上的一套应用&图形解决方案，支持C/C++和 JS两种开发语言
二维码
二维码(本文主要介绍qrcode)是目前在移动设备上应用特别广泛的一种编码方式，是用某种特定的几何图形按一定规律在平面（二维方向上）分布的、黑白相间的、记录数据符号信息的图形。
1、QRCode.js
在前端领域，有不少支持创建显示二维码的开源库，而QRCode.js是其中一个比较简单实用的库，github地址：https://github.com/davidshimjs/qrcodejs
QRCode.js支持使用svg或者canvas来创建二维码，使用起来也非常方便：
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "123456",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
// 或者
qrcode.clear(); // clear the code.
qrcode.makeCode("abcdef"); // make another code.2、在HaaS UI上运行QRCode.js
因为HaaS UI支持了Canvas组件，所以移植QRCode.js是非常容易的（其他二维码库，如果支持canvas渲染，也是非常容易移植的）。
2.1、移植QRCode.js
移植QRCode.js的基本思路很简单：
- 删除不支持的svg相关逻辑
- 将不兼容的canvas操作(qrcode.js会调用一些浏览器支持的api)调整一下
-
- canvas.getContext('2d')修改为createCanvasContext(canvas) (HaaS UI中使用createCanvasContext方法获取canvas上下文)
- canvas组件宽高不支持动态设置(canvas.width=width)，由组件初始化时设置
此时，使用修改后的qrcode.js已经可以在HaaS UI中显示二维码了
<div class="page">
<canvas ref="canvas" class="canvas" width="200" height="200" />
</div>
</template>
<script>
import QRCode from './qrcode.js';
export default {
mounted() {
let qrcode = new QRCode(this.$refs.canvas, {
width : 200,
height : 200,
});
qrcode.makeCode('https://www.taobao.com');
},
};
</script>
<style scoped>
.page {
flex: 1;
align-items: center;
padding: 30px;
}
</style>
2.2、组件化
在移植好QRCode.js之后，已经可以直接在页面中引入并生成二维码。为了更方便使用，可以通过之前文章介绍的自定义组件的方法封装一个qrcode组件。
<canvas ref='canvas' :style="{'width': width+'px', 'height': height+'px'}" :width='width' :height='height'>
</canvas>
</template>
<script>
import QRCode from './qrcode.js';
export default {
name: 'FlQRCode',
props: {
width: { // 二维码显示宽度
type: Number,
default: 100,
validator(val) {
return val > 0;
}
},
height: { // 二维码显示高度
type: Number,
default: 100,
validator(val) {
return val > 0;
}
},
text: { // 二维码内容
type: String,
}
},
mounted() {
this.makeCode();
},
methods: {
makeCode() {
// 生成二维码
if (this.text) {
let qrcode = new QRCode(this.$refs.canvas, {
width : this.width,
height : this.height,
});
qrcode.makeCode(this.text);
}
},
},
watch: {
text() {
// text属性发生变化，重新生成二维码
this.makeCode();
},
}
}
</script>然后在页面或者组件中使用qrcode组件：
<div class="page">
<QRCode text="https://www.taobao.com" />
<text class="text">https://www.taobao.com</text>
<QRCode :width="200" :height="200" style="margin-top:30px;" text="https://h5.dingtalk.com/circle/healthCheckin.html?corpId=ding14654f721f769db5304b958c1afbff6a&5238e=ab6ba&cbdbhh=qwertyuiop&origin=1" />
<text class="text">钉钉开发者群</text>
</div>
</template>
<script>
import QRCode from "../packages/qr-code/index.vue";
export default {
components: {
QRCode,
},
};
</script>
<style scoped>
.page {
flex: 1;
align-items: center;
padding: 30px;
}
.text {
font-size: 20px;
}
</style>
3、开发者技术支持
如需更多技术支持，可加入钉钉开发者群，或者关注微信公众号
更多技术与解决方案介绍，请访问阿里云AIoT首页https://iot.aliyun.com/
