手机浏览器唤起微信实现分享

2023-05-16

html部分:


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


js部分:


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


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


     
     
  1. /**
  2. * 此插件主要作用是在UC和QQ两个主流浏览器
  3. * 上面触发微信分享到朋友圈或发送给朋友的功能
  4. */
  5. 'use strict';
  6. var UA = navigator.appVersion;
  7. /**
  8. * 是否是 UC 浏览器
  9. */
  10. var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
  11. /**
  12. * 判断 qq 浏览器
  13. * 然而qq浏览器分高低版本
  14. * 2 代表高版本
  15. * 1 代表低版本
  16. */
  17. var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
  18. /**
  19. * 是否是微信
  20. */
  21. var wx = /micromessenger/i.test(UA);
  22. /**
  23. * 浏览器版本
  24. */
  25. var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
  26. var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
  27. /**
  28. * 获取操作系统信息 iPhone(1) Android(2)
  29. */
  30. var os = (function () {
  31. var ua = navigator.userAgent;
  32. if (/iphone|ipod/i.test(ua)) {
  33. return 1;
  34. } else if (/android/i.test(ua)) {
  35. return 2;
  36. } else {
  37. return 0;
  38. }
  39. }());
  40. /**
  41. * qq浏览器下面 是否加载好了相应的api文件
  42. */
  43. var qqBridgeLoaded = false;
  44. // 进一步细化版本和平台判断
  45. if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {
  46. qq = 0;
  47. } else {
  48. if (qq && qqVs < 5.4 && os == 2) {
  49. qq = 1;
  50. } else {
  51. if (uc && ((ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2))) {
  52. uc = 0;
  53. }
  54. }
  55. }
  56. /**
  57. * qq浏览器下面 根据不同版本 加载对应的bridge
  58. * @method loadqqApi
  59. * @param {Function} cb 回调函数
  60. */
  61. function loadqqApi(cb) {
  62. // qq == 0
  63. if (!qq) {
  64. return cb && cb();
  65. }
  66. var script = document.createElement('script');
  67. script.src = (+qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';
  68. /**
  69. * 需要等加载过 qqbridge 脚本之后
  70. * 再去初始化分享组件
  71. */
  72. script.onload = function () {
  73. cb && cb();
  74. };
  75. document.body.appendChild(script);
  76. }
  77. /**
  78. * UC浏览器分享
  79. * @method ucShare
  80. */
  81. function ucShare(config) {
  82. // ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
  83. // 关于platform
  84. // ios: kWeixin || kWeixinFriend;
  85. // android: WechatFriends || WechatTimeline
  86. // uc 分享会直接使用截图
  87. var platform = '';
  88. var shareInfo = null;
  89. // 指定了分享类型
  90. if (config.type) {
  91. if (os == 2) {
  92. platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends';
  93. } else if (os == 1) {
  94. platform = config.type == 1 ? 'kWeixinFriend' : 'kWeixin';
  95. }
  96. }
  97. shareInfo = [config.title, config.desc, config.url, platform, '', '', ''];
  98. // android
  99. if (window.ucweb) {
  100. ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
  101. return;
  102. }
  103. if (window.ucbrowser) {
  104. ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
  105. return;
  106. }
  107. }
  108. /**
  109. * qq 浏览器分享函数
  110. * @method qqShare
  111. */
  112. function qqShare(config) {
  113. var type = config.type;
  114. //微信好友 1, 微信朋友圈 8
  115. type = type ? ((type == 1) ? 8 : 1) : '';
  116. var share = function () {
  117. var shareInfo = {
  118. 'url': config.url,
  119. 'title': config.title,
  120. 'description': config.desc,
  121. 'img_url': config.img,
  122. 'img_title': config.title,
  123. 'to_app': type,
  124. 'cus_txt': ''
  125. };
  126. if (window.browser) {
  127. browser.app && browser.app.share(shareInfo);
  128. } else if (window.qb) {
  129. qb.share && qb.share(shareInfo);
  130. }
  131. };
  132. if (qqBridgeLoaded) {
  133. share();
  134. } else {
  135. loadqqApi(share);
  136. }
  137. }
  138. /**
  139. * 对外暴露的接口函数
  140. * @method mShare
  141. * @param {Object} config 配置对象
  142. */
  143. function mShare(config) {
  144. this.config = config;
  145. this.init = function (type) {
  146. if (typeof type != 'undefined') this.config.type = type;
  147. try {
  148. if (uc) {
  149. ucShare(this.config);
  150. } else if (qq && !wx) {
  151. qqShare(this.config);
  152. }
  153. } catch (e) {}
  154. }
  155. }
  156. // 预加载 qq bridge
  157. loadqqApi(function () {
  158. qqBridgeLoaded = true;
  159. });
  160. if (typeof module === 'object' && module.exports) {
  161. module.exports = mShare;
  162. } else {
  163. window.mShare = mShare;
  164. }
好了,这样就可以直接唤起微信进行分享啦

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

手机浏览器唤起微信实现分享 的相关文章

随机推荐

  • ELF文件结构

    一 ELF文件结构如下图 xff1a 之所以要用ELF文件格式 xff0c 是因为这样可以用C语言和汇编语言混合写内核代码 二 ELF header及Program header详细介绍 nasm f elf o kernel o kern
  • int 13H int 10H int 15H

    一 int 13h中断 对于1 44MB的软盘来讲 xff0c 总共有两面 xff08 磁头号0和1 xff09 xff0c 每面有80个柱面 xff08 0 79 xff09 xff0c 每个柱面有18个扇区 软盘的容量的由来 xff1a
  • Orange's 进程

    解释一个操作系统的实现 chapter6 r中代码 程序流程如下 xff1a 1 把Loader中的GDT和esp挪到Kernel中 xff0c 初始化IDTPTR 2 初始化8259 xff0c 初始化IDT xff0c 初始化GDT中的
  • Orange's TTY

    一 TYY任务本质就是增加了一个进程 xff0c 并且运行在ring1 xff0c 且优先级调高了 并且设置了键盘中断用于接收键盘输入 xff0c 并将扫描码存放在缓冲区 task tyy也就是新加入的进程 xff0c 循环执行读写缓冲区
  • C语言指针强制类型转换

    一 举例说明 上图 对应函数调用为int printf const char fmt xff0c fmt为char 指针类型 xff0c 所以共占了32位字节 xff0c 但是 fmt执行的是一个字节 xff0c fmt 43 43 执行的
  • Orange's 进程间通信

    新增一个系统进程 xff0c 和TESTA进行通信 xff0c 通信的流程是这样的 xff0c 如果首先执行到系统进程 xff0c 发送消息 xff0c 那么会触发内中断到ring0级 xff0c 完成发送所需要的动作 xff0c 之后回到
  • IDEA找不到项目根路径问题【多模块情况】

    如果不对idea进行设置 则默认项目根路径是父项目根路径下 xff0c 即使父项目就是一个壳儿 从eclipse转过来又点不习惯 下面给出解决方法 在启动项找到Edit 这个配置 找到要启动的那个项目 xff0c 进行配置 解决 这时候这个
  • 使用wmic命令获得计算机硬件信息

    wmic的使用方法 wmic 硬件信息名称 get 属性名称 xff0c 属性名称2 代码示例 xff1a java获取CPU代码 public static String getCpuId throws IOException Proce
  • Kotlin--›Android Activity/Fragment转场动画极简使用方法

    Activity之间共享元素实现的转场动画 需要API gt 61 21才支持 但是 转场动画 在 support包里面提供了支持 所以没有API 21的限制 可以参考Transition转场动画的文章 https blog csdn ne
  • android日志抓取

    目录说明 00 mtk dump mtk dump文件 01 qcom dump qcom dump文件
  • 带你走进EJB--EJB和Spring对比

    通过对 EJB 系列的总结和学习我们已经对 EJB 有了基本的了解 但是为了更进一步的去深入学习 EJB 我们很有必要将它拿出来跟之前非常熟悉的 Spring 进行一下对比 通过对比来了解这两个内容的相同与不同之处 更有利于我们对两者进行深
  • Dubbo之旅--Provider示例

    在本篇文章中我们将通过集体的示例来对 Dubbo 的提供和消费进行代码层面的认识 这里所介绍的是基本的提供者和消费者通过 Spring 容器来进行相关的提供和消费的服务 首先看整个示例的项目结构如下 我们通过 Maven 的方式来进行示例
  • Dubbo之旅--问题汇总

    在工作和学习的过程中 具体运用 Dubbo 的时候遇到了很多的问题 这些问题一方面让自己进一步了解所谓的 dubbo 另一方面通过对它们的总结和分析能够在工作中加倍的提高效率 接下来将会对遇到的和别人总结的一些常见的问题进行汇总 1 增加提
  • Dubbo之旅--集群容错和负载均衡

    当我们的系统中用到 Dubbo 的集群环境 因为各种原因在集群调用失败时 xff0c Dubbo提供了多种容错方案 xff0c 缺省为failover重试 Dubbo 的集群容错在这里想说说他是因为我们实际的项目中出现了此类的问题 因为依赖
  • 我和敏捷开发的故事--敏捷角色-SM

    通过上篇文章我们已经知道了敏捷角色中 PO 的角色内容 接下来的一个敏捷角色在敏捷开发中非常关键 但是往往很多项目实践中都没有很好的把控好这个角色 让他或多或少的没有起到相应的作用 这个角色就是 ScrumMaster Scrum Mast
  • backup

    backup
  • backup

    backup
  • backup

    xfeff xfeff backup
  • 工程硕士考试复习小结

    工程硕士考试复习到现在已经接近尾声 后天就要奔赴省城石家庄赶考了 整个工程硕士的复习过程从十月初开始到现在将近一个月的时间 对所需要进行考试的科目进行整体复习 复习的形式前阶段主要是视频讲解中间阶段是看相应的文档和知识点 最后就是进行专项练
  • 手机浏览器唤起微信实现分享

    html部分 xff1a lt script src 61 34 mshare js 34 gt lt script gt 引进mshare js