标签：qq 浏览器 微信 H5 && type var config

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

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

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

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

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

本人转自：https://blog.csdn.net/qq_18976087/article/details/79095735

感谢给位的阅读，本人在休闲之余整理了一些资料和视频，并刚刚创建了一个交流群：907694362 也是我之前刚开始学前端时候看的一些资料，希望对给位有所帮助，也祝各位在前端之路一帆风顺！！

标签：qq,浏览器,微信,H5,&&,type,var,config
来源： https://www.cnblogs.com/xsd1/p/11906150.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。