UNI-APP，推广二维码页面实现

痛定思痛。 2023-01-22 09:56 64阅读 0赞

实现效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWxvbmdfOTI3_size_16_color_FFFFFF_t_70][]

实现代码：

<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>
    				
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				qrimg: '',
    				providerList: []
    			}
    		},
    		onLoad() {
    			//根据下载连接生成二维码图片
    			this.handleAndroidAppDownloadUrl();
    			// #ifdef APP-PLUS
    			this.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-PLUS
    				plus.runtime.openURL(url) //这里默认使用外部浏览器打开而不是内部web-view组件打开
    				// #endif
    				// #ifdef H5
    				window.open(url)
    				// #endif
    				// #ifdef MP
    				if (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';
    }

完！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWxvbmdfOTI3_size_16_color_FFFFFF_t_70]: /images/20221020/842fd8641d5048ce8a00a200e7f7e541.png