1# qrcode开发指导 2 3 4生成并显示二维码，具体用法请参考[qrcode](../reference/arkui-js/js-components-basic-qrcode.md)。 5 6 7## 创建qrcode组件 8 9在pages/index目录下的hml文件中创建一个qrcode组件。 10 11 12```html 13<!-- xxx.hml--> 14<div class="container"> 15 <qrcode value="Hello"></qrcode> 16</div> 17``` 18 19 20```css 21/* xxx.css */ 22.container { 23 width: 100%; 24 height: 100%; 25 flex-direction: column; 26 align-items: center; 27 justify-content: center; 28 background-color: #F1F3F5; 29} 30``` 31 32 33 34> **说明：** 35> qrcode组件在创建的时候value的值为必填项。 36 37 38## 设置组件类型 39 40通过设置qrcode的type属性来选择按钮类型，如定义qrcode为矩形二维码、圆形二维码。 41 42 43```html 44<!-- xxx.hml--> 45<div class="container"> 46 <select onchange="settype"> 47 <option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option> 48 </select> 49 <qrcode value="Hello" type="{{qr_type}}"></qrcode> 50</div> 51``` 52 53 54```css 55/* xxx.css */ 56.container { 57 width: 100%; 58 height: 100%; 59 flex-direction: column; 60 align-items: center; 61 justify-content: center; 62 background-color: #F1F3F5; 63} 64select{ 65 margin-top: 50px; 66 margin-bottom: 50px; 67} 68``` 69 70 71```js 72// index.js 73export default { 74 data: { 75 qr_type: 'rect', 76 bcol_list: ['rect','circle'] 77 }, 78 settype(e) { 79 this.qr_type = e.newValue 80 }, 81} 82``` 83 84 85 86 87## 设置样式 88 89通过color和background-color样式为二维码设置显示颜色和背景颜色。 90 91 92```html 93<!-- xxx.hml--> 94<div class="container"> 95 <qrcode value="Hello" type="rect"></qrcode> 96</div> 97``` 98 99 100```css 101/* xxx.css */ 102.container { 103 width: 100%; 104 height: 100%; 105 flex-direction: column; 106 align-items: center; 107 justify-content: center; 108 background-color: #F1F3F5; 109} 110qrcode{ 111 width: 300px; 112 height: 300px; 113 color: blue; background-color: #ffffff; 114} 115``` 116 117 118 119> **说明：** 120> - width和height不一致时，取二者较小值作为二维码的边长，且最终生成的二维码居中显示。 121> 122> - width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。 123> 124 125 126## 场景示例 127 128在本场景中将二维码与输入框绑定，通过改变输入框的内容改变二维码。 129 130 131```html 132<!-- xxx.hml--> 133<div class="container"> 134 <input style="margin-bottom: 100px;" onchange="change"></input> 135 <qrcode value="{{textVal}}"></qrcode> 136</div> 137``` 138 139 140```css 141/* xxx.css */ 142.container { 143 width: 100%; 144 height: 100%; 145 flex-direction: column; 146 align-items: center; 147 justify-content: center; 148 background-color: #F1F3F5; 149} 150qrcode{ 151 width: 400px; 152 height: 400px; 153} 154``` 155 156 157```js 158// index.js 159export default{ 160 data: { 161 textVal: '' 162 }, 163 change(e){ 164 this.textVal = e.value 165 } 166} 167``` 168 169 170
