uniapp + uview-plus 微信小程序二維碼生成和保存完整解決方案

uniapp + uview-plus 微信小程序二維碼生成和保存完整解決方案

?? 項目背景

在開發微信小程序時,經常需要實現二維碼的生成和保存功能。本文檔提供了一個基于 uniapp + uview-plus 框架的完整解決方案,徹底解決了以下常見問題:

  • ? Canvas API 兼容性問題
  • ? 微信小程序權限處理
  • ? u-qrcode 組件保存方法不可用
  • ? 組件內部方法依賴問題
  • ? 時序問題和異步處理

?? 核心設計思路

采用純API方案,完全繞過Canvas操作

  1. 使用 u-qrcode 組件顯示二維碼
  2. 保存時通過第三方API重新生成相同內容的二維碼
  3. 下載生成的圖片并保存到相冊

?? 技術棧

  • 框架: uniapp
  • UI庫: uview-plus v3.4.54
  • 目標平臺: 微信小程序
  • Vue版本: Vue 3 + Composition API

?? 完整代碼實現

1. QrcodeGenerator.vue 組件

<template><view class="qrcode-generator"><view class="qrcode-container"><u-qrcode ref="qrcodeRef":val="qrcodeText" :size="qrcodeSize":background="backgroundColor":foreground="foregroundColor":loadMake="loadMake"@click="onQrcodeClick"@result="onQrcodeResult"></u-qrcode></view></view>
</template><script setup>
import { ref, computed, watch, onMounted, nextTick } from 'vue'// 定義 props
const props = defineProps({// 二維碼內容(必傳)text: {type: String,required: true,default: ''},// 二維碼尺寸size: {type: Number,default: 200},// 二維碼邊距margin: {type: Number,default: 0},// 背景顏色backgroundColor: {type: String,default: '#ffffff'},// 前景顏色foregroundColor: {type: String,default: '#000000'},// 容錯級別 L/M/Q/HcorrectLevel: {type: String,default: 'M'},// 是否立即生成loadMake: {type: Boolean,default: true}
})// 定義 emits
const emit = defineEmits(['click', 'save', 'generated'])// 響應式數據
const qrcodeRef = ref(null)
const qrcodeResult = ref('') // 保存二維碼生成結果
const qrcodeTempFilePath = ref('') // 保存二維碼臨時文件路徑// 計算屬性
const qrcodeText = computed(() => props.text || 'https://example.com')
const qrcodeSize = computed(() => props.size)// 監聽文本變化,重新生成二維碼
watch(() => props.text, (newText, oldText) => {console.log('QrcodeGenerator文本變化:', { oldText, newText })if (newText && newText !== oldText && qrcodeRef.value) {console.log('觸發u-qrcode重新生成二維碼')// 使用nextTick確保DOM更新后再生成nextTick(() => {if (qrcodeRef.value && qrcodeRef.value._makeCode) {qrcodeRef.value._makeCode()}})}
}, { immediate: true })// 二維碼點擊事件
const onQrcodeClick = () => {emit('click', {text: qrcodeText.value,size: qrcodeSize.value})
}// 二維碼生成完成回調
const onQrcodeResult = (result) => {console.log('二維碼生成完成:', result)qrcodeResult.value = result// 保存臨時文件路徑,這是u-qrcode組件生成的可用于保存的路徑qrcodeTempFilePath.value = resultemit('generated', result)
}// 保存二維碼方法 - 完全不用Canvas的方案
const downloadQrcode = async () => {console.log('=== 純API方式保存二維碼 ===')try {// 第一步:獲取當前二維碼內容const qrText = qrcodeText.valueif (!qrText || qrText === 'https://example.com') {throw new Error('二維碼內容無效')}console.log('二維碼內容:', qrText)// 第二步:檢查相冊權限await checkAlbumPermission()// 第三步:使用第三方API生成二維碼圖片const tempFilePath = await generateQrcodeByAPI(qrText)// 第四步:保存到相冊await saveToAlbum(tempFilePath)// 第五步:顯示成功提示uni.showToast({title: '保存成功',icon: 'success',duration: 2000})} catch (error) {console.error('保存失敗:', error)uni.showToast({title: error.message || '保存失敗',icon: 'none',duration: 3000})}
}// 檢查相冊權限
const checkAlbumPermission = () => {return new Promise((resolve, reject) => {// #ifdef MP-WEIXINuni.getSetting({success: (

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/93299.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/93299.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/93299.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Linux中應用程序的安裝于管理

Linux中應用程序的安裝于管理 一 . rpm安裝 1.掛載 光驅里面存放了很多rpm的軟件包 光驅在系統中使用時&#xff0c;需要掛載 mount /dev/cdrom /mnt/ cd /mnt[rootstw mnt]# ls CentOS_BuildTag GPL LiveOS RPM-GPG-KEY-CentOS-7 EFI images Packag…

mysql重置密碼

要區分 MySQL 是通過 systemd 還是傳統 service 管理&#xff0c;以及對應的密碼重置方案&#xff0c;可按以下步驟操作&#xff1a; 一、如何區分管理方式&#xff08;systemd 還是傳統 service&#xff09; 通過以下命令判斷系統默認的服務管理方式&#xff1a;檢查系統是否使…

C++ TAP(基于任務的異步編程模式)

&#x1f680; C TAP&#xff08;基于任務的異步編程模式&#xff09;1. 引言&#xff1a;走進異步編程新時代&#xff08;&#x1f680;&#xff09; 在當今高性能計算領域&#xff0c;同步編程模型的局限性日益凸顯。傳統的回調地獄和線程管理復雜性促使微軟提出了基于任務的…

利用C++手撕棧與隊列的基本功能(四)

棧和隊列詳細教程可以觀看 https://www.bilibili.com/video/BV1nJ411V7bd?spm_id_from333.788.videopod.episodes&vd_sourcedaed5b8a51d3ab7eb209efa9d0ff9a34&p48棧和隊列概念 棧和隊列是限定插入和刪除只能在表的端點進行的線性表在裝電池、裝彈夾、拿放盤子時都會出…

net8.0一鍵創建支持(Redis)

Necore項目生成器 - 在線創建Necore模板項目 | 一鍵下載 RedisController.cs using CSRedis; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using UnT.Template.Application.Responses; using UnT.Template.Domain;namespace UnT.Template.Controllers {…

Leetcode——42. 接雨水

還記得第一次見該題根本無從下手。其實&#xff0c;我們不妨把問題拆解&#xff0c;簡單化。不要怕自己寫的是暴力算法&#xff0c;有很多算法技巧其實就是在暴力算法的基礎上優化得來。題目目的是求所有可接雨水數量&#xff0c;我們可以求出每一個位置可接雨水數量&#xff0…

Go 語言-->指針

Go 語言–>指針 它允許你操作內存中的實際數據&#xff0c;而不僅僅是數據的副本。指針存儲的是另一個變量的內存地址&#xff0c;而不是變量的實際值。 1. 什么是指針 指針是存儲變量內存地址的變量&#xff0c;它指向另一個變量。通過指針&#xff0c;你可以間接地訪問和修…

軟工八將:軟件開發全流程核心角色體系解析

軟工八將&#xff1a;軟件開發全流程核心角色體系解析 作者注&#xff1a;本概念是由大學生董翔提出&#xff0c;具有一些影響意義。 在現代軟件開發領域&#xff0c;團隊角色的專業化分工是產品成功的核心保障。“軟工八將”作為一套系統梳理軟件開發全流程核心角色的術語&…

安全風險監測系統是什么?內容有哪些?

安全風險監測系統是基于物聯網感知網絡與智能分析技術的綜合管理平臺&#xff0c;通過實時采集、分析和評估各類安全風險指標&#xff0c;構建起覆蓋識別、預警、處置全流程的主動防御體系。作為現代安全管理的中樞神經系統&#xff0c;該系統實現了從被動響應到主動預防的范式…

車載診斷架構 ---面向售后的DTC應該怎么樣填寫?

我是穿拖鞋的漢子,魔都中堅持長期主義的汽車電子工程師。 老規矩,分享一段喜歡的文字,避免自己成為高知識低文化的工程師: 簡單,單純,喜歡獨處,獨來獨往,不易合同頻過著接地氣的生活,除了生存溫飽問題之外,沒有什么過多的欲望,表面看起來很高冷,內心熱情,如果你身…

墨者:SQL注入漏洞測試(寬字節)

墨者學院&#xff1a;SQL注入漏洞測試(寬字節)&#x1f680; 1. 寬字節注入原理? 1.1. 與普通注入對比? 特性普通注入寬字節注入適用場景無轉義處理使用addslashes()等轉義函數核心原理直接閉合引號利用GBK等編碼吞掉轉義符\關鍵字符 " -- #%df %5c防御難度易防御需調…

(二)Eshop(RabbitMQ手動)

文章目錄項目地址一、Rabbit MQ1.1 Pulibsher1. IRabbitMQPublisher接口2. RabbitMQPublisher接口實現3. 使用1.2 Consumer1. 消費接口2. 實現消費者接口項目地址 教程作者&#xff1a;教程地址&#xff1a; 代碼倉庫地址&#xff1a; 所用到的框架和插件&#xff1a; dbt a…

WPF高級學習(一)

文章目錄一、理解進程和線程1. 進程&#xff1a;就像一個獨立的“工廠”舉例&#xff1a;2. 線程&#xff1a;就像工廠里的“工人”舉例&#xff1a;總結&#xff1a;進程 vs 線程二、線程一、WPF 中的線程類型二、核心規則&#xff1a;線程親和性&#xff08;Thread Affinity&…

JAVA知識點(四):SpringBoot與分布式、微服務架構

文章目錄SpringBoot 使用 Validation 進行參數校驗并統一返回校驗異常引入相應的依賴Validation的基本校驗注解添加參數校驗在DTO的屬性上添加校驗在controller對應的DTO添加Valid或者Validated對于復雜String校驗我們可以使用正則來校驗&#xff0c;如下所示&#xff1a;自定義…

GPU 服務器ecc報錯處理

1. 常見原因分析內存硬件問題&#xff1a;DIMM 內存模塊損壞或接觸不良&#xff08;最常見原因&#xff09;。內存插槽氧化、松動或物理損壞。內存與主板兼容性問題&#xff08;尤其是非原廠內存&#xff09;。環境因素&#xff1a;服務器內部溫度過高&#xff0c;導致內存穩定…

STM32入門之通用定時器PWM

一、通用定時器簡介STM32通用定時器由一個通過可編程預分頻器驅動的16位自動重裝載計數器組成&#xff0c;適用于多種應用場景&#xff0c;包括測量輸入信號的脈沖長度&#xff08;利用輸入捕獲功能&#xff09;和生成輸出波形&#xff08;使用輸出比較及PWM功能&#xff09;。…

第十八節 MATLAB for循環

MATLAB中 for 循環是一個重復的控制結構&#xff0c;可以有效地寫一個循環&#xff0c;只是執行的次數是特定的。MATLAB for 循環語法:MATLAB中的 for循環的語法如下&#xff1a;for index values<program statements>... endfor 循環的值有下述三種形式之一&#xff1a…

嵌入式硬件篇---zigbee無線串口通信問題解決方法

針對 ZigBee 無線串口通信中接收異常的問題&#xff0c;需結合其射頻特性、網絡機制、硬件配置等多維度原因&#xff0c;采取針對性解決措施。以下從具體場景出發&#xff0c;提供可落地的解決方法&#xff1a;一、解決射頻層干擾與信號衰減問題射頻層是無線通信的基礎&#xf…

移動高清盒子6PRO-河南創維E900V22D-晶晨S905L3B-4+16G-安卓9-線刷固件包

移動高清盒子6PRO-河南創維E900V22D-晶晨S905L3B-416G-安卓9-線刷固件包線刷方法&#xff1a;1、準備好一根雙公頭USB線刷刷機線&#xff0c;長度30-50CM長度最佳&#xff0c;同時準備一臺電腦&#xff1b;2、電腦上安裝好刷機工具Amlogic USB Burning Tool 軟件 →打開軟件 →…

臺式電腦有多個風扇開機只有部分轉動的原因

一、風扇未連接或連接松動這是最常見的原因之一&#xff0c;臺式機風扇通常需要通過線材與主板或電源連接&#xff1a;主板接口問題&#xff1a;CPU 風扇、機箱風扇等多連接到主板的風扇接口&#xff08;如 CPU_FAN、SYS_FAN&#xff09;&#xff0c;若線材未插緊、插錯接口&am…