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

最近拍了一些亿级像素全景,因全景程序还没有做二开,所以是原生的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列表中加入这两个内容,如下图

    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 () {
          // 设置成功
        }
	});
	}); 

解释一下,

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

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

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

});

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

四、正式使用

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

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

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

打包下载:做好的文件下载

本文由 蓝洛水深 作者:蓝洛水深 发表,其版权均为 蓝洛水深 所有,文章内容系作者个人观点,不代表 蓝洛水深 对观点赞同或支持。如需转载,请注明文章来源。
2

发表评论