投稿
  1. 蓝洛水深Home
  2. 教程
  3. 网站

小白视角：自定义微信分享时的图标、标题以及简介教程

蓝洛水深 • • 网站 • 10287 views

最近拍了一些亿级像素全景，因全景程序还没有做二开，所以是原生的html，我所需要做的就是，将这个html链接分享到微信或者朋友圈时，显示我自定义的标题，自定义的图标，自定义的简介。

以下是具体过程，因为本人是个菜鸟，所以本文是以菜鸟的视角操作的。

一、了解学习

这个过程是必不可少的，当然，如果你想要成品，只需要跳到文章最后下载demo，然后根据我的说明修改操作即可。

微信JS-SDK说明文档

建议大致看一遍，了解一下微信这边是怎么要求我们去请求内容，怎么实现功能的。

当然了，这过程中如果需要进行调试，可以使用官方给的调试工具

微信公众平台接口调试工具

二、准备工作

  • 1、公众号认证过
  • 2、所用域名必须备案
  • 3、服务器支持动态语言（PHP、Java等）

找到开发者ID和开发者密码，这两个信息可以在微信公众平台基本配置下面获取，获取后记得保存。

小白视角：自定义微信分享时的图标、标题以及简介教程

设置IP白名单，IP白名单是在开发 ->基本配置里面，此处设置的是填服务器的IP地址。

小白视角：自定义微信分享时的图标、标题以及简介教程

设置域名白名单，域名白名单在公众号设置->功能设置里面，其中微信分享调用的是JS接口，所以需要设置JS接口安全域名

小白视角：自定义微信分享时的图标、标题以及简介教程

三、制作分享

微信官方提供了php、java、nodejs以及python的示例代码，需要注意的是JAVA, Node, Python 部分代码只实现了签名算法，需要开发者传入 jsapi_ticket 和 url ，其中 jsapi_ticket 需要通过http://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=ACCESS_TOKEN 接口获取，url 为调用页面的完整 url 。

PHP 部分代码包括了获取 access_token 和 jsapi_ticket 的操作，只需传入 appid 和 appsecret 即可，但要注意如果已有其他业务需要使用 access_token 的话，应修改获取 access_token 部分代码从全局缓存中获取，防止重复获取 access_token ，超过调用频率。

所以，基本小白的缘故，我下载了PHP版本的示例代码，点击下方即可下载：

PHP示例代码下载

解压获得以下文件：

小白视角：自定义微信分享时的图标、标题以及简介教程

其他文件不用管，我们只需要编辑sample.php即可。

小白视角：自定义微信分享时的图标、标题以及简介教程

将我们之前获得开发者ID和开发者密码填入上方，yourAppID填开发者ID，yourAppSecret填开发者密匙。

小白视角：自定义微信分享时的图标、标题以及简介教程

拖动到文章最后，这里有两个区域需要设置，分别是API列表和API内容。

腾讯官方已经提供了代码，链接在上文中提到，请自行返回查看。

小白视角：自定义微信分享时的图标、标题以及简介教程

将这两个代码填入API内容中，并在API列表中加入这两个内容，如下图

小白视角：自定义微信分享时的图标、标题以及简介教程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
jsApiList: [
        'updateAppMessageShareData' ,'updateTimelineShareData' // API列表
    ]
  });
  //API内容
wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({
title: '祥龙创客超级像素',
desc: '贵阳祥龙创客科技有限公司 由原“祥子作品”团队经过一年的筹备于2016年1月19日正式成立，公司致力于各行业720度全景展示和产品360展示服务、vr展示服务、微信公众平台、网站制作、航拍、视频制作等，致力于数字新媒体的研发与互联网深度传播',
link: 'http://720.gyxlck.com',
imgUrl: 'http://720.gyxlck.com/xianglong/weixin.jpg',
success: function () {
  // 设置成功
}
});  
});
    wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
    wx.updateTimelineShareData({
        title: '祥龙创客超级像素', // 分享标题
        link: 'http://720.gyxlck.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'http://720.gyxlck.com/xianglong/weixin.jpg', // 分享图标
        success: function () {
          // 设置成功
        }
});
});

 

解释一下，

1
link: 'http://720.gyxlck.com'

是你想让访客点击你分享内容后实际跳转的网址，并不是指的当前网址，但必须是域名白名单的域名。

腾讯官方给的代码最后好像还少一个结束，大家需要自行加上

1
});

按上面的说明操作之后，试试你的分享是否已经生效，生效之后可以转移到正式网址中。

四、正式使用

正式使用其实很简单，将sample.php的内容与静态html文件拼合即可，如果不会组合动静态文件也没关系，将

1
link: 'http://720.gyxlck.com'

修改成你实际想跳转到的网址即可，唯一有一点就是会影响二次分享，因为实际网址中文件里并没有设置分享，用户跳转到网址后再分享出来的内容，并没有自定义。

打包下载：点击下载

原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/5954

Like (4)
蓝洛水深的头像蓝洛水深管理员
0 4 Donate 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Previous 2018年10月23日 下午7:31
Next 2018年11月2日 下午11:17

相关推荐

发表回复

Please Login to Comment

Comments(4)

联系QQ
联系QQ
SHARE
TOP