HaaS UI小程式解決方案進階教學之二：Canvas顯示二維碼

名詞解釋

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的基本思路很簡單：

1. 删除不支援的svg相關邏輯
2. 将不相容的canvas操作(qrcode.js會調用一些浏覽器支援的api)調整一下
3. • 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/