手机浏览器唤起微信分享(JS)

2023-07-14 05:17:03 329

最近在做一个手机站，要求点击分享可以直接打开微信分享出去。而不是jiathis，share分享这种的点击出来二维码。在网上看了很多，都说APP能唤起微信，手机网页实现不了。也找了很多都不能直接唤起微信。

总结出来一个可以直接唤起微信的。适应手机qq浏览器和uc浏览器。

下面上代码，把这些直接放到要转发的页面里就可以了：

html部分：

//引进mshare.js
点击弹出原生分享面板
点击触发朋友圈分享
点击触发发送给微信朋友

js部分：

下面是mshare.js的代码分享，把这些代码新建一个js文件放进去，然后在页面中引进就ok了。

/**
*此插件主要作用是在UC和QQ两个主流浏览器
*上面触发微信分享到朋友圈或发送给朋友的功能
*/
'usestrict';
varUA=navigator.appVersion;

/**
*是否是UC浏览器
*/
varuc=UA.split('UCBrowser/').length>1?1:0;

/**
*判断qq浏览器
*然而qq浏览器分高低版本
*2代表高版本
*1代表低版本
*/
varqq=UA.split('MQQBrowser/').length>1?2:0;

/**
*是否是微信
*/
varwx=/micromessenger/i.test(UA);

/**
*浏览器版本
*/
varqqVs=qq?parseFloat(UA.split('MQQBrowser/')[1]):0;
varucVs=uc?parseFloat(UA.split('UCBrowser/')[1]):0;

/**
*获取操作系统信息iPhone(1)Android(2)
*/
varos=(function(){
varua=navigator.userAgent;

if(/iphone|ipod/i.test(ua)){
return1;
}elseif(/android/i.test(ua)){
return2;
}else{
return0;
}
}());

/**
*qq浏览器下面是否加载好了相应的api文件
*/
varqqBridgeLoaded=false;

//进一步细化版本和平台判断
if((qq&&qqVs<5.4&&os==1)||(qq&&qqVs<5.3&&os==1)){
qq=0;
}else{
if(qq&&qqVs<5.4&&os==2){
qq=1;
}else{
if(uc&&((ucVs<10.2&&os==1)||(ucVs<9.7&&os==2))){
uc=0;
}
}
}
/**
*qq浏览器下面根据不同版本加载对应的bridge
*@methodloadqqApi
*@param{Function}cb回调函数
*/
functionloadqqApi(cb){
//qq==0
if(!qq){
returncb&&cb();
}
varscript=document.createElement('script');
script.src=(+qq===1)?'//3gimg.qq.com/html5/js/qb.js':'//jsapi.qq.com/get?api=app.share';
/**
*需要等加载过qq的bridge脚本之后
*再去初始化分享组件
*/
script.onload=function(){
cb&&cb();
};
document.body.appendChild(script);
}
/**
*UC浏览器分享
*@methoducShare
*/
functionucShare(config){
//['title','content','url','platform','disablePlatform','source','htmlID']
//关于platform
//ios:kWeixin||kWeixinFriend;
//android:WechatFriends||WechatTimeline
//uc分享会直接使用截图
varplatform='';
varshareInfo=null;
//指定了分享类型
if(config.type){
if(os==2){
platform=config.type==1?'WechatTimeline':'WechatFriends';
}elseif(os==1){
platform=config.type==1?'kWeixinFriend':'kWeixin';
}
}
shareInfo=[config.title,config.desc,config.url,platform,'','',''];
//android
if(window.ucweb){
ucweb.startRequest&&ucweb.startRequest('shell.page_share',shareInfo);
return;
}
if(window.ucbrowser){
ucbrowser.web_share&&ucbrowser.web_share.apply(null,shareInfo);
return;
}
}
/**
*qq浏览器分享函数
*@methodqqShare
*/
functionqqShare(config){
vartype=config.type;
//微信好友1,微信朋友圈8
type=type?((type==1)?8:1):'';
varshare=function(){
varshareInfo={
'url':config.url,
'title':config.title,
'description':config.desc,
'img_url':config.img,
'img_title':config.title,
'to_app':type,
'cus_txt':''
};
if(window.browser){
browser.app&&browser.app.share(shareInfo);
}elseif(window.qb){
qb.share&&qb.share(shareInfo);
}
};
if(qqBridgeLoaded){
share();
}else{
loadqqApi(share);
}
}
/**
*对外暴露的接口函数
*@methodmShare
*@param{Object}config配置对象
*/
functionmShare(config){
this.config=config;
this.init=function(type){
if(typeoftype!='undefined')this.config.type=type;
try{
if(uc){
ucShare(this.config);
}elseif(qq&&!wx){
qqShare(this.config);
}
}catch(e){}
}
}
//预加载qqbridge
loadqqApi(function(){
qqBridgeLoaded=true;
});
if(typeofmodule==='object'&&module.exports){
module.exports=mShare;
}else{
window.mShare=mShare;
}

好了，这样就可以直接唤起微信进行分享啦。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

手机浏览器唤起微信分享(JS)

热门推荐

随机推荐