微信分享自定义图片

必要的前提准备

PS:本文的方法只适合6.0.2.58以及更高版本的微信客户端。旧版参考这个非官方的API
这几个是超越代码之上的存在,没有这几个认证,即使配置全正确也不能获得正常的分享卡片:

  1. 微信认证过的公共号

    必须是认证过的,未认证或者认证过期都不行

  2. 一个域名

    需要备案过的

  3. 一台服务器

    因为前端页面需要的appIdsignature是需要后台传递过来的。官方默认后台程序有PHPPythonNodeJava版本,不过我这里以PHP作为演示(后台其实不在本文的解释范围内,超纲了╮(╯▽╰)╭)

配置过程

1. 绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”(就是发布用的那个域名)

2. 获取access_token

这部分工作属于后台开发,主要功能是利用公共号APPIDAPPSECRET从微信服务器获取对应的access_token。由于这部分代码官方有demo,所以直接用官方的sample例子做演示。
下载官方示例代码后,根据自己的情况选择对应的后台语言(这里以PHP为例)。

分享信息配置失败的调试方法

有时候设置好之后发现分享出去只有标题和一张和设置不一样的图片,摘要变成了页面链接。这就说明配置失败了。对于没有正确配置的页面,微信默认抓取网页标题和页面内第一张分辨率大于300*300的图片做分享图,而摘要则是替换成页面链接——这种情况从用户的角度看来并不友好。所幸对于配置失败的页面,微信也给了调试接口,官方也有部分说明

  1. 打开wx.config里的debug
    debug设置为true之后,手机进入页面,会弹出错误信息(PC不管有没有配置正确都会在开发者工具中打印出对应的分享信息,参考意义不是很大——不过可以拿来查看链接是否有误)。
    如果正确的话,会提示{"errMsg":"config:ok"}
  2. 提示{"errMsg":"config:invalid url domain"}
    这个最常见,主要是域名没有被添加为js接口安全域名。官方的说明里是要域名和使用的APPID对应的公共号绑定,不过我实际使用中发现应该也可以分离。另外如果使用了端口号,则配置的绑定域名也要加上端口号(一个appid可以绑定三个有效域名)
  3. 提示{"errMsg":"config:invalid signature"}

    造成这个情况的可能性比较多。不过主要有以下三个原因:

    1. APPIDAPPSECRET填错了。
      可以到官方的调试页面获取access_token看看是否是正确的
    2. 超过了每日的access_token获取上限
      官方限定每日2k次请求。所以如果没有缓存access_token的话,还是比较容易过限的。
    3. 微信公共号状态不正常。
      比如验证过期了,被封禁了等等。
  4. 常用的接口调试链接以及说明文档:

    获取access_token
    https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token

    根据返回的结果可以判断页面内的APPIDAPPSECRET有没有出错

    获取jsapi_ticket
    https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

    利用前面拿到的access_token 采用http GET方式请求获得jsapi_ticket,如果出错的话会返回对应的说明。

    全局返回码说明
    http://mp.weixin.qq.com/wiki/17/fa4e1434e57290788bde25603fa2fcbd.html

    接口频率限制说明
    http://mp.weixin.qq.com/wiki/0/2e2239fa5f49388d5b5136ecc8e0e440.html



来自:http://chitanda.me/2015/06/19/wechat-share-diy/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 要将 HTML 变成微信自定义分享,你可以使用微信 JavaScript SDK。这是微信提供的一组 JavaScript 库,可以让你在 HTML 页面中调用微信分享功能。 下面是一个简单的示例,展示了如何使用微信 JavaScript SDK 实现自定义分享: ```html <!DOCTYPE html> <html> <head> <title>微信自定义分享</title> </head> <body> <!-- 引入微信 JavaScript SDK --> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> // 配置微信分享 wx.config({ // 填写你的微信公众号 appId 和 appSecret appId: 'your-app-id', appSecret: 'your-app-secret', // 配置需要使用的分享功能 jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] }); // 配置分享内容 wx.ready(function () { wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享图片的 URL', success: function () { // 用户分享成功时执行的回调函数 }, cancel: function () { // 用户取消分享时执行的回调函数 } }); wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享图片的 URL', type: 'link', dataUrl: '', success: function () { // 用户分享成功时执行的回调函数 }, cancel: function () { // 用户取消分享时执行的回调函数 } }); }); </script> ### 回答2: 要将HTML变成微信自定义分享,首先需要在HTML文件中添加微信的JavaScript SDK,以便与微信进行交互。具体步骤如下: 1. 在HTML文件中添加微信的JavaScript SDK。 可以将以下代码插入到`<head>`标签内: ``` <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 2. 注册微信分享的配置信息。 在页面加载完毕后,通过调用微信SDK的API,使用有效的AppID和AppSecret等信息进行微信分享的配置。示例如下: ``` wx.config({ debug: false, // 是否开启调试模式 appId: '你的AppID', timestamp: '生成配置信息的时间戳', nonceStr: '生成配置信息的随机字符串', signature: '生成的签名', jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 需要使用的微信分享API }); ``` 3. 设置分享的内容和回调函数。 在微信配置成功后,使用`wx.ready`函数设置分享的标题、描述、链接和分享图标等信息,并设置分享的回调函数。 - 分享到朋友圈: ``` wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享图标', success: function () { // 分享成功后的回调函数 }, cancel: function () { // 用户取消分享后的回调函数 } }); ``` - 分享给朋友: ``` wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享图标', success: function () { // 分享成功后的回调函数 }, cancel: function () { // 用户取消分享后的回调函数 } }); ``` 4. 最后,在HTML文件中触发微信SDK的加载: ``` <script> wx.ready(function() { // 分享的配置信息和回调函数 }); </script> ``` 通过以上步骤,可以将HTML文件中的内容转为微信自定义分享形式。在微信中打开页面时,会根据配置信息显示分享到朋友圈和分享给朋友的按钮。用户点击按钮后,即可进行分享操作,并触发对应的回调函数。 ### 回答3: 要将HTML变成微信自定义分享,你可以按照以下步骤进行操作。 1. 在HTML文件的头部添加如下代码,以引入微信开发者工具包: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 2. 在微信公众平台上注册并获取到你的公众号的AppID和AppSecret。 3. 在HTML文件的底部添加如下代码,用于微信分享的配置: ```html <script> wx.config({ appId: '你的AppID', timestamp: '生成签名的时间戳', nonceStr: '生成签名的随机字符串', signature: '签名', jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 需要使用的分享接口 }); wx.ready(function () { // 自定义分享的标题、描述、链接和图标 wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享图标', success: function () { // 用户确认分享后的回调函数 }, cancel: function () { // 用户取消分享后的回调函数 } }); wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享图标', success: function () { // 用户确认分享后的回调函数 }, cancel: function () { // 用户取消分享后的回调函数 } }); }); </script> ``` 4. 在`wx.config`代码块中,将`appId`替换为你的AppID,然后使用后端代码来生成其他几个参数(`timestamp`、`nonceStr`、`signature`)并填充进去。 5. 在`wx.onMenuShareAppMessage`和`wx.onMenuShareTimeline`代码块中,替换相应的分享标题、描述、链接和图标。 通过以上步骤,你可以将HTML变成微信自定义分享。当用户点击分享按钮时,自定义分享内容将在微信中显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值