微信自定义分享链接信息(标题,图片和内容)实现过程详解


Posted in Javascript onSeptember 04, 2019

网页分享到微信要怎么才能自定义标题,内容和图片呢?

需求概述

微信中可以直接转发网页链接,用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友,朋友圈,QQ等。但直接这样分享的话,用户看到的只是一条链接,没有任何的图文内容。

如下图,图1是别人分享给我的链接效果,图2是我分享给别人的效果。两种方案的用户体验我想都不用我多说了,一眼就能看的出来.

微信自定义分享链接信息(标题,图片和内容)实现过程详解

方案实现

要达到上图自定义文案与图标的效果,必须要采用微信提供的JS-SDK,微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。可参考微信JS-SDK说明文档。(如果你不懂技术或者没有认证的公众号,使用wecard工具也可以实现相关的效果。)

微信自定义分享链接信息(标题,图片和内容)实现过程详解

具体步骤:

1、准备一个备案的域名和空间,绑定域名到该空间去。

2、登录微信公众平台,进入“公众号设置”的功能设置里面填写js接口安全域名,这个要填写的是你微信浏览器要打开的域名地址,不能添加IP地址。

3、引入js文件,在需要调用js接口的页面接入JS文件。

http://res.wx.qq.com/open/js/jweixin-1.2.0.js

4、通过config接口注入权限并验证配置(这一步算是整个步骤中最关键的一步,必须正确的配置信息才可以进行调用JS-SDK。)

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名,见附录1
  jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

详细接入代码

+ (currentLink.indexOf("?") > -1 ? ("&u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}") : ("?u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}"));
      shareLink = shareLink + (shareLink.indexOf("?") > -1 ? ("&city=" + "深圳") : ("?city=" + "深圳"));
  var shareImgUrl = "${IMGPATH!}/images/banner2.png";
  var shareGid = "";

  wx.ready(function () {
    //分享给朋友
    wx.onMenuShareAppMessage({
      title: shareTitle,
      desc: shareDesc,
      link: shareLink,
      imgUrl: shareImgUrl,
      success: function (res) {
          shared(shareLink, "friend", shareGid);
        },
        fail: function (res) {
         alert(JSON.stringify(res));
        }
    });
    //分享到朋友圈
    wx.onMenuShareTimeline({
      title: shareTitle,
      desc: shareDesc,
      link: shareLink,
      imgUrl: shareImgUrl,
      success: function (res) {
          shared(shareLink, "Timeline", shareGid);
        },
        fail: function (res) {
         alert(JSON.stringify(res));
        }
    });
     //分享到QQ
    wx.onMenuShareQQ({
      title: shareTitle,
      desc: shareDesc,
      link: shareLink,
      imgUrl: shareImgUrl,
      success: function (res) {
          shared(shareLink, "QQ", shareGid);
        },
        fail: function (res) {
         alert(JSON.stringify(res));
        }
    });
     //分享到腾讯QQ
    wx.onMenuShareWeibo({
      title: shareTitle,
      desc: shareDesc,
      link: shareLink,
      imgUrl: shareImgUrl,
      success: function (res) {
          shared(shareLink, "Weibo", shareGid);
        },
        fail: function (res) {
         alert(JSON.stringify(res));
        }
    });
     //分享到QZone
    wx.onMenuShareQZone({
      title: shareTitle,
      desc: shareDesc,
      link: shareLink,
      imgUrl: shareImgUrl,
      success: function (res) {
          shared(shareLink, "QZone", shareGid);
        },
        fail: function (res) {
         alert(JSON.stringify(res));
        }
    });
  });
  function shared(url, type, gid){
    var rUrl = basePath + "/share/add?type=" + type + "&url=" + encodeURI(url);
    if(!!gid) {
      rUrl += "&gid=" + gid;
    }
    $.ajax({
      type: "GET",
      url: rUrl,
      dataType: "json",
      success: function(rs){
        //alert("分享成功");
      }
    });
  }
  " _ue_custom_node_="true">

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

Javascript 相关文章推荐
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
小程序实现筛子抽奖
May 26 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 #Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 #Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 #Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 #Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 #Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 #Javascript
layui 表单标签的校验方法
Sep 04 #Javascript
You might like
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
php模板引擎技术简单实现
2016/03/15 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
python调用API实现智能回复机器人
2018/04/10 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
Python字典底层实现原理详解
2019/12/18 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
信息管理应届生求职信
2014/03/07 职场文书
高中家长寄语
2014/04/02 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
委托公证书样本
2015/01/23 职场文书
吴仁宝观后感
2015/06/09 职场文书
导游词之唐山景点
2019/12/18 职场文书