最近在做一个手机站，要求点击分享可以直接打开微信分享出去。而不是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. }

复制代码

好了，这样就可以直接唤起微信进行分享啦
总结
以上所述是小编给大家介绍的HTML5中外部浏览器唤起微信分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

来源：https://www.jb51.net/html5/708579.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！