uni-app二維碼生成，點擊按鈕展示二維碼

文章

• • uni-app二維碼生成，點擊按鈕展示二維碼
• 前言
• 一、首先我用的是HBuilderX，新建uni-app項目
• 二、使用步驟
• • 1.先下載插件uQRCode
  • 2.新建個在index里新建個頁面
• 總結

---

前言

提示：這里可以添加本文要記錄的大概內容：

大致就是點擊按鈕顯示二維碼，然后不同按鈕代表不同的支付方式，展示二維碼也不同

---

提示：以下是本篇文章正文內容，下面案例可供參考

一、首先我用的是HBuilderX，新建uni-app項目

HBuilderX相對新手來說還是比較簡單易上手的

二、使用步驟

1.先下載插件uQRCode

https://ext.dcloud.net.cn/plugin?id=1287安裝到項目里就可以了

2.新建個在index里新建個頁面

代碼如下：

在這里插入圖片描述

<template><view class="content" style="background-color: #007AFF;"><view class="qrcode"><uqrcode ref = "uQRCode" :mode="mode" :text="text" :size="size" :margin="margin" :backgroundColor="backgroundColor" :foregroundColor="foregroundColor" :errorCorrectLevel="errorCorrectLevel" :typeNumber="typeNumber" :fileType="fileType"/></view></view> </template><script>import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode'export default {data(){return{mode: 'view',text: 'http://www.baidu.com',size: 256,margin: 10,backgroundColor: '#FFFFFF',foregroundColor: '#000000',errorCorrectLevel: uQRCode.errorCorrectLevel.H,typeNumber: -1,fileType: 'png',defaultErrorCorrectLevel: uQRCode.errorCorrectLevel}}} </script> <style>.qrcode {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: column;align-items: center;justify-content: center;width: 750rpx;padding: 32rpx 0;background-color: #F0F0F0;} </style>

大概就是uqrcode參數都在data里寫好就行了，然后調用就好。

倆個按鈕點擊展示不同二維碼，我是這樣寫的，這里用到一個一個組件popup彈出層，我把二維碼放到popup里，因為是點擊按鈕展示嘛。然后給按鈕添加點擊事件，點擊事件里把二維碼的url放入就可以了，然后展示一下。

---

總結

以上就是花了倆天時間做出來的內容，因為一開始不知道怎么做，看了許多博客，看了個大概，有的是完全自己去寫那個二維碼，一塊一塊寫，代碼冗雜，能看明白是干嘛，但是自己寫的話就不好說了，相對來說，這個插件還是很好用的，不會太麻煩，寫入參數就可以了。要注意的就是mode里的兼容模式，這個根據自己情況而定，基本就是這樣，細節問題可以去看看uqrcode插件的代碼示例 / 概述。

總結

以上是生活随笔為你收集整理的uni-app二维码生成，点击按钮弹框展示二维码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。