js实现微信分享代码


Posted in Javascript onOctober 11, 2020

通常自己做的一个页面想通过微信像朋友分享时,展示的标题和描述都是不是自己想要的,自己查了一些资料,原来是通过js来进行控制
展示效果如下:

js实现微信分享代码

js实现微信分享代码

标题、描述、还有分享的图片都是有js来控制的。
js代码如下

<script>
 var dataForWeixin = {
 appId: "",
 MsgImg: "Christmas/201012189457639.gif",//显示图片
 TLImg: "Christmas/201012189457639.gif",//显示图片
 url: "Christmas/6.html?stra=!u738B!u4F1F",//跳转地址
 title: "将我的思念和祝福送给您,颐养源祝大家圣诞快乐",//标题内容
 desc: "将我的思念和祝福送给您,颐养源祝大家圣诞快乐",//描述内容
 fakeid: "",
 callback: function () { }
 };
 (function () {
 var onBridgeReady = function () {
 WeixinJSBridge.on('menu:share:appmessage', function (argv) {
  WeixinJSBridge.invoke('sendAppMessage', {
  "appid": dataForWeixin.appId,
  "img_url": dataForWeixin.MsgImg,
  "img_width": "120",
  "img_height": "120",
  "link": dataForWeixin.url,
  "desc": dataForWeixin.desc,
  "title": dataForWeixin.title
  }, function (res) { (dataForWeixin.callback)(); });
 });
 WeixinJSBridge.on('menu:share:timeline', function (argv) {
  (dataForWeixin.callback)();
  WeixinJSBridge.invoke('shareTimeline', {
  "img_url": dataForWeixin.TLImg,
  "img_width": "120",
  "img_height": "120",
  "link": dataForWeixin.url,
  "desc": dataForWeixin.desc,
  "title": dataForWeixin.title
  }, function (res) { });
 });
 WeixinJSBridge.on('menu:share:weibo', function (argv) {
  WeixinJSBridge.invoke('shareWeibo', {
  "content": dataForWeixin.title,
  "url": dataForWeixin.url
  }, function (res) { (dataForWeixin.callback)(); });
 });
 WeixinJSBridge.on('menu:share:facebook', function (argv) {
  (dataForWeixin.callback)();
  WeixinJSBridge.invoke('shareFB', {
  "img_url": dataForWeixin.TLImg,
  "img_width": "120",
  "img_height": "120",
  "link": dataForWeixin.url,
  "desc": dataForWeixin.desc,
  "title": dataForWeixin.title
  }, function (res) { });
 });
 };
 
 if (document.addEventListener) {
 document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
 } else if (document.attachEvent) {
 document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
 document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
 }
 })();
</script>

另一个微信分享js代码:

/**!
 * 微信内置浏览器的Javascript API,功能包括:
 *
 * 1、分享到微信朋友圈
 * 2、分享给微信好友
 * 3、分享到腾讯微博
 * 4、新的分享接口,包含朋友圈、好友、微博的分享(for iOS)
 * 5、隐藏/显示右上角的菜单入口
 * 6、隐藏/显示底部浏览器工具栏
 * 7、获取当前的网络状态
 * 8、调起微信客户端的图片播放组件
 * 9、关闭公众平台Web页面
 */
