Shulou(Shulou.com)06/01 Report--

This article mainly explains "html5 how to achieve external browsers to evoke Wechat", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "html5 how to achieve external browsers to evoke Wechat" bar!

Html section:

/ / introduce mshare.js click to pop up native sharing panel click to trigger moments to share click trigger to send to Wechat friends

Js section:

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 = > moments 2 = > Friends 0 = > Native mshare.init pops up directly (+ $(this) .data (' mshare'));})

Here is the code sharing for mshare.js. Create a new js file of this code and put it in it, then introduce ok into the page.

/ * the main function of this plug-in is to trigger the function of Wechat to share or send to friends on UC and QQ browsers * / 'use strict';var UA = navigator.appVersion;/** * is it a UC browser * / var uc = UA.split (' UCBrowser/'). Length > 1? 1: 0 / * judge QQ Browser * however, QQ Browser's high or low version * 2 represents the high version * 1 represents the low version * / var qq = UA.split ('MQQBrowser/'). Length > 1? 2: 0 * is it Wechat * / var wx = / micromessenger/i.test (UA); / * * browser version * / var qqVs = qq? ParseFloat (UA.split ('MQQBrowser/') [1]): 0 var ucVs = uc? ParseFloat (UA.split ('UCBrowser/') [1]): 0 * obtain operating system information 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;}} ()) / * whether the corresponding api file has been loaded under QQ Browser * / var qqBridgeLoaded = false;// further refined version and platform judgment 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 Browser loads the corresponding bridge * @ method loadqqApi * @ param {Function} cb callback function * / function loadqqApi (cb) {/ / qq = = 0 if (! qq) {return cb & & cb ();} var script = document.createElement ('script') according to different versions Script.src = (+ qq = 1)?'/ / 3gimg.qq.comUniple html5Maple qb.js':'/ / jsapi.qq.com/get?api=app.share'; / * need to initialize the sharing component * / script.onload = function () {cb & & cb ();}; document.body.appendChild (script) after loading qq's bridge script. } / * UC browser sharing * @ method ucShare * / function ucShare (config) {/ / ['title',' content', 'url',' platform', 'disablePlatform',' source', 'htmlID'] / / about platform / / ios: kWeixin | | kWeixinFriend; / / android: WechatFriends | | WechatTimeline / / uc sharing will directly use screenshot var platform =''; var shareInfo = null / / specified sharing type 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 Browser sharing function * @ method qqShare * / function qqShare (config) {var type = config.type; / / Wechat Friends 1, Wechat moments 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) The exposed interface function * @ method mShare * @ param {Object} config configuration object * / 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) {} / / preload qq bridgeloadqqApi (function () {qqBridgeLoaded = true;}); if (typeof module = 'object' & & module.exports) {module.exports = mShare;} else {window.mShare = mShare } at this point, I believe you have a better understanding of "how html5 implements external browsers to evoke Wechat". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.