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

admin管理员组

文章数量:1600472

实现效果如图：

实现代码：

<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-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/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/uploads/nav_menu/8.jpg',
							href: "https://m3w/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/upload/app/123456.apk';
}

完！！！

本文标签： 页面二维码Uniapp