var WeixinApi = (function () {

 "use strict";

 /**
 * 分享到微信朋友圈
 * @param {Object} data 待分享的信息
 * @p-config {String} appId 公众平台的appId(服务号可用)
 * @p-config {String} imgUrl 图片地址
 * @p-config {String} link 链接地址
 * @p-config {String} desc 描述
 * @p-config {String} title 分享的标题
 *
 * @param {Object} callbacks 相关回调方法
 * @p-config {Boolean} async  ready方法是否需要异步执行,默认false
 * @p-config {Function} ready(argv) 就绪状态
 * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空
 * @p-config {Function} cancel(resp) 取消
 * @p-config {Function} fail(resp) 失败
 * @p-config {Function} confirm(resp) 成功
 * @p-config {Function} all(resp) 无论成功失败都会执行的回调
 */
 function weixinShareTimeline(data, callbacks) {
 callbacks = callbacks || {};
 var shareTimeline = function (theData) {
 WeixinJSBridge.invoke('shareTimeline', {
 "appid":theData.appId ? theData.appId : '',
 "img_url":theData.imgUrl,
 "link":theData.link,
 "desc":theData.title,
 "title":theData.desc, // 注意这里要分享出去的内容是desc
 "img_width":"640",
 "img_height":"640"
 }, function (resp) {
 switch (resp.err_msg) {
  // share_timeline:cancel 用户取消
  case 'share_timeline:cancel':
  callbacks.cancel && callbacks.cancel(resp);
  break;
  // share_timeline:confirm 发送成功
  case 'share_timeline:confirm':
  case 'share_timeline:ok':
  callbacks.confirm && callbacks.confirm(resp);
  break;
  // share_timeline:fail 发送失败
  case 'share_timeline:fail':
  default:
  callbacks.fail && callbacks.fail(resp);
  break;
 }
 // 无论成功失败都会执行的回调
 callbacks.all && callbacks.all(resp);
 });
 };
 WeixinJSBridge.on('menu:share:timeline', function (argv) {
 if (callbacks.async && callbacks.ready) {
 window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
 if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
  window["_wx_loadedCb_"] = new Function();
 }
 callbacks.dataLoaded = function (newData) {
  window["_wx_loadedCb_"](newData);
  shareTimeline(newData);
 };
 // 然后就绪
 callbacks.ready && callbacks.ready(argv);
 } else {
 // 就绪状态
 callbacks.ready && callbacks.ready(argv);
 shareTimeline(data);
 }
 });
 }

 /**
 * 发送给微信上的好友
 * @param {Object} data 待分享的信息
 * @p-config {String} appId 公众平台的appId(服务号可用)
 * @p-config {String} imgUrl 图片地址
 * @p-config {String} link 链接地址
 * @p-config {String} desc 描述
 * @p-config {String} title 分享的标题
 *
 * @param {Object} callbacks 相关回调方法
 * @p-config {Boolean} async  ready方法是否需要异步执行,默认false
 * @p-config {Function} ready(argv) 就绪状态
 * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空
 * @p-config {Function} cancel(resp) 取消
 * @p-config {Function} fail(resp) 失败
 * @p-config {Function} confirm(resp) 成功
 * @p-config {Function} all(resp) 无论成功失败都会执行的回调
 */
 function weixinSendAppMessage(data, callbacks) {
 callbacks = callbacks || {};
 var sendAppMessage = function (theData) {
 WeixinJSBridge.invoke('sendAppMessage', {
 "appid":theData.appId ? theData.appId : '',
 "img_url":theData.imgUrl,
 "link":theData.link,
 "desc":theData.desc,
 "title":theData.title,
 "img_width":"640",
 "img_height":"640"
 }, function (resp) {
 switch (resp.err_msg) {
  // send_app_msg:cancel 用户取消
  case 'send_app_msg:cancel':
  callbacks.cancel && callbacks.cancel(resp);
  break;
  // send_app_msg:confirm 发送成功
  case 'send_app_msg:confirm':
  case 'send_app_msg:ok':
  callbacks.confirm && callbacks.confirm(resp);
  break;
  // send_app_msg:fail 发送失败
  case 'send_app_msg:fail':
  default:
  callbacks.fail && callbacks.fail(resp);
  break;
 }
 // 无论成功失败都会执行的回调
 callbacks.all && callbacks.all(resp);
 });
 };
 WeixinJSBridge.on('menu:share:appmessage', function (argv) {
 if (callbacks.async && callbacks.ready) {
 window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
 if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
  window["_wx_loadedCb_"] = new Function();
 }
 callbacks.dataLoaded = function (newData) {
  window["_wx_loadedCb_"](newData);
  sendAppMessage(newData);
 };
 // 然后就绪
 callbacks.ready && callbacks.ready(argv);
 } else {
 // 就绪状态
 callbacks.ready && callbacks.ready(argv);
 sendAppMessage(data);
 }
 });
 }

 /**
 * 分享到腾讯微博
 * @param {Object} data 待分享的信息
 * @p-config {String} link 链接地址
 * @p-config {String} desc 描述
 *
 * @param {Object} callbacks 相关回调方法
 * @p-config {Boolean} async  ready方法是否需要异步执行,默认false
 * @p-config {Function} ready(argv) 就绪状态
 * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空
 * @p-config {Function} cancel(resp) 取消
 * @p-config {Function} fail(resp) 失败
 * @p-config {Function} confirm(resp) 成功
 * @p-config {Function} all(resp) 无论成功失败都会执行的回调
 */
 function weixinShareWeibo(data, callbacks) {
 callbacks = callbacks || {};
 var shareWeibo = function (theData) {
 WeixinJSBridge.invoke('shareWeibo', {
 "content":theData.desc,
 "url":theData.link
 }, function (resp) {
 switch (resp.err_msg) {
  // share_weibo:cancel 用户取消
  case 'share_weibo:cancel':
  callbacks.cancel && callbacks.cancel(resp);
  break;
  // share_weibo:confirm 发送成功
  case 'share_weibo:confirm':
  case 'share_weibo:ok':
  callbacks.confirm && callbacks.confirm(resp);
  break;
  // share_weibo:fail 发送失败
  case 'share_weibo:fail':
  default:
  callbacks.fail && callbacks.fail(resp);
  break;
 }
 // 无论成功失败都会执行的回调
 callbacks.all && callbacks.all(resp);
 });
 };
 WeixinJSBridge.on('menu:share:weibo', function (argv) {
 if (callbacks.async && callbacks.ready) {
 window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
 if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
  window["_wx_loadedCb_"] = new Function();
 }
 callbacks.dataLoaded = function (newData) {
  window["_wx_loadedCb_"](newData);
  shareWeibo(newData);
 };
 // 然后就绪
 callbacks.ready && callbacks.ready(argv);
 } else {
 // 就绪状态
 callbacks.ready && callbacks.ready(argv);
 shareWeibo(data);
 }
 });
 }


 /**
 * 新的分享接口
 * @param {Object} data 待分享的信息
 * @p-config {String} appId 公众平台的appId(服务号可用)
 * @p-config {String} imgUrl 图片地址
 * @p-config {String} link 链接地址
 * @p-config {String} desc 描述
 * @p-config {String} title 分享的标题
 *
 * @param {Object} callbacks 相关回调方法
 * @p-config {Boolean} async  ready方法是否需要异步执行,默认false
 * @p-config {Function} ready(argv,shareTo) 就绪状态
 * @p-config {Function} dataLoaded(data) 数据加载完成后调用,async为true时有用,也可以为空
 * @p-config {Function} cancel(resp,shareTo) 取消
 * @p-config {Function} fail(resp,shareTo) 失败
 * @p-config {Function} confirm(resp,shareTo) 成功
 * @p-config {Function} all(resp,shareTo) 无论成功失败都会执行的回调
 */
 function weixinGeneralShare(data, callbacks) {
 callbacks = callbacks || {};
 var generalShare = function (general,theData) {

 // 如果是分享到朋友圈,则需要把title和desc交换一下
 if(general.shareTo == 'timeline') {
 var title = theData.title;
 theData.title = theData.desc || title;
 theData.desc = title;
 }

 // 分享出去
 general.generalShare({
 "appid":theData.appId ? theData.appId : '',
 "img_url":theData.imgUrl,
 "link":theData.link,
 "desc":theData.desc,
 "title":theData.title,
 "img_width":"640",
 "img_height":"640"
 }, function (resp) {
 switch (resp.err_msg) {
  // general_share:cancel 用户取消
  case 'general_share:cancel':
  callbacks.cancel && callbacks.cancel(resp ,general.shareTo);
  break;
  // general_share:confirm 发送成功
  case 'general_share:confirm':
  case 'general_share:ok':
  callbacks.confirm && callbacks.confirm(resp ,general.shareTo);
  break;
  // general_share:fail 发送失败
  case 'general_share:fail':
  default:
  callbacks.fail && callbacks.fail(resp ,general.shareTo);
  break;
 }
 // 无论成功失败都会执行的回调
 callbacks.all && callbacks.all(resp ,general.shareTo);
 });
 };
 WeixinJSBridge.on('menu:general:share', function (general) {
 if (callbacks.async && callbacks.ready) {
 window["_wx_loadedCb_"] = callbacks.dataLoaded || new Function();
 if(window["_wx_loadedCb_"].toString().indexOf("_wx_loadedCb_") > 0) {
  window["_wx_loadedCb_"] = new Function();
 }
 callbacks.dataLoaded = function (newData) {
  window["_wx_loadedCb_"](newData);
  generalShare(general,newData);
 };
 // 然后就绪
 callbacks.ready && callbacks.ready(general,general.shareTo);
 } else {
 // 就绪状态
 callbacks.ready && callbacks.ready(general,general.shareTo);
 generalShare(general,data);
 }
 });
 }

 /**
 * 加关注(此功能只是暂时先加上,不过因为权限限制问题,不能用,如果你的站点是部署在*.qq.com下,也许可行)
 * @param {String} appWeixinId 微信公众号ID
 * @param {Object} callbacks 回调方法
 * @p-config {Function} fail(resp) 失败
 * @p-config {Function} confirm(resp) 成功
 */
 function addContact(appWeixinId,callbacks){
 callbacks = callbacks || {};
 WeixinJSBridge.invoke("addContact", {
 webtype: "1",
 username: appWeixinId
 }, function (resp) {
 var success = !resp.err_msg || "add_contact:ok" == resp.err_msg || "add_contact:added" == resp.err_msg;
 if(success) {
 callbacks.success && callbacks.success(resp);
 }else{
 callbacks.fail && callbacks.fail(resp);
 }
 })
 }

 /**
 * 调起微信Native的图片播放组件。
 * 这里必须对参数进行强检测,如果参数不合法,直接会导致微信客户端crash
 *
 * @param {String} curSrc 当前播放的图片地址
 * @param {Array} srcList 图片地址列表
 */
 function imagePreview(curSrc,srcList) {
 if(!curSrc || !srcList || srcList.length == 0) {
 return;
 }
 WeixinJSBridge.invoke('imagePreview', {
 'current' : curSrc,
 'urls' : srcList
 });
 }

 /**
 * 显示网页右上角的按钮
 */
 function showOptionMenu() {
 WeixinJSBridge.call('showOptionMenu');
 }


 /**
 * 隐藏网页右上角的按钮
 */
 function hideOptionMenu() {
 WeixinJSBridge.call('hideOptionMenu');
 }

 /**
 * 显示底部工具栏
 */
 function showToolbar() {
 WeixinJSBridge.call('showToolbar');
 }

 /**
 * 隐藏底部工具栏
 */
 function hideToolbar() {
 WeixinJSBridge.call('hideToolbar');
 }

 /**
 * 返回如下几种类型:
 *
 * network_type:wifi wifi网络
 * network_type:edge 非wifi,包含3G/2G
 * network_type:fail 网络断开连接
 * network_type:wwan 2g或者3g
 *
 * 使用方法:
 * WeixinApi.getNetworkType(function(networkType){
 *
 * });
 *
 * @param callback
 */
 function getNetworkType(callback) {
 if (callback && typeof callback == 'function') {
 WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
 // 在这里拿到e.err_msg,这里面就包含了所有的网络类型
 callback(e.err_msg);
 });
 }
 }

 /**
 * 关闭当前微信公众平台页面
 */
 function closeWindow() {
 WeixinJSBridge.call("closeWindow");
 }

 /**
 * 当页面加载完毕后执行,使用方法:
 * WeixinApi.ready(function(Api){
 * // 从这里只用Api即是WeixinApi
 * });
 * @param readyCallback
 */
 function wxJsBridgeReady(readyCallback) {
 if (readyCallback && typeof readyCallback == 'function') {
 var Api = this;
 var wxReadyFunc = function () {
 readyCallback(Api);
 };
 if (typeof window.WeixinJSBridge == "undefined"){
 if (document.addEventListener) {
  document.addEventListener('WeixinJSBridgeReady', wxReadyFunc, false);
 } else if (document.attachEvent) {
  document.attachEvent('WeixinJSBridgeReady', wxReadyFunc);
  document.attachEvent('onWeixinJSBridgeReady', wxReadyFunc);
 }
 }else{
 wxReadyFunc();
 }
 }
 }

 return {
 version :"2.0",
 ready :wxJsBridgeReady,
 shareToTimeline :weixinShareTimeline,
 shareToWeibo :weixinShareWeibo,
 shareToFriend :weixinSendAppMessage,
 generalShare :weixinGeneralShare,
 addContact :addContact,
 showOptionMenu :showOptionMenu,
 hideOptionMenu :hideOptionMenu,
 showToolbar :showToolbar,
 hideToolbar :hideToolbar,
 getNetworkType :getNetworkType,
 imagePreview :imagePreview,
 closeWindow :closeWindow
 };
})();

本文已被整理到了《JavaScript微信开发技巧汇总》,欢迎大家学习阅读。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是微信分享js代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
JavaScript观察者模式(经典)
Dec 09 #Javascript
常用的Javascript设计模式小结
Dec 09 #Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 #Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 #Javascript
详解JavaScript基本类型和引用类型
Dec 09 #Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 #Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 #Javascript
You might like
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python实现的简单dns查询功能示例
2017/05/24 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
无房证明样本
2015/06/17 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers