Dining_Hall/uni_modules/ikun-qrcode/readme.md

# ikun-qrcode
使用基础的view渲染二维码，需要给定宽高和单位和数据：(color非必传，默认黑色)
```vue
<ikun-qrcode 
	width="400"
	height="400"
	unit="rpx"
	color="#000000"
	:data="绑定一个字符串变量(vue2在data中定义，vue3随意)" 
/>
```
## 界面效果
![界面](data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAK6AY4DASIAAhEBAxEB/8QAGwABAQADAQEBAAAAAAAAAAAAAAoICQsHBQb/xABNEAAABAQEAgQKBwUHAwQDAQAABQYHBAgVFgMJFBcKGBkaOXgCSVhpiKi3uMjoASUoN5jW2BMnKUVKRkhlaIaJySY2dxIkZocRR1dn/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAUBBAMC/8QANBEBAAEDAQQKAgEEAQUAAAAAAAIBAwQzBVJxkRESFEGCorGy0vAGEyEHIiMxFRYyUVNy/9oADAMBAAIRAxEAPwCTcAARwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG6LKEyhOlX5hftC7DbDbTf/AKm3RurdHcv/AP0tu6HQ9u/8YqdY/l9P/wDfaXRaJwhPjCvRN+JcelmNJ3IxlTppXp6adNaf6jWvd0V/3QOqE+cK9U35lw6oT5wr1TfmXFogDu7PZ3PNL5CLvqhPnCvVN+ZcOqE+cK9U35lxaIAdns7nml8hF31QnzhXqm/MuHVCfOFeqb8y4tEAOz2dzzS+Qi76oT5wr1TfmXDqhPnCvVN+ZcWiAHZ7O55pfIRd9UJ84V6pvzLh1QnzhXqm/MuLRADs9nc80vkIu+qE+cK9U35lw6oT5wr1TfmXFogB2ezueaXyEXfVCfOFeqb8y4dUJ84V6pvzLi0QA7PZ3PNL5CLvqhPnCvVN+ZcOqE+cK9U35lxaIAdns7nml8hF31QnzhXqm/MuHVCfOFeqb8y4tEAOz2dzzS+Qi76oT5wr1TfmXDqhPnCvVN+ZcWiAHZ7O55pfIRd9UJ84V6pvzLh1QnzhXqm/MuLRADs9nc80vkIu+qE+cK9U35lw6oT5wr1TfmXFogB2ezueaXyEXfVCfOFeqb8y4dUJ84V6pvzLi0QA7PZ3PNL5CLvqhPnCvVN+ZcOqE+cK9U35lxaIAdns7nml8hF31QnzhXqm/MuHVCfOFeqb8y4tEAOz2dzzS+Qi76oT5wr1TfmXDqhPnCvVN+ZcWiAHZ7O55pfIRd9UJ84V6pvzLh1QnzhXqm/MuLRADs9nc80vkIu+qE+cK9U35lw6oT5wr1TfmXFogB2ezueaXyEXfVCfOFeqb8y4dUJ84V6pvzLi0QA7PZ3PNL5CLvqhPnCvVN+ZcOqE+cK9U35lxaIAdns7nml8hF31QnzhXqm/MuHVCfOFeqb8y4tEAOz2dzzS+Qi76oT5wr1TfmXDqhPnCvVN+ZcWiAHZ7O55pfIRd9UJ84V6pvzLh1QnzhXqm/MuLRADs9nc80vkOVhmvZcfRhTEoxg95N77uZZOu/de3m2tPr65cZGW9Qr5X+r0lgVKrVmG/b1bR0zB0GqjdYwpz4rztEWZ7lzd+3GYsTGDhuxpG5KMadFKV/in817qf+f5AWicIT4wr0TfiXEXYtE4QnxhXom/EuPrH1oeL2yFogAApAAAAAAAAAAAAAAAAAAAAAAAAAAAA8ThZlZco4md9RwT/snGJ6XwyPSZ+z2FdVCxBMyBwl4bGjVKVO+aYJ94cC2pknYOGiIs9gVnjksUUw2BjY5hhQ+FheH4fg+2CBdyZo2vlFIOJ7ksemBdAsmOmbcaZd5WPQSbZp1Fh4C2adzm4UOPDOT4SjTyRjkyl0GjyUxwVMtliszdOpotT2DGx5UaHfhwcRD4fBlZvZ650IxjO/Y/HNs7Zw7H81u5uXsrL2Lb7FahGlZ3ayw9oZubchZjK9Gzg3L1I/ptX5w7bONauWcW7O7WH7vyPYux7/8AqkMfB2ph7cncz7k6/wBtuNraGBsvAhK5WNmt7alq1KX7blmMrZsWbWVTA8FufDxpmpfMHwHhRigcZpPDxXnbjD8F0m9SRFjKhVLtufC8NSfR9C3RiZTMPEKJQKhM/SZkhMRYGMbmMdDF+F4cR4OLM4U8du5fj0TdSGObJ4+52j4GBwG+WS/mFbIqlhMFDeyfS5yWqt5Poc9EN7ARJfhmsTCQpaaOojcOMU/hFZDEHkBFR+Fh4strQtQ2r3P9wnLZu+hkw5bdKOQF/fpUiFWpRCKFIqXAKZevAOYMvUieMcPHKj8o+kxL4PGjCU4hY0pMsPB0plBRcJiYuB4fib2oRHNHl/8AFWtC2KcK0I1aFnSYjDRLdJiG8EpRaPwDN2kH4cZCJdOQv0+AVEED4fgQkDC4UAVQsJBQpcWlZZCYGAXFZfCw3Rty1PExc6P7bluUtmfk+fiXMadI3aWvxv8Aqdi/gF6t25O3Klq7lWs6xl24W7d2lqdm9Kt//Nbs2PPYkreXtv8ADsO5bhK3t3a/4ThZNLlKztw/6q/GNsfkcurCM7cp28Wexb2NWkrlK3oZFvppCtucp36t2eHCmb9CqRQ4SfwD9Qo5MHh5gpM58BRpXBODYkgY8zwkyocL6Powz1P4cbEY/gExzh/R9HgGhd9ENHeB9H0eDj/R9A8icGcWUVpXLI2XdWaeXFsniU/0kPgppp3BfBskY5ah8JVGHhlCX+gjQijU5aqTb6VIa4eIWEP0QBVEfScGGH4cEXaiJ8DwsL6MEYeWyf8AciKlBc5gcyzlrl4TbIy5+AvpYOTZlXj3JxSCCgjdbY29S0PYFcI7cBLxEAkP2ZLAY/gpSnV8o+nGMYvGwvBlRzjZiWMfdZ5wzOqeWyVtrZmWeNoaITEMoZCXgfOdN1kCgSJtYXmaLJ4il20E3MsTX4ZLApeJIU+dpU8K8dJR0OTw5UuFAv8AwiY76PyDKs7L2rtS3K11bGBd/Jc3Jw7EejKhsnYGZj2cjIxoSuXLH6ZWcuGRajTKysyxj2Z3M3Ds4lvO2hs/i/HrNzaOytmXrl6fTlY349Ypn3KW7lqmftnHlcpHKp04s6StdnvQvXrlrB2ddyrljGs51MjKw8fJu4cGZ6WppFVjIV1ZhmNbJbw6AO3XiEc4LsoFGKrAa1M4ZnjKRysZPKM/LTfCQCfwSU5xTtY+HB+CnSrDKTPw48xh/BgIr6cL4n0TiSj/AEsx4Ex/0TTS5fTLxiGf0EmG/X0Pe2f0sx4Zz9Jx9Kd+go8B0bnsfwjP6VB9H0kX0QHgnv0xX0nH0fSWfstb9H04AjOnDcCT4szasqR28x9F+G7LCleTMil64OOpGePn+RZWqMaBdGNw3AdltE0l1qZHqOgIuNMcSLMPCRygLiJUGKdPjWEgC0vijorwcftOERjk+50z8MQ2ahaqQGYHMVl+UsmqUiUqeIFMqFJEDhFBMtnBa1BnUEW+CSINWxfhkUERfSWQsDAQfhkWIifpLiaLQ0SRlXtesTx8u7hzlCc7Obk4V3JjWtMLHu4/9VsX+ndmGdejS7fwr20sK7m7XwrPZciso7JzJRlfhWVqwx71vKjs27Zjdjb2ls3YO0oWrv6+0Us7Z/pjH88vStUhOUL9nZmbcxNmZV6VceVI7Qx6ysWq9mv7Q6GaHmZlvc5xlezzbTAsi4Ttt9DYkYvWtQ7rINWOMiITCiYSCxYpXoghPjBTJqGw4yPgYTExzksgsLwImMhMDwvC+jFiMHwPD9uETMv3hyQPvnK5Z3gZPzAYzZEkoLcvgXZhinSMu65luw0SVHLdRCNRDZzBYCnQqIili6WOrSk/LYyOO4dQmh4fY/hYuEpDvwSY6jU/bMNlZjHDxMjpn1r17aliv7IwhHIt7O2plYFnaWJCF27X/j9oW7EbmNK5OVZXIZH6bmTiUxczJ8bF65cuzt3KWqVpibMypW7crkrmFdz8K3kXtl51blu3GO0sKdevft26f2Y2Th/vhYypZGNZAADndQAAAAAAAAAAAAAAAAA

## 为什么不用canvas渲染
如果你在首页布局中嵌入二维码，此时如果有个dialog弹出，canvas的层级会一直最高，以致于盖住dialog的内容，这显然是不符合常理的。 用view实现就不存在这个问题。
[wx-canvas文档](https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html)

## vue2详细用法
```html
<template>
    <view class="content">
        <ikun-qrcode
            width="400"
            height="400"
            unit="rpx"
			color="#000000"
            :data="url"
        ></ikun-qrcode>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                url: 'http://baidu.com'
            }
        }
    }
</script>
```

## vue3详细用法
```html
<template>
    <view class="content">
        <ikun-qrcode
            width="400"
            height="400"
            unit="rpx"
			color="#000000"
            :data="url"
        />
    </view>
</template>
<script setup sfc>
import { ref } from 'vue';
const url = ref('http://baidu.com')
</script>
```

## ikun-ui微信小程序线上测试结果
评论区反馈ios发布后，二维码不出来，我这ipados 18.0测试可以正常出二维码，有iphone和ipad可以测试下， 评论区反馈二维码是否ok。

| 平台 | 系统信息 | 微信小程序测试结果 |
| :---: | :---: | :---: |
| ipad微信 | ipados 18.0 | &#10004;正常 |
| 安卓微信 | 安卓12 | &#10004;正常 |
| windows微信 | win10(22H2) | &#10004;正常 |


![小程序](data:image/png;base64,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

## 常见问题及自查策略
### Q: 一直卡在绿色的转圈动画不加载二维码。
A: 组件:data="" 绑定的变量是个空。 排查接口是否被拦截， 导致变量赋值了"", null, undefined这些值。