封装微信分享和扫一扫

直接上代码

	// 微信API封装
(function (global, factory) {
    // 插入微信JSDK
    function init(callback) {
        var src = 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js'; //微信JSDK
        var scr = global.document.getElementsByTagName('script')[0];
        var doc = global.document || window.document;
        var v   = doc.createElement('script');
        v.type  = 'text/javascript';
        v.async = true;
        v.src   = src;
        v.onload = function() {
            callback();
        }
        scr.parentNode.insertBefore(v, scr);
    }
    typeof wx === "undefined" ? init(factory) : factory();
})(window, function () {
    var weixin_token = {};
    var curUrl = window.location.href;
    // 获取js-sdk
    // 公共的配置微信参数
    function wxConfig (jsApiList, wxReadyFn, wxErrorFn) {
    	Fetch.post("/syx/wx/jsapi", {
	        url: location.href.split('#')[0]
	    }).then(res => {
	        weixin_token = res
	        wx.config({
	            debug: false, //
	            appId: weixin_token.appId, // 必填,公众号的唯一标识
	            timestamp: weixin_token.timestamp, // 必填,生成签名的时间戳
	            nonceStr: weixin_token.nonceStr, // 必填,生成签名的随机串
	            signature: weixin_token.signature,// 必填,签名,见附录1
	            jsApiList: jsApiList
	        });
	        wx.ready(function () {
	            console.log("wx ready");
	            console.log(wxReadyFn);
	            if(wxReadyFn) {
	                wxReadyFn();
	            }
	        });
	        wx.error(function (res) {
	            if(wxErrorFn) {
	                wxErrorFn();
	            }
	            console.log(res, 'err')
	            //alert("微信初始化失败,请稍候再试或联系管理员!");
	        });
	    })
        
    }

    /**
     * 扫一扫
     * params 个性化配置。支持params={needResult:0,scanType:[''],successCb:function(res){}}
     */
    function scanQRCode (params) {
        wxConfig(['scanQRCode'], function() {
            console.log("scanQRCode callback");
            var conf = {
                needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                scanType: ["qrCode","barCode"] // 可以指定扫二维码还是一维码,默认二者都有
            }
            conf = Object.assign({}, conf, params);
            console.log(conf);
            wx.scanQRCode({
                needResult: conf.needResult, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                scanType: conf.scanType, // 可以指定扫二维码还是一维码,默认二者都有
                success: function (res) {
                    // var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
                    if(conf.successCb) {
                        conf.successCb(res);
                    }
                }
            });
        });
    }

    /**
     * 获取地理位置
     * params 个性化配置。支持params={type:'',successCb:function(res){},cancelCb:function(res){},failCb:function(res){}}
     */
    function getLocation (params) {
        wxConfig(['getLocation'], function() {
            var conf = {
                type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
            }
            conf = Object.assign({}, conf, params);
            wx.getLocation({
                type: conf.type, // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                success: function (res) {
                    //var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                    //var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
                    //var speed = res.speed; // 速度,以米/每秒计
                    //var accuracy = res.accuracy; // 位置精度
                    // callback
                    if(conf.successCb) {
                        conf.successCb(res);
                    }
                },
                cancel: function (res) {
                    if(conf.cancelCb) {
                        conf.cancelCb(res);
                    }
                },
                fail: function (res) {
                    if(conf.failCb) {
                        conf.failCb(res);
                    }
                }
            });
        });
    }

    // 分享
    function showShare (opts, callback) {
        wxConfig(['showOptionMenu', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'], function() {
            // 加载完成后回调
            wx.showOptionMenu();
            menuShareTimeline(opts, callback);
            menuShareAppMessage(opts, callback);
            menuShareQQ(opts, callback);
            menuShareWeibo(opts, callback);
        });
    }

    // 禁止分享
    function hideShare (otps) {
        wxConfig(['hideMenuItems','hideAllNonBaseMenuItem'], function() {
            // 加载完成后回调
            wx.hideAllNonBaseMenuItem();
        });
    }

    function menuShareTimeline (opts, callback) {
        wx.onMenuShareTimeline({
            title: opts.title || "", // 分享标题
            imgUrl: opts.img || "",  // 分享图片
            link: opts.link || "",   // 分享链接
            desc: opts.desc || "",   // 分享描述
            success: function () {
                callback && callback(opts)
            },
            error: function (res) {
            },
            fail: function (res) {
            }
        });
    }

    function menuShareAppMessage (opts, callback) {
        wx.onMenuShareAppMessage({
            title: opts.title || "", // 分享标题
            imgUrl: opts.img || "",  // 分享图片
            link: opts.link || "",   // 分享链接
            desc: opts.desc || "",   // 分享描述
            success: function (res) {
                callback && callback(opts)
            },
            cancel: function (res) {
            },
            fail: function (res) {
            }
        });
    }

    function menuShareQQ (opts, callback) {
        wx.onMenuShareQQ({
            title: opts.title || "", // 分享标题
            imgUrl: opts.img || "",  // 分享图片
            link: opts.link || "",   // 分享链接
            desc: opts.desc || "",   // 分享描述
            success: function (res) {
                callback && callback(opts)
            },
            cancel: function (res) {
            },
            fail: function (res) {
            }
        });
    }

    function menuShareWeibo(opts, callback) {
        wx.onMenuShareWeibo({
            title: opts.title || "", // 分享标题
            imgUrl: opts.img || "",  // 分享图片
            link: opts.link || "",   // 分享链接
            desc: opts.desc || "",   // 分享描述
            trigger: function (res) {
                callback && callback(opts)
            },
            success: function (res) {
            },
            cancel: function (res) {
            },
            fail: function (res) {
            }
        });
    }

    function menuShareQZone (opts) {
        wx.onMenuShareQZone({
            title: opts.title || "", // 分享标题
            imgUrl: opts.img || "",  // 分享图片
            link: opts.link || "",   // 分享链接
            desc: opts.desc || "",   // 分享描述
            success: function () {
            },
            cancel: function () {
            }
        });
    }

    // 将封装的微信API接口都别名定义到全局变量G上,然后进行暴露到window引用里面
    G.wxShowShare = showShare;
    G.wxhideShare = hideShare;
    G.wxScanQRCode = scanQRCode;
    G.wxGetLocation = getLocation;

    // 暴漏接口
    window._ = Object.assign({}, window._, G);
});

在需要用的地方引入即可 扫一扫举例:

	// 参数可以任选,也可以没有
    _.wxScanQRCode({
        needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
        scanType: ["qrCode","barCode"] // 可以指定扫二维码还是一维码,默认二者都有
         successCb: function(res) {
             console.log("xxx.vue successCb");
             console.log(res);
             that.callback(res);
         }
     });
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值