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 相关文章推荐
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
最短的IE判断代码
Mar 13 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
前端把html表格生成为excel表格的实例
Sep 19 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
从源码里了解vue中的nextTick的使用
Nov 22 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水印
2007/03/16 PHP
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
Angularjs 事件指令详细整理
2017/07/27 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python实现多并发访问网站功能示例
2017/06/19 Python
一道python走迷宫算法题
2018/01/22 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
python3.5绘制随机漫步图
2018/08/27 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
你常见到的runtime exception
2016/09/05 面试题
学生党员的自我评价范文
2014/03/01 职场文书
我的求职择业计划书
2014/04/04 职场文书
给老师的一封感谢信
2015/01/20 职场文书
辞职信范文大全
2015/03/02 职场文书
mysql幻读详解实例以及解决办法
2022/06/16 MySQL