javascript调用微信或QQ扫一扫

项目里为了体验做的好点,想直接通过js调用手机的扫一扫:

	服务的用户主要是通过:微信或QQ

	之前使用过 微信或QQ的分享
		腾讯移动WEB开发平台的 '对外分享组件接口文档'
			http://open.mobile.qq.com/api/component/share
		写的博客地址(代码在评论里贴过):
			http://blog.csdn.net/beyond__devil/article/details/77852071

	所以,这次为了满足 '微信用户,调用微信扫一扫;QQ用户,调用QQ扫一扫',我们同样想着如何实现?
		1.微信JS-SDK 
			调起微信扫一扫 - wx.scanQRCode()

		2.手机QQ接口文档
			http://open.mobile.qq.com/api/mqq/index
			查看后,有一个
			唤起扫一扫来扫描二维码 - mqq.ui.scanQRcode()

			/*
				腾讯移动WEB开发平台 -> 开发者指引
					http://open.mobile.qq.com/news/guide
				可以看到,也支持
					JS-SDK
					android开发
					ios开发

				/*
					我们使用的是 JS-SDK,需要引入 'jsbridge.js',地址:
						http://qzonestyle.gtimg.cn/qzone/phone/m/v4/widget/mobile/jsbridge.js


					!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
					上面地址有误!!!!是 'qzone' 的!!!
					我们应该引入:
						//open.mobile.qq.com/sdk/qqapi.js?_bid=152
					!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
				 */
			 */

		3.微信和QQ扫一扫都可以了,我们还需要区分:'当前用户是在 微信 还是 QQ 访问网站'
		  这个问题,我们可以借助上面的,腾讯移动WEB开发平台的 '对外分享组件接口',之前看过它内部的js,可以通过userAgent来判断 

/*
	发现 '腾讯移动WEB开发平台' QQ里的各种接口调用无响应!(不知道是不是我写错的问题,个别可以!)
	然后在网上各种搜索,找不到办法!可能偶尔有人使用 'scheme://' 调用,但是很快链接会失效,目前没发现可用的链接!
	这里提供下面几个网址,看有没有可更新的可能:

		  http://bbs.feng.com/read-htm-tid-10954259.html
		  http://blog.csdn.net/zhangcanyan/article/details/55281704
		  http://qun.qq.com/jsapi.html#js-mqq-ui-showActionSheet
		  https://www.zhihu.com/question/19907735

		  感觉这个比较专业,但是QQ扫一扫仍然不行
		  https://www.ryannn.com/archives/url-schemes-share
 */

/*
	附一段我使用代码(微信没有问题!!QQ不行!!):
	        $(function(){
            var WAP_SCAN_URL = '你们自己的扫码地址';
                JS_SDK_CONFIG = {!! $js_sdk_config !!},     // 微信接口配置
                ua = navigator.userAgent,
                isWX = ua.match(/MicroMessenger\/([\d\.]+)/), 
                isQQ = ua.match(/QQ\/([\d\.]+)/),
                wxapi = '//res.wx.qq.com/open/js/jweixin-1.0.0.js',
                qqapi = '//open.mobile.qq.com/sdk/qqapi.js?_bid=152';

            if(isWX || isQQ){
                requireAPI();
            }else{
                console.log('使用的非微信|QQ'); 
                $('#scan-qr-code').click(function(){
                    layer.msg('您并非在微信或QQ内访问,为获取最佳体验,请使用微信或QQ。您也可调用当前应用的扫一扫功能!切换其他应用,无效!'); 
                });
            }

            function requireAPI()
            {
                var head = document.head || document.getElementsByTagName("head")[0];
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = isWX ? wxapi : qqapi;
                script.onload = isWX ? initWX : initQQ;
                head.appendChild(script);
            }

            function initWX()
            {
                wx.config(JS_SDK_CONFIG);
                wx.ready(function(){
                    $('#scan-qr-code').click(function(){
                        var _self = $(this);
                        if(_self.hasClass('clicked')){
                            return false;
                        }
                        _self.addClass('clicked');

                        wx.scanQRCode({
                            needResult: 1,  // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                            scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
                            success: function (result) {
                                var result = result.resultStr;  // 当needResult 为 1 时,扫码返回的结果
                                if(result.indexOf(WAP_SCAN_URL) !== -1){
                                    window.location.href = result;
                                }else{
                                    layer.msg('您扫描的是二维码地址不正确!', {time: 2000, maxWidth: 260}, function(){
                                        _self.removeClass('clicked');
                                    });
                                }
                            }
                        });
                    });
                });
                wx.error(function(){
                    console.log('JS-SDK配置失败!'); 
                });
            }

            function initQQ()
            {
                $('#scan-qr-code').click(function(){
                    var _self = $(this);
                    if(_self.hasClass('clicked')){
                        return false;
                    }
                    _self.addClass('clicked');

                    mqq.ui.scanQRcode({}, function(result){

                        // 注意:官方给出的url,使用了 'decodeURIComponent()' 解码
                        // console.log(retCode, decodeURIComponent(result));
                        if(result.indexOf(WAP_SCAN_URL) !== -1){
                            window.location.href = result;
                        }else{
                            layer.msg('您扫描的是二维码地址不正确!', {time: 2000, maxWidth: 260}, function(){
                                _self.removeClass('clicked');
                            });
                        }
                    })
                });
            }

        });
 */

展开阅读全文

没有更多推荐了,返回首页