uni-app 【生成链接二维码,分享微信朋友,微信朋友圈,扫码跳页面详情】
在这里前提需要下载 tkiQrcode 插件,插件下载地址:https://ask.dcloud.net.cn/article/349311.扫描二维码获取到的条码内容【链接】格式大致为:http://网页后缀为html结尾【这里我是通过后台返给我的链接获取的,也就是说我的网页保存到了后台本地,从本地获取】?k=1&bn=856916&user_id=3&id=12.在扫描
·
在这里前提需要下载 tkiQrcode 插件,
插件下载地址:https://ask.dcloud.net.cn/article/34931
1.扫描二维码获取到的条码内容【链接】格式大致为:
http://网页后缀为html结尾【这里我是通过后台返给我的链接获取的,也就是说我的网页保存到了后台本地,从本地获取】?k=1&bn=856916&user_id=3&id=1
2.在扫描的标签函数中写入:
uni.scanCode({
success: function(res) {
// console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
// console.log('所扫码的字符集:' + res.charSet);
console.log('path:' + res.path);
if (res.scanType == 'QR_CODE') {
let url = '网址【域名】'
let a = res.result; //扫描获取的链接
let url2 = a.split('?')[0]; //获取链接前面域名【主要在这里判断是否是APP的商品】
function GetRequest2(key,query) {
var vars = query.split("&"); //2部分
console.log(vars)
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == key) {
return pair[1];
}
}
return (false);
}
let id = GetRequest2("id",a)
console.log(url2,a,id,'pppp');
var tt=false; //这一步主要就是判断自己创建的二维码前面域名是否一致,一致则可以跳转【这里以自己需求而定】
if(a.indexOf(url)!=-1){
tt = true;
}
// 商品列表
if(url == url2 || tt){
uni.navigateTo({
url:'/pages/index/goods_detail?id=' + id
})
}else{
uni.showToast({
title:'抱歉,您扫描的内容无法识别!!',
icon:'none'
})
}
}
}
});
3.商品详情页二维码制作过程【通过链接制作二维码】【这里一并把分享页面奉上】
(1)页面代码
<view @click="show=true"></view>
<u-popup v-model="show3" mode="center">
<view class="qrimg padding" >
<tki-qrcode cid="qrcode2" ref="qrcode2" :val="val" :size="size" :onval="onval" :loadMake="loadMake" :icon="icon" :usingComponents="true" @result="qrR" />
<view class="t-c" style="font-size: 18px;">
商品详情页
</view>
</view>
</u-popup>
<!-- 分享 -->
<u-popup mode="bottom" v-model="show">
<view class="container1-1">
<view class="title">分享至</view>
<view class="flex">
<view class="" @click="G_Share(0)">
<view class="box">
<u-icon name="weixin-fill" size="60" style="vertical-align: middle;"></u-icon>
</view>
<view class="share-type">微信好友</view>
</view>
<view class="" @click="G_Share(1)">
<view class="box">
<u-icon name="moments" size="60" style="vertical-align: middle;"></u-icon>
</view>
<view class="share-type">朋友圈</view>
</view>
<view class="" @click="G_Share(2)">
<view class="box">
<u-icon name="photo" size="60" style="vertical-align: middle;"></u-icon>
</view>
<view class="share-type">生成二维码</view>
</view>
</view>
<view class="cancel" @click="Cancel">取消</view>
</view>
</u-popup>
(2) js代码
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
export default {
components: {
tkiQrcode
},
data() {
return {
user_id: '', //用户id
bn:'', //邀请码
id:",//商品id
icon:'/static/logo.png',
src: '' ,// 二维码生成后的图片地址或base64
val:'', //链接
size: 400, // 二维码大小
unit: 'upx', // 单位
background: '#b4e9e2', // 背景色
foreground: '#309286', // 前景色
pdground: '#32dbc6', // 角标色
iconsize: 40, // 二维码图标大小
lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
onval: false, // val值变化时自动重新生成二维码
loadMake: true, // 组件加载完成后自动生成二维码
src: '' ,// 二维码生成后的图片地址或base64
show:true, //分享页面默认为显示
show3:false, //二维码先隐藏
}
},
methods:{
qrR(res) {
this.src = res
console.log(res);
},
creatQrcode() {
this.$refs.qrcode._makeCode()
},
// 分享页面
G_Share(index) {
if (index == 0) {
uni.share({
provider: 'weixin',
scene: 'WXSceneSession',
href: this.BASE_URL + 'wap/detail.html?bn=' + this.bn + '&id=' + this.id + '&user_id=' +
this.user_id,
type: 0,
title: this.msg.title,
imageUrl: this.msg.image,
success: function(res) {
console.log('success:' + JSON.stringify(res));
},
fail: function(err) {
console.log('fail:' + JSON.stringify(err));
}
});
} else if (index == 1) {
uni.share({
provider: 'weixin',
scene: 'WXSenceTimeline',
href: this.BASE_URL + 'wap/detail.html?bn=' + this.bn + '&id=' + this.id + '&user_id=' +
this.user_id + '&user_id=' + this.user_id,
type: 0,
title: this.msg.title,
imageUrl: this.msg.image,
success: res => {
console.log('success:' + JSON.stringify(res));
this.is_share = !this.is_share;
},
fail: err => {
console.log('fail:' + JSON.stringify(err));
}
});
} else {
// this.created()
this.show3 = true;
this.show = false;
console.log('kkk');
}
},
Cancel(){this.show = false; }
},
onload(){
let is_token = uni.getStorageSync('token'); //这里主要判断是否token存在,并获取存的后台信息【这里你也可以通过自己在后台保存的值判断是否存在】
if (is_token != '') {
let userInfo = JSON.parse(uni.getStorageSync('member_info'));
this.user_id = userInfo.id;
this.bn = userInfo.bn
this.val = this.BASE_URL+'wap/detail.html?k=1&bn='+this.bn+'&user_id='+this.user_id+'&id='+this.id ; //制作二维码传的链接
console.log(userInfo, 'hahah',this.val);
}
},
onReady(){
this.creatQrcode()
}
更多推荐
已为社区贡献2条内容
所有评论(0)