H5之外部浏览器唤起微信分享

最近在做一个手机站，要求点击分享可以直接打开微信分享出去。而不是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 也是我之前刚开始学前端时候看的一些资料，希望对给位有所帮助，也祝各位在前端之路一帆风顺！！

 

来源：oschina

链接：https://my.oschina.net/u/4332911/blog/3343310