最近在做二維碼推廣功能，自從2020年下半年到今天，大概有三年沒有用過uniapp了，而且我之前用uniapp開發(fā)的程序還比較少，因此很多功能都浪費了很多時間去查資料，現(xiàn)在把功能記錄一下。

效果圖

下面介紹一下整體流程：

1.根據(jù)接口返回的鏈接生成二維碼——uv-Qrcode的用法

1.1 插件市場導(dǎo)入uv-qrcode插件

uv-qrcode插件市場鏈接：https://ext.dcloud.net.cn/plugin?id=12479

點擊下載插件并導(dǎo)入HBuilderX
選擇到要導(dǎo)入的項目，然后即可導(dǎo)入成功。

導(dǎo)入后的路徑地址：

1.2 當(dāng)前頁面引入uvQrcode

import uvQrcode from '@/uni_modules/uv-qrcode/components/uv-qrcode/uv-qrcode.vue';

1.3 html代碼使用uvQrcode

<uv-qrcode ref="qrcode" canvas-id="qrcode" :value="value" size="300rpx" :loading="loading"
:options="options"></uv-qrcode>

1.carvas-id:唯一的id值，可以用于獲取元素
2.value:二維碼的內(nèi)容
3.size:二維碼的大小，可以支持?jǐn)?shù)值和字符串，字符串的話支持px和rpx，由于我此處是uniapp，因此寫成字符串的rpx單位
4.loading:加載中，可以在生成二維碼時展示加載中的效果
5.options:配置內(nèi)容，包含邊框 背景顏色 前景l(fā)ogo等

1.4 options配置

options: {useDynamicSize: false,errorCorrectLevel: 'Q',margin: 10,areaColor: "#fff",// 指定二維碼前景，一般可在中間放logoforegroundImageSrc: require('static/image/logo.png')
}

詳細(xì)內(nèi)容可以參考：https://uqrcode.cn/doc/document/native.html#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE

1.5 生成二維碼

在代碼中的應(yīng)用：

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 class="codeCls" @longpress="longpress"><uv-qrcode ref="qrcode" canvas-id="qrcode" :value="value" size="300rpx" :loading="loading" :options="options"></uv-qrcode>
</view>
<view class="tipCls">長按圖片即可保存</view>

2.2 長按方法——longpress——自定義h5和app的保存方法

此處我做了處理，如果是app則長按就保存到相冊，如果是h5，則我會直接下載二維碼：

此處需要先用到一個toTempFilePath的方法：

需要將二維碼內(nèi)容轉(zhuǎn)為臨時文件路徑后，再進行保存。

longpress() {//#ifdef H5this.$refs.qrcode.toTempFilePath({success: res => {console.log(111, res);const aEle = document.createElement('a');aEle.download = 'uQRCode'; // 設(shè)置下載的文件名，默認(rèn)是'下載'aEle.href = res.tempFilePath;document.body.appendChild(aEle);aEle.click();aEle.remove(); // 下載之后把創(chuàng)建的元素刪除}});//#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方法來實現(xiàn)

另外還有一個方法：就是直接用save方法：

但是用這個方法測試發(fā)現(xiàn)：app上沒有問題，但是在h5上，則會出現(xiàn)彈窗：

這樣就出現(xiàn)了重復(fù)，而且提示保存成功，保存的路徑無從得知。
因此還是使用上面的根據(jù)app和h5區(qū)分處理會比較好。

*后來發(fā)現(xiàn)，h5不會自動保存的時候下載是因為沒有進行下面三個參數(shù)的設(shè)置*,設(shè)置后即可實現(xiàn)h5的下載。

完成！！！多多積累，多多收獲！！！