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


Posted in Javascript onOctober 11, 2020

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

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

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

html部分:

<script src="mshare.js"></script>//引进mshare.js
<button data-mshare="0">点击弹出原生分享面板</button>
<button data-mshare="1">点击触发朋友圈分享</button>
<button data-mshare="2">点击触发发送给微信朋友</button>

js部分:

<script>
var mshare = new mShare({
  title: 'Lorem ipsum dolor sit.',
  url: 'http://m.ly.com',
  desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.',
  img: 'http://placehold.it/150x150'
});
$('button').click(function () {
  // 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接弹出原生
  mshare.init(+$(this).data('mshare'));
});
</script>

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

/**
 * 此插件主要作用是在UC和QQ两个主流浏览器
 * 上面触发微信分享到朋友圈或发送给朋友的功能
 */
'use strict';
var UA = navigator.appVersion;
 
/**
 * 是否是 UC 浏览器
 */
var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
 
/**
 * 判断 qq 浏览器
 * 然而qq浏览器分高低版本
 * 2 代表高版本
 * 1 代表低版本
 */
var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
 
/**
 * 是否是微信
 */
var wx = /micromessenger/i.test(UA);
 
/**
 * 浏览器版本
 */
var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
 
/**
 * 获取操作系统信息 iPhone(1) Android(2)
 */
var os = (function () {
  var ua = navigator.userAgent;
 
  if (/iphone|ipod/i.test(ua)) {
    return 1;
  } else if (/android/i.test(ua)) {
    return 2;
  } else {
    return 0;
  }
}());
 
/**
 * qq浏览器下面 是否加载好了相应的api文件
 */
var qqBridgeLoaded = 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
 * @method loadqqApi
 * @param {Function} cb 回调函数
 */
function loadqqApi(cb) {
  // qq == 0 
  if (!qq) {
    return cb && cb();
  }
  var script = 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浏览器分享
 * @method ucShare
 */
function ucShare(config) {
  // ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
  // 关于platform
  // ios: kWeixin || kWeixinFriend;
  // android: WechatFriends || WechatTimeline
  // uc 分享会直接使用截图
  var platform = '';
  var shareInfo = null;
  // 指定了分享类型
  if (config.type) {
    if (os == 2) {
      platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends';
    } else if (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 浏览器分享函数
 * @method qqShare
 */
function qqShare(config) {
  var type = config.type;
  //微信好友 1, 微信朋友圈 8
  type = type ? ((type == 1) ? 8 : 1) : '';
  var share = function () {
    var shareInfo = {
      '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);
    } else if (window.qb) {
      qb.share && qb.share(shareInfo);
    }
  };
  if (qqBridgeLoaded) {
    share();
  } else {
    loadqqApi(share);
  }
}
/**
 * 对外暴露的接口函数
 * @method mShare
 * @param {Object} config 配置对象
 */
function mShare(config) {
  this.config = config;
  this.init = function (type) {
    if (typeof type != 'undefined') this.config.type = type;
    try {
      if (uc) {
        ucShare(this.config);
      } else if (qq && !wx) {
        qqShare(this.config);
      }
    } catch (e) {}
  }
}
// 预加载 qq bridge
loadqqApi(function () {
  qqBridgeLoaded = true;
});
if (typeof module === 'object' && module.exports) {
  module.exports = mShare;
} else {
  window.mShare = mShare;
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习2 选择器的使用说明
Feb 07 Javascript
JavaScript 滚轮事件使用说明
Mar 07 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
js canvas实现俄罗斯方块
Oct 11 #Javascript
利用js canvas实现五子棋游戏
Oct 11 #Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 #Javascript
原生js生成图片验证码
Oct 11 #Javascript
js实现石头剪刀布游戏
Oct 11 #Javascript
js+h5 canvas实现图片验证码
Oct 11 #Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 #Javascript
You might like
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
详解Python中expandtabs()方法的使用
2015/05/18 Python
python实现线程池的方法
2015/06/30 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
Python做简单的字符串匹配详解
2017/03/21 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
如何理解python对象
2020/06/21 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
关于运动会的稿件
2014/02/02 职场文书
高中教师评语大全
2014/04/25 职场文书
前台接待岗位职责
2015/02/03 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
Spring Bean是如何初始化的详解
2022/03/22 Java/Android