HarmonyOS应用开发-qrcode二维码生成 - HarmonyOS技术社区 - 电子技术william hill官网 - 广受欢迎的专业电子william hill官网 - 威廉希尔官方网站
分享 收藏 返回

李洋水蛟龙 关注 私信
[文章]

HarmonyOS应用开发-qrcode二维码生成


一.创建项目
二.示例代码
Hml代码：
  1. <div class="container">
  2.     <text class="txt">Type</text>
  3.     <switch showtext="true" checked="true" texton="rect" textoff="circle" onchange="setType"></switch>
  4.     <qrcode value="{{qr_value}}" type="{{qr_type}}"
  5.             style="color: {{qr_col}};background-color: {{qr_bcol}};width: {{qr_size}};height: {{qr_size}};margin-bottom: 70px;">
  6.     </qrcode>
  7.     <text class="txt">Color</text>
  8.     <select onchange="setColor">
  9.         <option for="{{col_list}}" value="{{$item}}">{{$item}}</option>
  10.     </select>
  11.     <text class="txt">Background Color</text>
  12.     <select onchange="setColorB">
  13.         <option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option>
  14.     </select>
  15. </div>

Css代码：
  1. .container {
  2.     flex-direction: column;
  3.     justify-content: center;
  4.     align-items: center;
  5. }
  6. .txt {
  7.     color: orangered;
  8. }

Js代码：
  1. export default {
  2.     data: {
  3.         qr_value:"这里是扫出的二维码内容",
  4.         qr_type: 'rect',
  5.         qr_size: '200px',
  6.         qr_col: '#333',
  7.         col_list: ['#87ceeb','#fa8072','#da70d6','#80ff00ff','#00ff00ff'],
  8.         qr_bcol: '#f0ffff',
  9.         bcol_list: ['#f0ffff','#ffffef','#d8bfd8']
  10.     },
  11.     setType(e) {
  12.         if (e.checked) {
  13.             this.qr_type = 'rect'
  14.         } else {
  15.             this.qr_type = 'circle'
  16.         }
  17.     },
  18.     setColor(e) {
  19.         this.qr_col = e.newValue
  20.     },
  21.     setColorB(e) {
  22.         this.qr_bcol = e.newValue
  23.     }
  24. }

三. 实例效果
1.png
附件：
HarmonyOS应用开发-qrcode.docx (205.56 KB)
(下载次数: 1, 2022-5-12 15:13 上传)


回帖（3）

玩硬件的女孩纸

2022-5-13 15:22:31
这个厉害了

nickxin88

2022-5-18 08:15:23
qrcode第三方库吗

李洋水蛟龙

2022-5-18 10:10:57
是的尼，是属于三方库。

更多回帖

我也要说两句 回帖

相关经验

×
发帖