关于微信 分享功能 (小卡片)

注:此功能只能在微信浏览器内使用

使用方法 :创建一个js文件将以下代码复制粘贴  修修改改即可  

import axios from "axios"

// 引入微信 官方文件

import wx from 'weixin-js-sdk'

// getWeChatAppId 获取微信appId

import { getWeChatAppId } from "../api/index"

// 测试环境还是开发环境

import { baseUrl } from './baseUrl.js'

export function jiaWechatShare(){

    if (!window.location.href.includes('applyActiveNewApply') && !window.location.href.includes('register') && !window.location.href.includes('qrcode')) {

        let callBackUrl = '';

        let urlAllStr = window.location.href;

        callBackUrl = urlAllStr.split('#/')[1];

        urlAllStr = urlAllStr.replace(/\?.*#/, "#");

//这里运行需要异步以下 增加容错率

        setTimeout(() => {

            let userInfo = {};

            let wxAppid = '';

            let path = '';//路径

//如果需要跳转获取code 并且是Hash路由可以将这里打开

            // 截取code

            // function getUrlParam(name, url) {

            //     // 未传参,返回空

            //     if (!name) return null;

            //     // 查询参数:先通过search取值,如果取不到就通过hash来取

            //     var after = window.location.search || window.location.hash;

            //     after = after.substr(1) || window.location.hash.split('?')[1];

            //     // 地址栏URL没有查询参数,返回空

            //     if (!after) return null;

            //     // 如果查询参数中没有"name",返回空

            //     if (after.indexOf(name) === -1) return null;

            //     var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');

            //     // 当地址栏参数存在中文时,需要解码,不然会乱码

            //     var r = decodeURI(after).match(reg);

            //     // 如果url中"name"没有值,返回空

            //     if (!r) return null;

            //     return r[2];

            // };

            // // 获取路径中的code如果没有就去静默授权

            // function getCode() {

            //     const code = getUrlParam("code"); // 截取路径中的code  

            //     if (code == null || code === "") {

            //         let url = "";

            //         let userAgent = navigator.userAgent;

            //         url = window.location.origin + window.location.pathname + `#/${callBackUrl}`;

            //         //静默授权

            //         window.location.href =

            //             "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +

            //             wxAppid +

            //             "&redirect_uri=" +

            //             encodeURIComponent(url) +

            //             "&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect";

            //     }

            //     // 有了code 去获取用户信息

            //     if (code != "" && code != null) {

            //         getUserInfo(code)

            //     }

            // };

            // //获取用户信息

            // function getUserInfo(code) {

            //     getWeiXinUserInfo(code)

            //         .then(res => {

            //             if (res && res.data && res.data.code == 200) {

            //                 userInfo = res.data.data

            //                 window.location.href = baseUrl + '/mobile/?openid=' + userInfo.openid +

            //                     "&nickname=" + userInfo.nickname +

            //                     "&headimgurl=" + userInfo.headimgurl +

            //                     `#/${callBackUrl}`;

            //             }

            //         })

            // };

            // 获取微信 appid

            function mygetWeChatAppId() {

                getWeChatAppId().then(res => {

                    if (res && res.data && res.data.code == 200 && res.data.data) {

                        wxAppid = res.data.data

                        getSignShare();

                        // if (!getUrlParam('openid')) {

                        //     getCode()

                        //     getUserInfo(getUrlParam('code'))

                        // } else if (getUrlParam('openid')) {

                        //     getSignShare()

                        // }

                    }

                })

            };

            // 微信分享主要部分

            function getSignShare() {

                let wurl = location.href.split("#")[0];

                //注,微信要通过二维码分享才有效果

                axios.get(baseUrl + '/api/weChatJsSignature/get', {

                    params: {

                        url: wurl

                    }

                }).then(res => {

                    if (res && res.data && res.data.code == 200) {

                        let jssdk = res.data.data;

                        // 配置功能

                        wx.config({

                            debug: false,

                            appId: wxAppid,//appId

                            timestamp: jssdk.time,

                            nonceStr: jssdk.nonceStr,

                            signature: jssdk.signatureString,

                            jsApiList: [

                                'checkJsApi',

                                'updateAppMessageShareData',//分享给朋友”及“分享到QQ

                                'updateTimelineShareData',//分享到朋友圈”及“分享到QQ空间

                                "onMenuShareTimeline",//分享给好友

                                "onMenuShareAppMessage",//分享到朋友圈

                            ]

                        });

                        // 点进来

                        wx.ready(function () {

                            let data = {};

                            if (!window.location.href.includes('applyActiveNew') && !window.location.href.includes('applyActiveNewApply') && !window.location.href.includes('home') && !window.location.href.includes('registrationpolicy')) {

                                data = {

                                    title: '分享内容标题',

                                    desc: '分享内容详情',

                                    link: urlAllStr,

                                    imgUrl: '图片地址链接',

                                }

                            }

                            wx.updateAppMessageShareData({  //分享朋友圈

                                title: data.title, // 分享标题

                                desc: data.desc,    //描述

                                link: data.link, // 分享链接

                                imgUrl: data.imgUrl, // 分享图标

                                success: function (res) {

                                    // 设置成功

                                }

                            });

                            wx.updateTimelineShareData({  //分享给朋友

                                title: data.title, // 分享标题

                                link: data.link, // 分享链接

                                imgUrl: data.imgUrl, // 分享图标

                                success: function (res) {

                                    // 设置成功

                                }

                            });

                        });

                    }

                })

            };

   

   

            // 获取appid 用于分享

            mygetWeChatAppId();

            // // 没有 wxAppid 就获取

            // if (!getUrlParam('wxAppid')) {

            //     mygetWeChatAppId();

            // } else {

            //     // 直接 弄成小卡片

            //     getSignShare();

            // }

  

        }, 0)

    }

   

}


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值