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

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

需求概述

微信中可以直接转发网页链接,用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友,朋友圈,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">

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

(0)

相关推荐

  • thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例

    本文实例讲述了thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能.分享给大家供大家参考,具体如下: php代码 function curlHtml($url){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CU

  • 微信小程序前端自定义分享的实现方法

    背景 目前手上有一个小程序的项目,希望转发时分享消息的界面能够自定义,然而微信小程序只提供设置图片的url和title. /** * 用户点击右上角分享 */ onShareAppMessage: function() { return { imageUrl:'', title:'' }; } 实现 我们要转发的显示内容多了一点东西:头像,用户名和点赞数.好在这个排版不是很复杂,所以我们思考了一下通过canvas去生成一张图片再return canvas所生成的图片url. 代码如下(其实还要作

  • 使用微信SDK自定义分享的方法

    一.背景介绍 在微信中打开自己网站的链接,经常会变成下面这样 不太好看有木有,如果你想在分享出来的东西带上你的logo,带上你想要的描述,怎么办,像下面这样 这就需要用到微信的分享SDK,文档链接:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 二.微信SDK使用说明第一步 第一步 先要在微信公众平台上注册一个微信公众号,还必须要是认证的企业或组织,流程走下来大概要个两三天的时间吧,只有认证了的公众

  • thinkphp项目如何自定义微信分享描述内容

    本文主要讲述:在thinkphp框架中,如何获取微信分享接口权限.如何设置安全域名.如何修改微信分享标题.修改微信分享描述.修改微信分享图片.如何定制微信分享内容. 修改后的示例:http://games.zixuephp.cn 下面是修改微信分享标题.微信分享描述.微信分享图片和不修改的效果对比图: 没有修改的微信分享效果图:其中分享内容是分享的页面的url路径. 修改过微信分享内容的效果如下图:分享内容为自己定制的内容. 1.必要条件:认证过的公众号. 2.在微信公众号管理后台中,点击公众号

  • php版微信公众号自定义分享内容实现方法

    本文实例讲述了php版微信公众号自定义分享内容实现方法.分享给大家供大家参考,具体如下: 微信公众号号在手机中通过api接口可以实现自定义分享内容了,下面我们来看这个接口的实现步骤. 一.准备阶段 公众号一个,微网站一个. 二.绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 备注:登录后可在"开发者中心"查看对应的接口权限. 三.代码 <?php //curl获取请求文本内容 f

  • 微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】

    本文实例讲述了微信JS-SDK自定义分享功能.分享给大家供大家参考,具体如下: 分享出去的内容,可以通过jssdk进行修改. 1.配置jssdk Wx_config.html <?php import("@.ORG.jssdk"); $jssdk = new JSSDK(C('oauth_config.appid'), C('oauth_config.appsecret')); $signPackage = $jssdk->GetSignPackage(); ?> &

  • 微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解

    最近开发一个项目时,有微信H5网页自定义分享功能,使用了微信JS-SDK的分享到好友和分享到朋友圈功能. 微信开发文档这样写的 自定义"分享给朋友"及"分享到QQ"按钮的分享内容(1.4.0) wx.ready(function () { //需在用户可能点击分享按钮前就先调用 wx.updateAppMessageShareData({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接,该链接域名或路径必

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

    网页分享到微信要怎么才能自定义标题,内容和图片呢? 需求概述 微信中可以直接转发网页链接,用户在微信内置浏览器中打开后可以通过微信浏览器中右上角进行分享到朋友,朋友圈,QQ等.但直接这样分享的话,用户看到的只是一条链接,没有任何的图文内容. 如下图,图1是别人分享给我的链接效果,图2是我分享给别人的效果.两种方案的用户体验我想都不用我多说了,一眼就能看的出来. 方案实现 要达到上图自定义文案与图标的效果,必须要采用微信提供的JS-SDK,微信JS-SDK是微信公众平台面向网页开发者提供的基于微信

  • 微信小程序教程之本地图片上传(leancloud)实例详解

    微信小程序 leancloud --本地图片上传 由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下. 将本地图片上传至leancloud后台. 获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客 直接上代码: 1.index.js //index.js //获取应用实例 var app = getApp() const AV = require('../../utils/av-weapp.js'); Page({ da

  • Python实现字符型图片验证码识别完整过程详解

    1摘要 验证码是目前互联网上非常常见也是非常重要的一个事物,充当着很多系统的防火墙功能,但是随时OCR技术的发展,验证码暴露出来的安全问题也越来越严峻.本文介绍了一套字符验证码识别的完整流程,对于验证码安全和OCR识别技术都有一定的借鉴意义. 本文的基于传统的机器学习SVM的源码共享:https://github.com/zhengwh/captcha-svm 2关键词 关键词:安全,字符图片,验证码识别,OCR,Python,SVM,PIL 3免责声明 本文研究所用素材来自于某旧Web框架的网

  • 微信小程序 动态的设置图片的高度和宽度详解及实例代码

    微信小程序图片等比例缩放 动态的获取图片的高度和宽度 动态的设置图片的高度和宽度 前言: 在小程序布局中,如果图片不是固定高度和高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和宽度不是等比例大小,那么这张图片就会变形,变的不清晰.这时就可以使用下面的等比例缩放的方式缩放图片,让图片不变形.或者通过image的bindload方法动态的获取图片的高度和宽度,动态的设置图片的高度和宽度,是图片布局的高度和宽度和原始图片的高度和宽度相等. 1.图片等比例缩放工具

  • 使用GruntJS链接与压缩多个JavaScript文件过程详解

    自己写了个简单的HTML5 Canvas的图表库,可以支持饼图,折线图,散点图,盒子图 柱状图,同时支持鼠标提示,绘制过程动画效果等.最终我想把这些多个JS文件变成 一个JS文件发布出去,于是我的问题来啦,怎么把这些JS文件搞成一个啊,群里有个 朋友告诉我,GruntJS – JavaScript多文件编译,风格检查,链接与压缩神器.Google了一 把终于帮我完成这个任务,算是入门,分享一下过程. 一什么是GruntJS 不想翻译英文,自己看它的网站吧->http://gruntjs.com/

  • Python检查图片是否损坏及图片类型是否正确过程详解

    检查图片是否损坏 日常工作中,时常会需要用到图片,有时候图片在下载.解压过程中会损坏,而如果一张一张点击来检查就太不Cool了,因此我想大家都需要一个检查脚本: 测试图片,0.jpg是正常的,broke.jpg是手动删掉一点内容后异常的: 脚本运行结果: 代码如下: def is_valid_image(path): ''' 检查文件是否损坏 ''' try: bValid = True fileObj = open(path, 'rb') # 以二进制形式打开 buf = fileObj.re

  • 微信小程序调用天气接口并且渲染在页面过程详解

    前两天写了关于组件库 iView Weapp的教程,其实也就是把文档上的例子拿出来体验了一遍,今天写一个具体的例子,调用一个免费的天气接口的api,并且把所获取的内容展示在前端的界面,前端界面与 iView Weapp结合,展示的一个小的demo. 先上效果 开始写代码: 1:找打一个免费的天气接口 免费接口api: https://www.apiopen.top/api.html#top https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%

  • 基于thinkPHP实现的微信自定义分享功能示例

    本文实例讲述了基于thinkPHP实现的微信自定义分享功能.分享给大家供大家参考,具体如下: 在许多大的网站我们都会看到点击分享就可以把数据分享到微信或QQ或其它的平台了,下面我们来看一段php版微信自定义分享代码,代码参考官方开发的没有任何问题. 分享需要认证微信订阅号或者服务号. php 代码(thinkphp): $appid='xxx'; $appsecret='xxxx'; $timestamp = time(); $noncestr = $this->getRandStr(15);

  • 微信自定义分享php代码分析

    前一段之间做微信自定义分享,积累了一些经验,分享给大家. 步骤一.二在微信开发者文档中已经很详细了,直接从步骤三开始吧. 步骤三要参数微信的参数,除了appId之外,其他的参数都是动态的,这里,我用的php语言,在后端生成的参数,代码如下: php端代码: public function getwxinfo(){ $dataurl = I('dataurl'); include('./ThinkPHP/Library/Vendor/jssdk/jssdk.php'); $jssdk = new

随机推荐