项目里为了体验做的好点,想直接通过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');
});
}
})
});
}
});
*/
javascript调用微信或QQ扫一扫
最新推荐文章于 2024-08-10 10:10:58 发布