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


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 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
理解javascript封装
Feb 23 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
Vue 实现拨打电话操作
Nov 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巧获服务器端信息
2006/12/06 PHP
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
详解JS预解析原理
2020/06/16 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
python删除列表内容
2015/08/04 Python
python算法表示概念扫盲教程
2017/04/13 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python双向循环链表实现方法分析
2018/07/30 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
违纪检讨书2000字
2014/02/08 职场文书
补充协议书范本
2014/04/23 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
Oracle用户管理及赋权
2022/04/24 Oracle
小程序实现侧滑删除功能
2022/06/25 Javascript