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

实现效果如图：

实现代码：

<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，推广二维码页面实现相关推荐

Android开发丶openinstall的集成和使用（推广二维码）
在项目开发过程中,负责的推广二维码模块需要加入openinstall三方框架,该框架可以在推广二维码中搭建一层上下级关系,加上一定的积分奖励,极大地提高了用户的推广热情,并且不同于以往常规的手动填写邀 ...
thinkphp5+php微信公众号二维码扫码关注推广二维码事件实现
thinkphp5微信公众号二维码扫码关注推广二维码事件实现, 给出实现的全部方法: 获取二维码,让微信公众号跳转到以下代码的code方法即可,用户点击二维码后,通过二维码获取关注用户信息及二维码推广 ...
【uni-app】App实现二维码分享图合成(支持单张或多张)
[uni-app]App实现二维码分享图合成写在前面, 该文章目前仅支持合成特定数量的分享图, 不支持随意数量分享图合成一. 背景 app内实现一个邀请拉新功能, 需要根据每个用户生成各自的二维码 ...
APP下载二维码微信扫一扫无法打开解决方案
微信扫一扫屏蔽了APP下载连接无非是想让大家将资源转移到自家平台,国人微信中毒过深,看到二维码首先想到的一定是微信(好强大的用户引导).为了更好的用户体验,只能向腾讯屈服将应用转移到腾讯平台.当然如果 ...
iOS(OC)—仿支付宝我的二维码页面系统亮度调整
是不是应该搞点前序什么的呢??? 最近公司项目涉及二维码页面,公司虽不要求做了像支付宝那样,跳转到二维码页面后该页面的亮度需要很亮,从而实现扫描更快更准确.建议开发的时候还是自己选择,毕竟屏幕突然变亮 ...
iOS(Swift)—仿支付宝我的二维码页面系统亮度调整
之前已经把OC的实现方案完成,现在我就不介绍逻辑了,想必懂swift的朋友一定懂得OC吧这里只把资源的链接附上 OC_Demo下载地址 Swift_Demo下载地址还是把主要的代码贴一下 1. A ...
App 扫描二维码登陆网站
App 扫描二维码登陆网站 +-----------+-----------+-----------+ | App | Web | Server | +-----------+-----------+ ...
[微信开发] - 用户获取推广二维码
通过生成带参二维码,将用户的openid获取的同时做为参数,生成后,另一个用户扫码该二维码,系统可以获取到新用户openid的同时,也能标识着是哪个用户被扫码了. 更多的图通过上图可以看到,当A君关 ...
小程序推广二维码生成
小程序推广二维码生成 <?php$appid = '***************';$secret ='********************************';$url = &qu ...

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

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

最新文章

热门文章