营销类wordpress主题,优化合作平台,湖北省住房和城乡建设部网站,wordpress获取某分类下最新文章最近在做二维码推广功能#xff0c;自从2020年下半年到今天#xff0c;大概有三年没有用过uniapp了#xff0c;而且我之前用uniapp开发的程序还比较少#xff0c;因此很多功能都浪费了很多时间去查资料#xff0c;现在把功能记录一下。 这里写目录标题 效果图1.根据接口返…最近在做二维码推广功能自从2020年下半年到今天大概有三年没有用过uniapp了而且我之前用uniapp开发的程序还比较少因此很多功能都浪费了很多时间去查资料现在把功能记录一下。 这里写目录标题 效果图1.根据接口返回的链接生成二维码——uv-Qrcode的用法1.1 插件市场导入uv-qrcode插件1.2 当前页面引入uvQrcode1.3 html代码使用uvQrcode1.4 options配置1.5 生成二维码 2.长按保存二维码2.1 html代码部分2.2 长按方法——longpress——自定义h5和app的保存方法2.3 长按方法——longpress——通过qrcode的save方法来实现 效果图 下面介绍一下整体流程
1.根据接口返回的链接生成二维码——uv-Qrcode的用法
1.1 插件市场导入uv-qrcode插件
uv-qrcode插件市场链接https://ext.dcloud.net.cn/plugin?id12479 点击下载插件并导入HBuilderX 选择到要导入的项目然后即可导入成功。
导入后的路径地址
1.2 当前页面引入uvQrcode
import uvQrcode from /uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue;1.3 html代码使用uvQrcode
uv-qrcode refqrcode canvas-idqrcode :valuevalue size300rpx :loadingloading
:optionsoptions/uv-qrcode1.carvas-id:唯一的id值可以用于获取元素 2.value:二维码的内容 3.size:二维码的大小可以支持数值和字符串字符串的话支持px和rpx由于我此处是uniapp因此写成字符串的rpx单位 4.loading:加载中可以在生成二维码时展示加载中的效果 5.options:配置内容包含边框 背景颜色 前景logo等 1.4 options配置
options: {useDynamicSize: false,errorCorrectLevel: Q,margin: 10,areaColor: #fff,// 指定二维码前景一般可在中间放logoforegroundImageSrc: require(static/image/logo.png)
}详细内容可以参考https://uqrcode.cn/doc/document/native.html#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE
1.5 生成二维码 在代码中的应用
this.value https://www.baidu.com;
this.$nextTick(() {this.$refs.qrcode.remake({success: () {console.log(生成成功);},fail: err {console.log(err)}});
})2.长按保存二维码
2.1 html代码部分
view classcodeCls longpresslongpressuv-qrcode refqrcode canvas-idqrcode :valuevalue size300rpx :loadingloading :optionsoptions/uv-qrcode
/view
view classtipCls长按图片即可保存/view2.2 长按方法——longpress——自定义h5和app的保存方法
此处我做了处理如果是app则长按就保存到相册如果是h5则我会直接下载二维码
此处需要先用到一个toTempFilePath的方法 需要将二维码内容转为临时文件路径后再进行保存。
longpress() {//#ifdef H5this.$refs.qrcode.toTempFilePath({success: res {console.log(111, res);const aEle document.createElement(a);aEle.download uQRCode; // 设置下载的文件名默认是下载aEle.href res.tempFilePath;document.body.appendChild(aEle);aEle.click();aEle.remove(); // 下载之后把创建的元素删除}});//#endif// #ifdef APP-PLUSthis.$refs.qrcode.toTempFilePath({success: res {console.log(111, res);uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: () {uni.hideLoading();uni.showToast({title: 图片已保存});},fail: () {uni.hideLoading();uni.showToast({icon: none,title: 图片保存失败});}});}});// #endif
},2.3 长按方法——longpress——通过qrcode的save方法来实现
另外还有一个方法就是直接用save方法 但是用这个方法测试发现app上没有问题但是在h5上则会出现弹窗 这样就出现了重复而且提示保存成功保存的路径无从得知。 因此还是使用上面的根据app和h5区分处理会比较好。
*后来发现h5不会自动保存的时候下载是因为没有进行下面三个参数的设置*,设置后即可实现h5的下载。
完成多多积累多多收获
