Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
纵之格
shopxo-uniapp
提交
87135bda
S
shopxo-uniapp
项目概览
纵之格
/
shopxo-uniapp
通知
102
Star
3
Fork
4
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
S
shopxo-uniapp
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
87135bda
编写于
11月 20, 2022
作者:
G
gongfuxiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
新增条码二维码生成组件
上级
7c198c22
变更
7
展开全部
隐藏空白更改
内联
并排
Showing
7 changed file
with
753 addition
and
0 deletion
+753
-0
uni_modules/wmf-code/README.md
uni_modules/wmf-code/README.md
+84
-0
uni_modules/wmf-code/changelog.md
uni_modules/wmf-code/changelog.md
+108
-0
uni_modules/wmf-code/common/helper.js
uni_modules/wmf-code/common/helper.js
+105
-0
uni_modules/wmf-code/components/w-barcode/w-barcode.vue
uni_modules/wmf-code/components/w-barcode/w-barcode.vue
+203
-0
uni_modules/wmf-code/components/w-qrcode/w-qrcode.vue
uni_modules/wmf-code/components/w-qrcode/w-qrcode.vue
+175
-0
uni_modules/wmf-code/js_sdk/index.js
uni_modules/wmf-code/js_sdk/index.js
+1
-0
uni_modules/wmf-code/package.json
uni_modules/wmf-code/package.json
+77
-0
未找到文件。
uni_modules/wmf-code/README.md
0 → 100644
浏览文件 @
87135bda
<a
href=
"https://meet-ui.com"
target=
"_blank"
>
<h1
align=
"center"
>
文档地址
</h1>
</a>
<h1
align=
"center"
>
https://meet-ui.com/#/
</h1>
<p
align=
"center"
>
为了能够第一时间解决问题,为了不影响各位在项目中使用特此提供微信群交流
</p>
<center>
<img
src=
"https://img.lovewmf.com/2022-10-19.png"
/>
<img
src=
"https://img.lovewmf.com/2022-05-10.png"
/>
</center>
# 温馨提示
如果使用cli创建的应用请在
`vue.config.js`
里面添加如下配置
```
module.exports = {
transpileDependencies: [
/[/\\]node_modules[/\\](.+?)?@uni-ui(.*)[/\\]code-plugs/,
/[/\\]node_modules[/\\](.+?)?@uni-ui(.*)[/\\]code-ui/
]
}
```
# 微信小程序特别说明
如果在弹窗里面使用,并且弹窗有动画 当弹窗显示的时候二维码会发生偏移或抖动
因为微信小程序的canvas在真机预览渲染的是原生组件并不是 h5的canavas 所以在开发工具里面没问题但是真机会有问题
解决方案:
1. 如果是使用uView组件的弹窗 请关闭动画
2. 如果是使用uni-popup组件 关闭动画无效 因为uni的弹窗动画关闭 其实是动画时长为0并且是包含在uni-transition详情请查看uni-popup代码
## 如果是使用uni_modules而非Npm
在
`pages.json`
里面配置如下
```
js
"
easycom
"
:
{
"
^w-(.*)
"
:
"
@/uni_modules/wmf-code/components/w-$1/w-$1.vue
"
//二维码条形码的配置 如果是uni_modules
},
"
pages
"
:
[
//...
]
```
## 如果是使用npm而非uni_modules
在
`pages.json`
里面配置如下
```
js
"
easycom
"
:
{
"
^w-(.*)
"
:
"
@uni-ui/code-ui/components/w-$1/index.vue
"
//二维码条形码的配置 如果是npm方式使用
},
"
pages
"
:
[
//...
]
```
## 条形码支持添加文字
<img
src=
"https://img.lovewmf.com/WeChat315bd9b33217fabb1beaaa0d65421bee.png"
style=
"margin-bottom: 10px;"
/>
<img
src=
"https://img.lovewmf.com/WeChat9e319e9cd08e96369c09099f2863bff5.png"
style=
"margin-bottom: 10px;"
/>
<center>
<figure>
<img
src=
"https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07d4381cff624fc79ab28cdd1bf3cc6a~tplv-k3u1fbpfcp-watermark.image"
style=
"margin-bottom: 10px;"
/>
<img
src=
"https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71d7c20e8c91495c81d245ccfc83d7e7~tplv-k3u1fbpfcp-watermark.image"
style=
"margin-bottom: 10px;"
/>
</figure>
</center>
#
<center>
<figure>
<img
src=
"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bfe9eb88cea44007b2627bb640343dcc~tplv-k3u1fbpfcp-watermark.image"
style=
"margin-bottom: 10px;"
/>
<img
src=
"https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b625254802404a9b84bd699e67b03db4~tplv-k3u1fbpfcp-watermark.image"
style=
"margin-bottom: 10px;"
/>
</figure>
</center>
#
<center>
<figure>
<img
src=
"https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f84328d92b104edbad4c34a8665b4c72~tplv-k3u1fbpfcp-watermark.image"
style=
"margin-bottom: 10px;"
/>
<img
src=
"https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1548ccd6c944bbe90ef288817077b8c~tplv-k3u1fbpfcp-watermark.image"
style=
"margin-bottom: 10px;"
/>
</figure>
</center>
uni_modules/wmf-code/changelog.md
0 → 100644
浏览文件 @
87135bda
## 1.6.2(2022-10-24)
*
修复已知问题
## 1.6.1(2022-10-19)
*
支付宝小程序适配问题
*
修改文档
## 1.6.0(2022-07-27)
*
修改条形码bug
## 1.5.9(2022-07-26)
*
修复条形码保存图片部分黑底问题
## 1.5.8(2022-07-26)
*
修复支付宝小程序图片保存缺失问题
## 1.5.7(2022-07-09)
*
修复条形码保存缺失问题
## 1.5.6(2022-07-01)
修改引入错误
## 1.5.5(2022-07-01)
*
修复vue3无法通过ref获取保存图片方法
## 1.5.4(2022-06-01)
*
条形码支持添加文字
## 1.5.3(2022-05-31)
*
修复二维码有时候无法识别问题
*
建议使用npm方式
## 1.5.2(2022-05-31)
修改条形码垂直方向生成图片 参数互换
## 1.5.1(2022-05-31)
条形码增加垂直方向 默认水平方向
## 1.5.0(2022-05-30)
修改uni_modules引入错误
## 1.4.9(2022-05-25)
支持vue3
## 1.4.8(2021-12-06)
*
百度小程序不支持canvas的arcTo方法 如果在百度小程序中不支持的全部默认值
*
小程序平台绘制文字不支持渐变 取color数组第一个
## 1.4.7(2021-12-05)
*
修复已知问题
## 1.4.5(2021-12-05)
*
修复已知问题
## 1.4.4(2021-11-30)
*
level默认值修改为2
## 1.4.3(2021-11-30)
*
修复引用js_sdk引用路径
## 1.4.2(2021-11-29)
*
修复设置画布大小时没有带单位px导致显示不全
## 1.4.1(2021-11-29)
1.
修复在高分辨率屏幕上支付宝小程序显示模糊问题
2.
修复保存相册图片模糊问题
## 1.4.0(2021-11-23)
1.
使用TS重构
2.
新增二维码文字绘制
3.
新增二维码padding
4.
新增二维码中间图片圆角 圆形
5.
新增长按事件
6.
二维码边框支持透明
7.
颜色最多支持10中颜色渐变
## 1.3.7(2021-11-08)
修改引入
## 1.3.6(2021-11-02)
修改引用路径
## 1.3.5(2021-10-19)
canvas 增加 type="2d"
## 1.3.4(2021-10-14)
1.
修改百度小程序修改参数无法重新渲染问题
2.
修改纯中文无法识别问题
## 1.3.3(2021-09-04)
修改uni_module引用路径
## 1.3.2(2021-09-03)
*
【重要】多个条形码或者二维码同时渲染
*
增加示例
## 1.3.1(2021-08-31)
uni_modules支持组件方式
## 1.3.0(2021-08-31)
支持纯文字以及文字数字 字母的混合
## 1.2.9(2021-08-30)
新增二维码创建成功回调方法中返回生成的二维码图片
## 1.2.8(2021-08-20)
支持vue3
## 1.2.7(2021-08-20)
修改版本号
## 1.2.6(2021-06-28)
1.
修改自定义组件时微信小程序无法显示二维码的问题
2.
统一二维码的大小单位为rpx
## 1.2.5(2021-06-25)
二维码logo大小增加默认值:30
## 1.2.4(2021-06-24)
1.
nvue 二维码支持渐变色
## 1.2.3(2021-06-23)
1.
修改app不支持颜色渐变问题
2.
修改判断方式Object.prototype.toString.call()
## 1.2.2(2021-06-23)
修改插件描述
## 1.2.1(2021-06-23)
修改return 错误
## 1.1.2(2021-06-23)
修改文档
## 1.1.1(2021-06-23)
二维码支持渐变色
## 1.0.8(2021-06-22)
兼容nvue
## 1.0.7(2021-06-09)
1.
修改保存二维码图片的方法名以及传参方式
2.
修改微信小程序保存二维码时显示为黑色
3.
二维码增加参数
## 1.0.6(2021-06-04)
修改 description说明
## 1.0.5(2021-06-04)
修改文档展示名称
## 1.0.4(2021-06-04)
修改符合uni_modules规范
uni_modules/wmf-code/common/helper.js
0 → 100644
浏览文件 @
87135bda
// 判断arr是否为一个数组,返回一个bool值
function
isArray
(
arr
)
{
return
Object
.
prototype
.
toString
.
call
(
arr
)
===
'
[object Array]
'
;
}
// 深度克隆
function
deepClone
(
obj
)
{
// 对常见的“非”值,直接返回原来值
if
([
null
,
undefined
,
NaN
,
false
].
includes
(
obj
))
return
obj
;
if
(
typeof
obj
!==
"
object
"
&&
typeof
obj
!==
'
function
'
)
{
//原始类型直接返回
return
obj
;
}
var
o
=
isArray
(
obj
)
?
[]
:
{};
for
(
let
i
in
obj
)
{
if
(
obj
.
hasOwnProperty
(
i
))
{
o
[
i
]
=
typeof
obj
[
i
]
===
"
object
"
?
deepClone
(
obj
[
i
])
:
obj
[
i
];
}
}
return
o
;
}
function
getUUid
(
len
=
32
,
firstU
=
true
,
radix
=
null
)
{
let
chars
=
'
0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
'
.
split
(
''
);
let
uuid
=
[];
radix
=
radix
||
chars
.
length
;
if
(
len
)
{
// 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
for
(
let
i
=
0
;
i
<
len
;
i
++
)
uuid
[
i
]
=
chars
[
0
|
Math
.
random
()
*
radix
];
}
else
{
let
r
;
// rfc4122标准要求返回的uuid中,某些位为固定的字符
uuid
[
8
]
=
uuid
[
13
]
=
uuid
[
18
]
=
uuid
[
23
]
=
'
-
'
;
uuid
[
14
]
=
'
4
'
;
for
(
let
i
=
0
;
i
<
36
;
i
++
)
{
if
(
!
uuid
[
i
])
{
r
=
0
|
Math
.
random
()
*
16
;
uuid
[
i
]
=
chars
[(
i
==
19
)
?
(
r
&
0x3
)
|
0x8
:
r
];
}
}
}
// 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
if
(
firstU
)
{
uuid
.
shift
();
return
'
u
'
+
uuid
.
join
(
''
);
}
else
{
return
uuid
.
join
(
''
);
}
}
function
platform
()
{
let
val
=
null
;
// #ifdef VUE3
val
=
'
VUE3
'
// #endif
// #ifdef APP-PLUS
val
=
'
APP-PLUS
'
// #endif
// #ifdef APP-PLUS-NVUE || APP-NVUE
val
=
'
NVUE
'
// #endif
// #ifdef H5
val
=
'
H5
'
// #endif
// #ifdef MP-WEIXIN
val
=
'
MP-WEIXIN
'
// #endif
// #ifdef MP-ALIPAY
val
=
'
MP-ALIPAY
'
// #endif
// #ifdef MP-BAIDU
val
=
'
MP-BAIDU
'
// #endif
// #ifdef MP-TOUTIAO
val
=
'
MP-TOUTIAO
'
// #endif
// #ifdef MP-LARK
val
=
'
MP-LARK
'
// #endif
// #ifdef MP-TOUTIAO
val
=
'
MP-QQ
'
// #endif
// #ifdef MP-KUAISHOU
val
=
'
MP-KUAISHOU
'
// #endif
// #ifdef MP-360
val
=
'
MP-360
'
// #endif
// #ifdef QUICKAPP-WEBVIEW
val
=
'
QUICKAPP-WEBVIEW
'
// #endif
// #ifdef QUICKAPP-WEBVIEW-UNION
val
=
'
QUICKAPP-WEBVIEW-UNION
'
// #endif
// #ifdef QUICKAPP-WEBVIEW-HUAWEI
val
=
'
QUICKAPP-WEBVIEW-HUAWEI
'
// #endif
return
val
;
}
export
{
deepClone
,
getUUid
,
platform
};
uni_modules/wmf-code/components/w-barcode/w-barcode.vue
0 → 100644
浏览文件 @
87135bda
<
template
>
<view
@
longtap.stop=
"longtap"
>
<canvas
:width=
"info.orient == 'vertical' ? info.destHeight : info.destWidth "
:height=
"info.orient == 'vertical' ? info.destWidth : info.destHeight"
:canvas-id=
"item.id"
:id=
"item.id"
:style=
"
{width:info.orient == 'vertical' ? info.height : info.width,height: info.orient == 'vertical' ? info.width : info.height}"
v-for="item in info.listCode"
:key="item.id"
@error="handleError">
</canvas>
</view>
</
template
>
<!-- #ifdef VUE3 -->
<
script
setup
name=
"WBarcode"
>
import
{
reactive
,
watch
,
onMounted
,
nextTick
,
getCurrentInstance
,
defineExpose
}
from
'
vue
'
;
import
{
BarCode
,
GetImg
,
GetPixelRatio
,
GetPx
,
}
from
'
../../js_sdk/index.js
'
;
import
{
getUUid
,
deepClone
,
platform
,
}
from
'
../../common/helper.js
'
//定义props
const
props
=
defineProps
({
options
:{
type
:
Object
,
required
:
true
,
default
:
()
=>
{
return
{}
}
}
});
const
emits
=
defineEmits
([
'
generate
'
,
'
press
'
,
'
error
'
])
const
opt
=
props
.
options
;
const
that
=
getCurrentInstance
();
const
HSize
=
opt
.
text
?
opt
.
text
.
size
||
40
+
opt
.
text
.
padding
||
20
:
0
;
let
info
=
reactive
({
id
:
getUUid
(),
destWidth
:
GetPixelRatio
()
*
GetPx
(
opt
.
width
)
+
'
px
'
,
destHeight
:
GetPixelRatio
()
*
GetPx
(
opt
.
height
+
HSize
)
+
'
px
'
,
width
:
GetPx
(
opt
.
width
)
+
'
px
'
,
height
:
GetPx
(
opt
.
height
+
HSize
)
+
'
px
'
,
orient
:
opt
.
orient
||
'
horizontal
'
,
listCode
:
[]
})
onMounted
(()
=>
{
SpecialTreatment
(
opt
);
nextTick
(()
=>
{
generateCode
(
opt
)
})
});
watch
(()
=>
props
.
options
,(
val
)
=>
{
SpecialTreatment
(
val
);
const
HSize
=
val
.
text
?
val
.
text
.
size
||
40
+
val
.
text
.
padding
||
20
:
0
;
info
.
destWidth
=
GetPixelRatio
()
*
GetPx
(
val
.
width
)
+
'
px
'
,
info
.
destHeight
=
GetPixelRatio
()
*
GetPx
(
val
.
height
+
HSize
)
+
'
px
'
,
info
.
orient
=
val
.
orient
||
'
horizontal
'
,
info
.
width
=
GetPx
(
val
.
width
)
+
'
px
'
,
info
.
height
=
GetPx
(
val
.
height
+
HSize
)
+
'
px
'
,
setTimeout
(()
=>
{
generateCode
(
val
)
},
100
)
},{
deep
:
true
})
const
generateCode
=
(
val
)
=>
{
try
{
const
parameter
=
{...
val
,
orient
:
info
.
orient
,
source
:
platform
(),
id
:
info
.
id
,
ctx
:
that
};
BarCode
(
parameter
,(
res
)
=>
{
emits
(
'
generate
'
,
res
)
})
}
catch
(
err
){
console
.
warn
(
err
)}
}
const
GetCodeImg
=
async
()
=>
{
try
{
return
await
GetImg
({
id
:
info
.
id
,
source
:
platform
(),
width
:
opt
.
orient
==
'
vertical
'
?
opt
.
height
:
opt
.
width
,
height
:
opt
.
orient
==
'
vertical
'
?
opt
.
width
:
opt
.
height
,
ctx
:
that
});
}
catch
(
e
){
console
.
warn
(
e
)}
};
const
SpecialTreatment
=
(
val
)
=>
{
//渲染多个canvas特殊处理
let
obj
=
deepClone
(
val
);
obj
.
id
=
info
.
id
;
info
.
listCode
=
[
obj
];
};
// 长按事件
const
longtap
=
(
e
)
=>
{
emits
(
'
press
'
,
e
)
}
// canvas创建错误 触发
const
handleError
=
(
e
)
=>
{
emits
(
'
error
'
,
e
.
detail
)
}
defineExpose
({
GetCodeImg
})
</
script
>
<!-- #endif -->
<!-- #ifndef VUE3 -->
<
script
>
import
{
BarCode
,
GetImg
,
GetPixelRatio
,
GetPx
}
from
'
../../js_sdk/index.js
'
;
import
{
getUUid
,
deepClone
,
platform
}
from
'
../../common/helper.js
'
export
default
{
name
:
'
WBarcode
'
,
props
:{
options
:{
type
:
Object
,
required
:
true
,
default
:
()
=>
{
return
{
}
}
}
},
data
()
{
return
{
info
:{
destHeight
:
0
,
destWidth
:
0
,
width
:
0
,
height
:
0
,
listCode
:
[],
orient
:
'
horizontal
'
},
id
:
getUUid
()
}
},
mounted
()
{
const
HSize
=
this
.
options
.
text
?
((
this
.
options
.
text
.
size
||
40
)
+
(
this
.
options
.
text
.
padding
||
20
))
:
0
;
this
.
info
.
height
=
GetPx
(
this
.
options
.
height
+
HSize
)
+
'
px
'
;
this
.
info
.
orient
=
this
.
options
.
orient
||
'
horizontal
'
;
this
.
info
.
width
=
GetPx
(
this
.
options
.
width
)
+
'
px
'
;
this
.
info
.
destHeight
=
GetPx
(
this
.
options
.
height
+
HSize
)
*
GetPixelRatio
()
+
'
px
'
;
this
.
info
.
destWidth
=
GetPx
(
this
.
options
.
width
)
*
GetPixelRatio
()
+
'
px
'
;
this
.
SpecialTreatment
(
this
.
options
)
this
.
$nextTick
(()
=>
{
this
.
generateCode
();
})
},
watch
:
{
options
:{
deep
:
true
,
handler
(
val
)
{
const
HSize
=
val
.
text
?
val
.
text
.
size
||
40
+
val
.
text
.
padding
||
20
:
0
;
this
.
info
.
height
=
GetPx
(
val
.
height
+
HSize
)
+
'
px
'
;
this
.
info
.
width
=
GetPx
(
val
.
width
)
+
'
px
'
;
this
.
info
.
destHeight
=
GetPx
(
val
.
height
+
HSize
)
*
GetPixelRatio
()
+
'
px
'
;
this
.
info
.
destWidth
=
GetPx
(
val
.
width
)
*
GetPixelRatio
()
+
'
px
'
;
this
.
info
.
orient
=
val
.
orient
||
'
horizontal
'
this
.
SpecialTreatment
(
val
)
setTimeout
(()
=>
{
// h5平台动态改变canvas大小
this
.
generateCode
();
},
100
)
}
}
},
methods
:
{
longtap
(
e
){
this
.
$emit
(
'
press
'
,
e
)
},
handleError
(
e
)
{
//当发生错误时触发 error 事件,字节跳动小程序与飞书小程序不支持
this
.
$emit
(
'
error
'
,
e
.
detail
)
},
SpecialTreatment
(
val
)
{
//微信小程序渲染多个canvas特殊处理
let
obj
=
deepClone
(
val
);
obj
.
id
=
this
.
id
;
this
.
info
.
listCode
=
[
obj
]
},
generateCode
()
{
try
{
const
parameter
=
{...
this
.
options
,
orient
:
this
.
info
.
orient
,
source
:
platform
(),
id
:
this
.
id
,
ctx
:
this
};
BarCode
(
parameter
,(
res
)
=>
{
this
.
$emit
(
'
generate
'
,
res
)
})
}
catch
(
err
){
console
.
log
(
err
)}
},
async
GetCodeImg
(){
try
{
const
pars
=
{
id
:
this
.
id
,
source
:
platform
(),
width
:
this
.
options
.
orient
==
'
vertical
'
?
this
.
info
.
height
:
this
.
info
.
width
,
height
:
this
.
options
.
orient
==
'
vertical
'
?
this
.
info
.
width
:
this
.
info
.
height
,
ctx
:
this
,
}
return
await
GetImg
(
pars
);
}
catch
(
e
){
console
.
warn
(
e
)}
}
}
}
</
script
>
<!-- #endif -->
uni_modules/wmf-code/components/w-qrcode/w-qrcode.vue
0 → 100644
浏览文件 @
87135bda
<
template
>
<view
@
longtap.stop=
"longtap"
>
<canvas
:width=
"info.destWidth"
:height=
"info.destHeight"
:canvas-id=
"item.id"
:id=
"item.id"
:style=
"
{width:info.width,height: info.height}"
v-for="item in info.listCode"
:key="item.id"
@error="handleError">
</canvas>
</view>
</
template
>
<!-- #ifdef VUE3 -->
<
script
setup
name=
"WQrcode"
>
import
{
reactive
,
watch
,
onMounted
,
nextTick
,
getCurrentInstance
,
defineExpose
}
from
'
vue
'
;
import
{
QRCode
,
GetImg
,
GetPixelRatio
,
GetPx
}
from
'
@/uni_modules/wmf-code/js_sdk/index.js
'
;
import
{
getUUid
,
deepClone
,
platform
}
from
'
../../common/helper.js
'
//定义props
const
props
=
defineProps
({
options
:{
type
:
Object
,
required
:
true
,
default
:
()
=>
{
return
{}
}
}
});
const
emits
=
defineEmits
([
'
generate
'
,
'
press
'
,
'
error
'
])
const
opt
=
props
.
options
;
const
that
=
getCurrentInstance
();
const
SIZE
=
GetPx
(
opt
.
size
);
let
info
=
reactive
({
destHeight
:
SIZE
*
GetPixelRatio
()
+
'
px
'
,
destWidth
:
SIZE
*
GetPixelRatio
()
+
'
px
'
,
width
:
SIZE
+
'
px
'
,
height
:
SIZE
+
'
px
'
,
listCode
:[],
id
:
getUUid
(),
})
onMounted
(()
=>
{
SpecialTreatment
(
opt
);
nextTick
(()
=>
{
generateCode
(
opt
)
})
});
watch
(()
=>
props
.
options
,(
val
)
=>
{
SpecialTreatment
(
val
);
const
SIZE_Dynamic
=
GetPx
(
val
.
size
);
info
.
destWidth
=
GetPixelRatio
()
*
SIZE_Dynamic
+
'
px
'
,
info
.
destHeight
=
GetPixelRatio
()
*
SIZE_Dynamic
+
'
px
'
,
info
.
width
=
SIZE_Dynamic
+
'
px
'
,
info
.
height
=
SIZE_Dynamic
+
'
px
'
,
setTimeout
(()
=>
{
generateCode
(
val
)
},
50
)
},{
deep
:
true
})
const
SpecialTreatment
=
(
val
)
=>
{
//渲染多个canvas特殊处理
let
obj
=
deepClone
(
val
);
obj
.
id
=
info
.
id
;
info
.
listCode
=
[
obj
]
};
const
generateCode
=
(
val
)
=>
{
try
{
const
parameter
=
{...
val
,
source
:
platform
(),
id
:
info
.
id
,
ctx
:
that
};
QRCode
(
parameter
,(
res
)
=>
{
emits
(
'
generate
'
,
res
)
})
}
catch
(
err
){
console
.
warn
(
err
)}
};
const
GetCodeImg
=
async
()
=>
{
try
{
return
await
GetImg
({
id
:
info
.
id
,
source
:
platform
(),
width
:
opt
.
width
,
height
:
opt
.
height
,
ctx
:
that
});
}
catch
(
e
){
console
.
warn
(
e
)}
};
// 长按事件
const
longtap
=
(
e
)
=>
{
emits
(
'
press
'
,
e
)
}
// canvas创建错误 触发
const
handleError
=
(
e
)
=>
{
emits
(
'
error
'
,
e
.
detail
)
}
defineExpose
({
GetCodeImg
})
</
script
>
<!-- #endif -->
<!-- #ifndef VUE3 -->
<
script
>
import
{
QRCode
,
GetImg
,
GetPixelRatio
,
GetPx
}
from
'
@/uni_modules/wmf-code/js_sdk/index.js
'
;
import
{
getUUid
,
deepClone
,
platform
}
from
'
../../common/helper.js
'
export
default
{
name
:
'
WQrcode
'
,
props
:{
options
:{
type
:
Object
,
required
:
true
,
default
:
()
=>
{
return
{
}
}
}
},
data
()
{
return
{
info
:{
destHeight
:
0
,
destWidth
:
0
,
width
:
0
,
height
:
0
,
listCode
:[],
},
destHeight
:
0
,
destWidth
:
0
,
width
:
0
,
height
:
0
,
listCode
:[],
id
:
getUUid
(),
}
},
mounted
()
{
this
.
info
.
height
=
this
.
info
.
width
=
GetPx
(
this
.
options
.
size
)
+
'
px
'
;
this
.
info
.
destHeight
=
this
.
info
.
destWidth
=
GetPx
(
this
.
options
.
size
)
*
GetPixelRatio
()
+
'
px
'
;
this
.
SpecialTreatment
(
this
.
options
)
this
.
$nextTick
(()
=>
{
this
.
generateCode
();
})
},
watch
:
{
options
:{
deep
:
true
,
handler
(
val
)
{
this
.
info
.
height
=
this
.
info
.
width
=
GetPx
(
val
.
size
)
+
'
px
'
;
this
.
info
.
destHeight
=
this
.
info
.
destWidth
=
GetPx
(
val
.
size
)
*
GetPixelRatio
()
+
'
px
'
;
this
.
SpecialTreatment
(
val
)
setTimeout
(()
=>
{
// h5平台动态改变canvas大小
this
.
generateCode
();
},
50
)
}
}
},
methods
:
{
longtap
(
e
){
// 长按事件
this
.
$emit
(
'
press
'
,
e
);
},
handleError
(
e
)
{
//当发生错误时触发 error 事件,字节跳动小程序与飞书小程序不支持
this
.
$emit
(
'
error
'
,
e
.
detail
)
},
SpecialTreatment
(
val
)
{
//微信小程序渲染多个canvas特殊处理
let
obj
=
deepClone
(
val
);
obj
.
id
=
this
.
id
;
this
.
info
.
listCode
=
[
obj
]
},
// 生成二维码
generateCode
()
{
try
{
const
parameter
=
{...
this
.
options
,
source
:
platform
(),
id
:
this
.
id
,
ctx
:
this
};
QRCode
(
parameter
,(
res
)
=>
{
this
.
$emit
(
'
generate
'
,
res
)
})
}
catch
(
err
){
console
.
warn
(
err
)}
},
// 获取二维码图片
async
GetCodeImg
(){
try
{
return
await
GetImg
({
id
:
this
.
id
,
source
:
platform
(),
width
:
this
.
options
.
size
,
height
:
this
.
options
.
size
,
ctx
:
this
});
}
catch
(
e
){
console
.
warn
(
e
)}
}
}
}
</
script
>
<!-- #endif -->
\ No newline at end of file
uni_modules/wmf-code/js_sdk/index.js
0 → 100644
浏览文件 @
87135bda
此差异已折叠。
点击以展开。
uni_modules/wmf-code/package.json
0 → 100644
浏览文件 @
87135bda
{
"id"
:
"wmf-code"
,
"displayName"
:
"二维码 条形码生成 支持链接 支持nvue 支持纯文字"
,
"version"
:
"1.6.2"
,
"description"
:
"二维码 条形码生成,支持渐变色边框 保存二维码图片,支持链接 ,支持nvue 支持纯文字"
,
"keywords"
:
[
"二维码"
,
"条形码"
],
"repository"
:
"https://github.com/lovewmf/uni-code"
,
"engines"
:
{
},
"dcloudext"
:
{
"sale"
:
{
"regular"
:
{
"price"
:
"0.00"
},
"sourcecode"
:
{
"price"
:
"0.00"
}
},
"contact"
:
{
"qq"
:
""
},
"declaration"
:
{
"ads"
:
"无"
,
"data"
:
"无 "
,
"permissions"
:
"无 "
},
"npmurl"
:
"https://www.npmjs.com/package/@uni-ui/code-ui"
,
"type"
:
"sdk-js"
},
"uni_modules"
:
{
"dependencies"
:
[],
"encrypt"
:
[],
"platforms"
:
{
"cloud"
:
{
"tcb"
:
"y"
,
"aliyun"
:
"y"
},
"client"
:
{
"App"
:
{
"app-vue"
:
"y"
,
"app-nvue"
:
"y"
},
"H5-mobile"
:
{
"Safari"
:
"y"
,
"Android Browser"
:
"y"
,
"微信浏览器(Android)"
:
"y"
,
"QQ浏览器(Android)"
:
"y"
},
"H5-pc"
:
{
"Chrome"
:
"y"
,
"IE"
:
"y"
,
"Edge"
:
"y"
,
"Firefox"
:
"y"
,
"Safari"
:
"y"
},
"小程序"
:
{
"微信"
:
"y"
,
"阿里"
:
"y"
,
"百度"
:
"y"
,
"字节跳动"
:
"y"
,
"QQ"
:
"y"
},
"快应用"
:
{
"华为"
:
"y"
,
"联盟"
:
"y"
},
"Vue"
:
{
"vue2"
:
"y"
,
"vue3"
:
"y"
}
}
}
}
}
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录