手机浏览器唤起微信分享(JS)


Posted in Javascript onOctober 11, 2020

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

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

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

html部分:

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

js部分:

<script>
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 ==> 朋友圈 2 ==> 朋友 0 ==> 直接弹出原生
  mshare.init(+$(this).data('mshare'));
});
</script>

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

/**
 * 此插件主要作用是在UC和QQ两个主流浏览器
 * 上面触发微信分享到朋友圈或发送给朋友的功能
 */
'use strict';
var UA = navigator.appVersion;
 
/**
 * 是否是 UC 浏览器
 */
var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
 
/**
 * 判断 qq 浏览器
 * 然而qq浏览器分高低版本
 * 2 代表高版本
 * 1 代表低版本
 */
var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
 
/**
 * 是否是微信
 */
var wx = /micromessenger/i.test(UA);
 
/**
 * 浏览器版本
 */
var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
 
/**
 * 获取操作系统信息 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;
  }
}());
 
/**
 * qq浏览器下面 是否加载好了相应的api文件
 */
var qqBridgeLoaded = false;
 
// 进一步细化版本和平台判断
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浏览器下面 根据不同版本 加载对应的bridge
 * @method loadqqApi
 * @param {Function} cb 回调函数
 */
function loadqqApi(cb) {
  // qq == 0 
  if (!qq) {
    return cb && cb();
  }
  var script = document.createElement('script');
  script.src = (+qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';
  /**
   * 需要等加载过 qq 的 bridge 脚本之后
   * 再去初始化分享组件
   */
  script.onload = function () {
    cb && cb();
  };
  document.body.appendChild(script);
}
/**
 * UC浏览器分享
 * @method ucShare
 */
function ucShare(config) {
  // ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
  // 关于platform
  // ios: kWeixin || kWeixinFriend;
  // android: WechatFriends || WechatTimeline
  // uc 分享会直接使用截图
  var platform = '';
  var shareInfo = null;
  // 指定了分享类型
  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 浏览器分享函数
 * @method qqShare
 */
function qqShare(config) {
  var type = config.type;
  //微信好友 1, 微信朋友圈 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);
  }
}
/**
 * 对外暴露的接口函数
 * @method mShare
 * @param {Object} config 配置对象
 */
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) {}
  }
}
// 预加载 qq bridge
loadqqApi(function () {
  qqBridgeLoaded = true;
});
if (typeof module === 'object' && module.exports) {
  module.exports = mShare;
} else {
  window.mShare = mShare;
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
js控制input框只读实现示例
Jan 20 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
浅析JS运动
Dec 28 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 Javascript
js canvas实现俄罗斯方块
Oct 11 #Javascript
利用js canvas实现五子棋游戏
Oct 11 #Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 #Javascript
原生js生成图片验证码
Oct 11 #Javascript
js实现石头剪刀布游戏
Oct 11 #Javascript
js+h5 canvas实现图片验证码
Oct 11 #Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 #Javascript
You might like
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
js实现简单计算器
2015/11/22 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
一分钟理解js闭包
2016/05/04 Javascript
JS常用算法实现代码
2016/11/14 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
会计学自荐信
2014/06/03 职场文书
低碳环保标语
2014/06/12 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python