uni-app 【生成链接二维码，分享微信朋友，微信朋友圈，扫码跳页面详情】

在这里前提需要下载 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()
}