From bddca5228e87fc92d48d7fa2a81e46ef57caf521 Mon Sep 17 00:00:00 2001 From: linju-json Date: Wed, 28 Apr 2021 21:58:56 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9limeClipper=E6=8F=92=E4=BB=B6?= =?UTF-8?q?=E4=B8=AD=E7=9A=84stylus=E4=B8=BA=E6=99=AE=E9=80=9Acss?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 +- components/Sansnn-uQRCode/README.md | 172 ++++++++++++++++++ pages/list/detail.vue | 6 +- pages/ucenter/userinfo/limeClipper/README.md | 4 +- pages/ucenter/userinfo/limeClipper/index.css | 160 ++++++++++++++++ .../userinfo/limeClipper/limeClipper.vue | 4 +- 6 files changed, 349 insertions(+), 9 deletions(-) create mode 100644 components/Sansnn-uQRCode/README.md create mode 100644 pages/ucenter/userinfo/limeClipper/index.css diff --git a/README.md b/README.md index 20534698..a7ff579a 100644 --- a/README.md +++ b/README.md @@ -24,4 +24,14 @@ base app将节省开发者大量的时间，让开发者集中精力在自己的 有了base app，再加上schema2code生成前端页面，一个简单应用就可以快速完成。 -base app + uniCloud admin，应用开发从未如此简单快捷！ \ No newline at end of file +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 diff --git a/components/Sansnn-uQRCode/README.md b/components/Sansnn-uQRCode/README.md new file mode 100644 index 00000000..c99382f8 --- /dev/null +++ b/components/Sansnn-uQRCode/README.md @@ -0,0 +1,172 @@ +> 插件来源：[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`` 中创建 ```` + +```html + +``` + +在 ``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-id`| +|componentInstance|Object|否|自定义组件实例 `this` ，表示在这个自定义组件下查找拥有 `canvas-id` 的 `` ，如果省略，则不在任何自定义组件内查找| +|text|String|是|二维码内容| +|size|Number|否|画布尺寸大小，请与 `` 所设 `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 + +``` + +### 常见问题 +**二维码生成不完整** + +canvas宽高必须和size一致，并且size的单位是px，如果canvas的单位是rpx，那么不同设备屏幕分辨率不一样，rpx转换成px后的画布尺寸不足以放下全部内容，实际绘制图案超出，就会出现不完整的情况。 + +**如何扫码跳转指定网页** + +text参数直接放入完整的网页地址即可，例如：`https://ext.dcloud.net.cn/plugin?id=1287`。微信客户端不能是ip地址。 + +**小程序、APP报错** + +canvas不支持放在 `slot` 插槽，请尽量放在模板根节点，也就是第一个 `` 标签里面 + +**H5长按识别** + +canvas无法长按识别，长按识别需要是图片才行，所以只需将回调过来的资源用image组件显示即可。 + +### Tips +- 示例项目中的图片采集于互联网，仅作为案例展示，不作为广告/商业，如有侵权，请告知删除。下载使用的用户，请勿把示例项目中的图片应用到你的项目。 \ No newline at end of file diff --git a/pages/list/detail.vue b/pages/list/detail.vue index 6eff9970..2a5783a0 100644 --- a/pages/list/detail.vue +++ b/pages/list/detail.vue @@ -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) { //如果上一页未传递标题过来（如搜索直达详情），则从新闻详情中读取标题 @@ -337,4 +335,4 @@ font-size: 15px; overflow: hidden; } - + diff --git a/pages/ucenter/userinfo/limeClipper/README.md b/pages/ucenter/userinfo/limeClipper/README.md index 2f93bcd7..9219f815 100644 --- a/pages/ucenter/userinfo/limeClipper/README.md +++ b/pages/ucenter/userinfo/limeClipper/README.md @@ -1,5 +1,5 @@ -插件来源：[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 图片裁剪，可用于图片头像等裁剪处理 diff --git a/pages/ucenter/userinfo/limeClipper/index.css b/pages/ucenter/userinfo/limeClipper/index.css new file mode 100644 index 00000000..ce542bf1 --- /dev/null +++ b/pages/ucenter/userinfo/limeClipper/index.css @@ -0,0 +1,160 @@ +.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: 1rpx 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: 1rpx 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: 34rpx; + height: 34rpx; + border: 6rpx solid #fff; + pointer-events: auto; +} +.l-clipper__edge::before { + content: ''; + position: absolute; + width: 40rpx; + height: 40rpx; + background-color: transparent; +} +.l-clipper__edge:nth-child(1) { + left: -6rpx; + top: -6rpx; + 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: -6rpx; + top: -6rpx; + 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: -6rpx; + bottom: -6rpx; + 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: -6rpx; + bottom: -6rpx; + 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: 20rpx 40rpx; + box-sizing: border-box; +} +.l-clipper-tools__btns .cancel { + width: 112rpx; + height: 60rpx; + text-align: center; + line-height: 60rpx; +} +.l-clipper-tools__btns .confirm { + width: 112rpx; + height: 60rpx; + line-height: 60rpx; + background-color: #07c160; + border-radius: 6rpx; + text-align: center; +} +.l-clipper-tools__btns image { + display: block; + width: 60rpx; + height: 60rpx; +} +.l-clipper-tools__btns { + flex-direction: row; +} diff --git a/pages/ucenter/userinfo/limeClipper/limeClipper.vue b/pages/ucenter/userinfo/limeClipper/limeClipper.vue index 5eb630d4..09f9dcd0 100644 --- a/pages/ucenter/userinfo/limeClipper/limeClipper.vue +++ b/pages/ucenter/userinfo/limeClipper/limeClipper.vue @@ -689,6 +689,6 @@ export default { }; - -- GitLab