实现效果如图:
实现代码:
<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';
}
完!!!
更多推荐
UNI-APP,推广二维码页面实现
发布评论