云南网站建设选天软,腾脉网建站,关于网页制作,企业推广专员招聘文章目录一、可见范围1. 自己发布短视频2. 其他人发布短视频二、源码分析2.1. 底部窗口popup2.2. 实现组件uQRCode2.3. 插件涉及组件2.4. 组件改造2.5. 实现原理三、作品鉴赏3.1. 生成短视频二维码3.2. 微信扫描3.3. 抖音扫描一、可见范围 保存到相册、复制链接、二维码 都是前… 文章目录一、可见范围1. 自己发布短视频2. 其他人发布短视频二、源码分析2.1. 底部窗口popup2.2. 实现组件uQRCode2.3. 插件涉及组件2.4. 组件改造2.5. 实现原理三、作品鉴赏3.1. 生成短视频二维码3.2. 微信扫描3.3. 抖音扫描一、可见范围 保存到相册、复制链接、二维码 都是前端完成的 1. 自己发布短视频
自己发布的短视频会有“保存到相册、复制链接、二维码、转为私密”
2. 其他人发布短视频
其他人发布短视频自己只能看到“保存到相册、复制链接、二维码”
二、源码分析
2.1. 底部窗口popup
view!-- 底部窗口popup --uni-popup refcomment typecommentuni-popup-comments :thisVlogerIdthisVlogerId :thisVlogIdthisVlogId/uni-popup-comments/uni-popupuni-popup refshare background-color#fff typeshareuni-popup-share :thisVlogerIdthisVlogerId :thisVlogIdthisVlogId :vlogUrlthisVlog.url:isPrivatethisVlog.isPrivate/uni-popup-share/uni-popup/view2.2. 实现组件uQRCode
插件链接https://ext.dcloud.net.cn/plugin?id1287
组件案例
2.3. 插件涉及组件 2.4. 组件改造
uQRCode基于uqrcode.js实现 gotoQRCode() {uni.navigateTo({url: /pages/qrcode/qrcode?vlogId this.thisVlogId})},
onReady() {var vlogId this.vlogId;var content {type: vlog,content: vlogId};var contentStr JSON.stringify(content);uQRCode.make({canvasId: qrcode,componentInstance: this,size: 170,margin: 10,text: contentStr,backgroundColor: #ffffff,foregroundColor: #0f0827,fileType: png,errorCorrectLevel: uQRCode.errorCorrectLevel.H}).then(res {})},2.5. 实现原理
1.其实生成短视频二维码就是短视频的发布ID2.当微信扫描只会显示二维码生成的type和content文字内容是因为没有对文字进行其他的操作。3.咱们抖音app当你扫描二维码时做了以下几件事 3.1. 第一件事和微信扫描一样解析二维码后面的文字信息3.2. 获取短视频发布ID后调用了后端短视频详情的api接口3.3.调用完接口后有对短视频详情进行了短视频信息转视频的处理其实就是预览短视频而已和搜索页面实现的原理是一样的。 后期会补充实现原理流程图为大家详细揭晓 三、作品鉴赏
3.1. 生成短视频二维码 3.2. 微信扫描 3.3. 抖音扫描
