實現效果如圖：

實現代碼：

<template><view><!--導航欄--><cu-custom bgColor="bg-blue" :isBack="true"><block slot="content">App二維碼</block></cu-custom><!--二維碼--><view class="qr_area"><view class="content"><image class="img" :src="qrimg" @longtap="operMenu"></image><view>掃描二維碼，下載Android App</view><!-- <u-link :href="'http://182626260/upload/app/l123456.apk'" :text="'直接下載Android App'"></u-link> --></view></view></view> </template><script>export default {data() {return {qrimg: '',providerList: []}},onLoad() {//根據下載連接生成二維碼圖片this.handleAndroidAppDownloadUrl();// #ifdef APP-PLUSthis.version = plus.runtime.version;uni.getProvider({service: 'share',success: (result) => {const data = [];for (let i = 0; i < result.provider.length; i++) {switch (result.provider[i]) {case 'weixin':data.push({name: '分享到微信好友',id: 'weixin'});data.push({name: '分享到微信朋友圈',id: 'weixin',type: 'WXSenceTimeline'});break;case 'qq':data.push({name: '分享到QQ',id: 'qq'});break;default:break;}}this.providerList = data;},fail: (error) => {console.log('獲取分享通道失敗' + JSON.stringify(error));}});// #endif},methods: {//根據下載連接生成二維碼圖片handleAndroidAppDownloadUrl(){//生成二維碼//this.qrimg = 'https://api.qrserver.com/v1/create-qr-code?data=' + this.api.androidAppDownloadUrl();//二維碼圖片this.qrimg = '/static/images/qr_down.png'},// #ifdef APP-PLUS//長按二維碼圖片，操作菜單operMenu(e){ console.log(e)uni.showActionSheet({itemList: ['保存二維碼到相冊', '識別二維碼并下載', '分享'],success: (res) => {switch(res.tapIndex){case 0:plus.gallery.save(this.qrimg, function() {uni.showToast({title: '保存成功',icon: 'none'});}, function() {uni.showToast({title: '保存失敗，請重試！',icon: 'none'});});break;case 1:this.openURL(this.api.androidAppDownloadUrl());break;case 2:this.share();break;}}});},share(e) {if (this.providerList.length === 0) {uni.showModal({title: '當前環境無分享渠道!',showCancel: false});return;}let itemList = this.providerList.map(function(value) {return value.name;})uni.showActionSheet({itemList: itemList,success: (res) => {let provider = this.providerList[res.tapIndex].id;uni.share({provider: provider,scene: this.providerList[res.tapIndex].type && this.providerList[res.tapIndex].type === 'WXSenceTimeline' ?'WXSenceTimeline' : "WXSceneSession",type: (provider === "qq") ? 1 : 0,title: '歡迎體驗uni-app',summary: 'uni-app 是一個使用 Vue.js 開發跨平臺應用的前端框架',imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/8.jpg',href: "https://m3w.cn/uniapp",success: (res) => {console.log("success:" + JSON.stringify(res));},fail: (e) => {uni.showModal({content: e.errMsg,showCancel: false})}});}})},// #endif//打開url,鏈接openURL(url) {// #ifdef APP-PLUSplus.runtime.openURL(url) //這里默認使用外部瀏覽器打開而不是內部web-view組件打開// #endif// #ifdef H5window.open(url)// #endif// #ifdef MPif (this.inWhiteList) { //如果在小程序的網址白名單中，會走內置webview打開，否則會復制網址提示在外部瀏覽器打開uni.navigateTo({url: '/pages/component/web-view/web-view?url=' + url});} else {uni.setClipboardData({data: url});uni.showModal({content: '本網址無法直接在小程序內打開。已自動復制網址，請在手機瀏覽器里粘貼該網址',showCancel: false});}// #endif}}} </script><style lang="scss"> .qr_area{height: calc(100vh - var(--status-bar-height) - 45px - 10px);display: flex;justify-content: center;align-items: center;.content{text-align: center;padding-bottom: 30rpx;.img{width: 500rpx;height: 500rpx;}} } </style> //--------Android App下載鏈接，修改時qr_down.png也得修改------------ export function androidAppDownloadUrl(){return 'http://it.uni.com/upload/app/123456.apk'; }

完！！！

?

?

?

總結

以上是生活随笔為你收集整理的UNI-APP，推广二维码页面实现的全部內容，希望文章能夠幫你解決所遇到的問題。

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