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


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加载读取内容及显示与隐藏div示例
Feb 13 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
Vue的状态管理vuex使用方法详解
Feb 05 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出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php 生成短网址原理及代码
2014/01/23 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
php验证手机号码
2015/11/11 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
Python之py2exe打包工具详解
2017/06/14 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
python的sorted用法详解
2019/06/25 Python
python hough变换检测直线的实现方法
2019/07/12 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
销售竞赛活动方案
2014/08/23 职场文书
敬老月活动总结
2014/08/28 职场文书
股指期货心得体会
2014/09/10 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
变长双向rnn的正确使用姿势教学
2021/05/31 Python