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


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 相关文章推荐
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
Apr 11 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
从vue源码看props的用法
Jan 09 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 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投票系统防刷票判断流程分析
2012/02/04 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python中字符串的处理技巧分享
2016/09/17 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
python构建自定义回调函数详解
2017/06/20 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
C/C++程序员常见面试题一
2012/12/08 面试题
工程质量承诺书范文
2014/03/27 职场文书
社会学专业求职信
2014/07/17 职场文书
学校节水倡议书
2015/04/29 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
放飞理想主题班会
2015/08/14 职场文书
Redis 限流器
2022/05/15 Redis