Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
xtdx1215
uni-starter
提交
bddca522
U
uni-starter
项目概览
xtdx1215
/
uni-starter
与 Fork 源项目一致
Fork自
DCloud / uni-starter
通知
4
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-starter
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
bddca522
编写于
4月 28, 2021
作者:
DCloud_JSON
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修改limeClipper插件中的stylus为普通css
上级
e0a62a01
变更
6
显示空白变更内容
内联
并排
Showing
6 changed file
with
349 addition
and
9 deletion
+349
-9
README.md
README.md
+11
-1
components/Sansnn-uQRCode/README.md
components/Sansnn-uQRCode/README.md
+172
-0
pages/list/detail.vue
pages/list/detail.vue
+2
-4
pages/ucenter/userinfo/limeClipper/README.md
pages/ucenter/userinfo/limeClipper/README.md
+2
-2
pages/ucenter/userinfo/limeClipper/index.css
pages/ucenter/userinfo/limeClipper/index.css
+160
-0
pages/ucenter/userinfo/limeClipper/limeClipper.vue
pages/ucenter/userinfo/limeClipper/limeClipper.vue
+2
-2
未找到文件。
README.md
浏览文件 @
bddca522
...
...
@@ -25,3 +25,13 @@ base app将节省开发者大量的时间,让开发者集中精力在自己的
有了base app,再加上schema2code生成前端页面,一个简单应用就可以快速完成。
base app + uniCloud admin,应用开发从未如此简单快捷!
baseapp中的主要功能,插件列表
1.
uni-id用户体系
[
uni-id
](
https://uniapp.dcloud.io/uniCloud/uni-id
)
2.
分享功能插件
[
uni-share
](
https://ext.dcloud.net.cn/plugin?id=4860
)
3.
升级中心
[
uni-upgrade-center
](
https://ext.dcloud.net.cn/plugin?id=4542
)
4.
云端一体搜索模板
[
uni-search-template
](
https://ext.dcloud.net.cn/plugin?id=3851
)
第三方插件(感谢插件作者,排名不分前后):
1.
[
limeClipper
](
https://ext.dcloud.net.cn/plugin?id=3594
)
@作者: 陌上华年
2.
[
Sansnn-uQRCode
](
https://ext.dcloud.net.cn/plugin?id=1287
)
@作者: 3snn
\ No newline at end of file
components/Sansnn-uQRCode/README.md
0 → 100644
浏览文件 @
bddca522
> 插件来源:[https://ext.dcloud.net.cn/plugin?id=1287](https://ext.dcloud.net.cn/plugin?id=1287)
##### 以下是作者写的插件介绍:
# uQRCode
### 云函数版二维码生成插件explain-qrcode现已发布,URL化后一句代码即可生成,有网就有二维码,100%生成成功,不会因为平台差异,设备差异导致生成失败,无需在前端做适配和兼容,极力推荐。插件地址:[explain-qrcode云函数二维码生成](https://ext.dcloud.net.cn/plugin?id=3359)
uQRCode 生成方式简单,可扩展性高,如有复杂需求可通过自定义组件或修改源码完成需求。已测试H5、微信小程序、iPhoneXsMax真机。
本示例项目中的自定义组件旨在抛砖引玉,有其他需求的朋友可自行扩展,自定义组件参考
``/components/uni-qrcode/uni-qrcode.vue``
,自定义组件使用案例参考
``/pages/component/qrcode/qrcode.vue``
。
联系方式:QQ540000228。
最近一次用于更新代码的 HBuilder X 版本为 2.8.11。
### 二维码
**什么是QR码**
QR码属于矩阵式二维码中的一个种类,由DENSO(日本电装)公司开发,由JIS和ISO将其标准化。
**QR码的特点**
一是高速读取(QR就是取自“Quick Response”的首字母),通过摄像头从拍摄到解码到显示内容也就三秒左右,对摄像的角度也没有什么要求;
二是高容量、高密度,理论上内容经过压缩处理后可以存7089个数字,4296个字母和数字混合字符,2953个8位字节数据,1817个汉字;
三是支持纠错处理,按照QR码的标准文档说明,QR码的纠错分为4个级别,分别是:
-
level L : 最大 7% 的错误能够被纠正;
-
level M : 最大 15% 的错误能够被纠正;
-
level Q : 最大 25% 的错误能够被纠正;
-
level H : 最大 30% 的错误能够被纠正;
四是结构化,看似无规则的图形,其实对区域有严格的定义。
更多二维码介绍及原理:
[
https://blog.csdn.net/jason_ldh/article/details/11801355
](
https://blog.csdn.net/jason_ldh/article/details/11801355
)
### 使用方式
在
``script``
中引用组件
```
javascript
import
uQRCode
from
'
@/common/uqrcode.js
'
```
在
``template``
中创建
``<canvas></canvas>``
```
html
<canvas
canvas-id=
"qrcode"
style=
"width: 354px;height: 354px;"
></canvas>
```
在
``script``
中调用
``make()``
方法
```
javascript
export
default
{
methods
:
{
async
make
()
{
// 回调方式
uQRCode
.
make
({
canvasId
:
'
qrcode
'
,
componentInstance
:
this
,
text
:
'
uQRCode
'
,
size
:
354
,
margin
:
10
,
backgroundColor
:
'
#ffffff
'
,
foregroundColor
:
'
#000000
'
,
fileType
:
'
jpg
'
,
errorCorrectLevel
:
uQRCode
.
errorCorrectLevel
.
H
,
success
:
res
=>
{
console
.
log
(
res
)
}
})
// Promise
uQRCode
.
make
({
canvasId
:
'
qrcode
'
,
componentInstance
:
this
,
text
:
'
uQRCode
'
,
size
:
354
,
margin
:
10
,
backgroundColor
:
'
#ffffff
'
,
foregroundColor
:
'
#000000
'
,
fileType
:
'
jpg
'
,
errorCorrectLevel
:
uQRCode
.
errorCorrectLevel
.
H
}).
then
(
res
=>
{
console
.
log
(
res
)
})
// 同步等待
var
res
=
await
uQRCode
.
make
({
canvasId
:
'
qrcode
'
,
componentInstance
:
this
,
text
:
'
uQRCode
'
,
size
:
354
,
margin
:
10
,
backgroundColor
:
'
#ffffff
'
,
foregroundColor
:
'
#000000
'
,
fileType
:
'
jpg
'
,
errorCorrectLevel
:
uQRCode
.
errorCorrectLevel
.
H
})
console
.
log
(
res
)
}
}
}
```
### 属性说明
|属性名|说明|
|---|:---|
|errorCorrectLevel|纠错等级,包含
`errorCorrectLevel.L`
、
`errorCorrectLevel.M`
、
`errorCorrectLevel.Q`
、
`errorCorrectLevel.H`
四个级别,
`L`
: 最大 7% 的错误能够被纠正;
`M`
: 最大 15% 的错误能够被纠正;
`Q`
: 最大 25% 的错误能够被纠正;
`H`
: 最大 30% 的错误能够被纠正。|
|defaults|二维码生成参数的默认值。|
### 方法说明
|方法名|说明|
|---|:---|
|
[
make
](
#makeoptions
)
|生成二维码。|
### make(options)
生成二维码
**options参数说明:**
|参数|类型|必填|说明|
|---|---|---|:---|
|canvasId|String|是|画布标识,传入
`<canvas></canvas>`
的
`canvas-id`
|
|componentInstance|Object|否|自定义组件实例
`this`
,表示在这个自定义组件下查找拥有
`canvas-id`
的
`<canvas></canvas>`
,如果省略,则不在任何自定义组件内查找|
|text|String|是|二维码内容|
|size|Number|否|画布尺寸大小,请与
`<canvas></canvas>`
所设
`width`
,
`height`
保持一致(默认:
`354`
)|
|margin|Number|否|边距,二维码实际尺寸会根据所设边距值进行缩放调整(默认:
`0`
)|
|backgroundColor|String|否|背景色,若设置为透明背景,
`fileType`
需设置为
`'png'`
, 然后设置背景色为
`'rgba(255,255,255,0)'`
即可(默认:
`'#ffffff'`
)|
|foregroundColor|String|否|前景色(默认:
`'#000000'`
)|
|fileType|String|否|输出图片的类型,只支持
`'jpg'`
和
`'png'`
(默认:
`'png'`
)|
|errorCorrectLevel|Number|否|纠错等级,参考属性说明
`errorCorrectLevel`
(默认:
`errorCorrectLevel.H`
)|
### 使用建议
canvas在二维码生成中请当做一个生成工具来看待,它的作用仅是绘制出二维码。应把生成回调得到的资源保存并使用,显示用image图片组件,原因是方便操作,例如调整大小,或是H5端长按保存或识别,所以canvas应将它放在看不见的地方。不能用
`display:none;overflow:hidden;`
隐藏,否则生成空白。这里推荐canvas的隐藏样式代码
```
html
<style>
.canvas-hide
{
/* 1 */
position
:
fixed
;
right
:
100vw
;
bottom
:
100vh
;
/* 2 */
z-index
:
-9999
;
/* 3 */
opacity
:
0
;
}
</style>
```
### 常见问题
**二维码生成不完整**
canvas宽高必须和size一致,并且size的单位是px,如果canvas的单位是rpx,那么不同设备屏幕分辨率不一样,rpx转换成px后的画布尺寸不足以放下全部内容,实际绘制图案超出,就会出现不完整的情况。
**如何扫码跳转指定网页**
text参数直接放入完整的网页地址即可,例如:
`https://ext.dcloud.net.cn/plugin?id=1287`
。微信客户端不能是ip地址。
**小程序、APP报错**
canvas不支持放在
`slot`
插槽,请尽量放在模板根节点,也就是第一个
`<view></view>`
标签里面
**H5长按识别**
canvas无法长按识别,长按识别需要是图片才行,所以只需将回调过来的资源用image组件显示即可。
### Tips
-
示例项目中的图片采集于互联网,仅作为案例展示,不作为广告/商业,如有侵权,请告知删除。下载使用的用户,请勿把示例项目中的图片应用到你的项目。
\ No newline at end of file
pages/list/detail.vue
浏览文件 @
bddca522
...
...
@@ -79,7 +79,7 @@
'
userInfo
'
:
'
user/info
'
,
'
hasLogin
'
:
'
user/hasLogin
'
}),
baseappConfig
(){
baseappConfig
()
{
return
getApp
().
globalData
.
config
}
},
...
...
@@ -143,8 +143,6 @@
.
catch
(
err
=>
{
console
.
log
(
err
);
})
},
loadData
(
data
)
{
//如果上一页未传递标题过来(如搜索直达详情),则从新闻详情中读取标题
...
...
pages/ucenter/userinfo/limeClipper/README.md
浏览文件 @
bddca522
插件来源:
[
https://ext.dcloud.net.cn/plugin?id=3594
](
https://ext.dcloud.net.cn/plugin?id=3594
)
以下是插件作者
的插件介绍:
>
插件来源:[https://ext.dcloud.net.cn/plugin?id=3594](https://ext.dcloud.net.cn/plugin?id=3594)
##### 以下是作者写
的插件介绍:
# Clipper 图片裁剪
> uniapp 图片裁剪,可用于图片头像等裁剪处理
...
...
pages/ucenter/userinfo/limeClipper/index.css
0 → 100644
浏览文件 @
bddca522
.flex-auto
{
flex
:
auto
;
}
.bg-transparent
{
background-color
:
rgba
(
0
,
0
,
0
,
0.9
);
transition-duration
:
0.35s
;
}
.l-clipper
{
width
:
100vw
;
height
:
calc
(
100vh
-
var
(
--window-top
));
background-color
:
rgba
(
0
,
0
,
0
,
0.9
);
position
:
fixed
;
top
:
var
(
--window-top
);
left
:
0
;
z-index
:
1
;
}
.l-clipper-mask
{
position
:
relative
;
z-index
:
2
;
pointer-events
:
none
;
}
.l-clipper__content
{
pointer-events
:
none
;
position
:
absolute
;
border
:
1
rpx
solid
rgba
(
255
,
255
,
255
,
0.3
);
box-sizing
:
border-box
;
box-shadow
:
rgba
(
0
,
0
,
0
,
0.5
)
0
0
0
80vh
;
background
:
transparent
;
}
.l-clipper__content
::before
,
.l-clipper__content
::after
{
content
:
''
;
position
:
absolute
;
border
:
1
rpx
dashed
rgba
(
255
,
255
,
255
,
0.3
);
}
.l-clipper__content
::before
{
width
:
100%
;
top
:
33.33%
;
height
:
33.33%
;
border-left
:
none
;
border-right
:
none
;
}
.l-clipper__content
::after
{
width
:
33.33%
;
left
:
33.33%
;
height
:
100%
;
border-top
:
none
;
border-bottom
:
none
;
}
.l-clipper__edge
{
position
:
absolute
;
width
:
34
rpx
;
height
:
34
rpx
;
border
:
6
rpx
solid
#fff
;
pointer-events
:
auto
;
}
.l-clipper__edge
::before
{
content
:
''
;
position
:
absolute
;
width
:
40
rpx
;
height
:
40
rpx
;
background-color
:
transparent
;
}
.l-clipper__edge
:nth-child
(
1
)
{
left
:
-6
rpx
;
top
:
-6
rpx
;
border-bottom-width
:
0
!important
;
border-right-width
:
0
!important
;
}
.l-clipper__edge
:nth-child
(
1
)
:before
{
top
:
-50%
;
left
:
-50%
;
}
.l-clipper__edge
:nth-child
(
2
)
{
right
:
-6
rpx
;
top
:
-6
rpx
;
border-bottom-width
:
0
!important
;
border-left-width
:
0
!important
;
}
.l-clipper__edge
:nth-child
(
2
)
:before
{
top
:
-50%
;
left
:
50%
;
}
.l-clipper__edge
:nth-child
(
3
)
{
left
:
-6
rpx
;
bottom
:
-6
rpx
;
border-top-width
:
0
!important
;
border-right-width
:
0
!important
;
}
.l-clipper__edge
:nth-child
(
3
)
:before
{
bottom
:
-50%
;
left
:
-50%
;
}
.l-clipper__edge
:nth-child
(
4
)
{
right
:
-6
rpx
;
bottom
:
-6
rpx
;
border-top-width
:
0
!important
;
border-left-width
:
0
!important
;
}
.l-clipper__edge
:nth-child
(
4
)
:before
{
bottom
:
-50%
;
left
:
50%
;
}
.l-clipper-image
{
width
:
100%
;
border-style
:
none
;
position
:
absolute
;
top
:
0
;
left
:
0
;
z-index
:
1
;
-webkit-backface-visibility
:
hidden
;
backface-visibility
:
hidden
;
transform-origin
:
center
;
}
.l-clipper-canvas
{
position
:
fixed
;
z-index
:
10
;
left
:
-200vw
;
top
:
-200vw
;
pointer-events
:
none
;
}
.l-clipper-tools
{
position
:
fixed
;
left
:
0
;
bottom
:
10px
;
width
:
100%
;
z-index
:
99
;
color
:
#fff
;
}
.l-clipper-tools__btns
{
font-weight
:
bold
;
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
;
width
:
100%
;
padding
:
20
rpx
40
rpx
;
box-sizing
:
border-box
;
}
.l-clipper-tools__btns
.cancel
{
width
:
112
rpx
;
height
:
60
rpx
;
text-align
:
center
;
line-height
:
60
rpx
;
}
.l-clipper-tools__btns
.confirm
{
width
:
112
rpx
;
height
:
60
rpx
;
line-height
:
60
rpx
;
background-color
:
#07c160
;
border-radius
:
6
rpx
;
text-align
:
center
;
}
.l-clipper-tools__btns
image
{
display
:
block
;
width
:
60
rpx
;
height
:
60
rpx
;
}
.l-clipper-tools__btns
{
flex-direction
:
row
;
}
pages/ucenter/userinfo/limeClipper/limeClipper.vue
浏览文件 @
bddca522
...
...
@@ -689,6 +689,6 @@ export default {
};
</
script
>
<
style
lang=
"stylus"
scoped
>
@import './index'
<
style
scoped
>
@import
'./index
.css
'
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录