76 lines
172 KiB
Markdown
76 lines
172 KiB
Markdown
# ikun-qrcode
|
||
使用基础的view渲染二维码，需要给定宽高和单位和数据：(color非必传，默认黑色)
|
||
```vue
|
||
<ikun-qrcode
|
||
width="400"
|
||
height="400"
|
||
unit="rpx"
|
||
color="#000000"
|
||
:data="绑定一个字符串变量(vue2在data中定义，vue3随意)"
|
||
/>
|
||
```
|
||
## 界面效果
|
||
|
||
|
||
## 为什么不用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 | ✔正常 |
|
||
| 安卓微信 | 安卓12 | ✔正常 |
|
||
| windows微信 | win10(22H2) | ✔正常 |
|
||
|
||
|
||
|
||
|
||
## 常见问题及自查策略
|
||
### Q: 一直卡在绿色的转圈动画不加载二维码。
|
||
A: 组件:data="" 绑定的变量是个空。 排查接口是否被拦截， 导致变量赋值了"", null, undefined这些值。 |