H5页面设置微信分享

article/2025/9/13 18:44:34

H5页面设置微信分享

写代码之前的准备工作
1、登录微信公众号（需要已经认证过的公众号），进入“设置与开发”→“公众号设置”→“功能设置”→“JS接口安全域名”，将文件下载下来，上传至与将要分享的页面相同的域名服务器中，上传成功后再在下面填写你的域名。在这里插入图片描述
2、在“设置与开发”→“基本配置”→“IP白名单”中配置你的IP地址，这里的IP地址是获取签名步骤时需要访问的IP地址。

3、在“设置与开发”→“基本配置”中拿到APPID及密钥（也就是开发者密码AppSecret），这里在获取签名时需要用到。
在这里插入图片描述
4、这时候可以开始获取签名了，在生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。

通过官方给出的信息，我们需要先获取access_token（有效期7200秒，2个小时开发者必须在自己的服务全局缓存access_token），access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。

/*  这部分其实大部分都是后台协助开发的，因为要服务器缓存前端可以了解下逻辑采用http GET方式请求https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的APPID&secret=你的AppSecret返回结果如下：
*/
{"access_token":"此处返回的是你的access_token","expires_in":7200}

5、通过access_token获取jsapi_ticket（有效期7200秒，2个小时，开发者必须在自己的服务全局缓存jsapi_ticket）

/*  这部分其实大部分都是后台协助开发的，因为要服务器缓存前端可以了解下逻辑采用http GET方式请求https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=你的access_token&type=jsapi返回结果如下：
*/
{"errcode":0,"errmsg":"ok","ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA","expires_in":7200
}

6、生成签名
参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）。

首先：对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

顺序依次为：jsapi_ticket，noncestr，timestamp，url。

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

然后：对string1进行sha1签名，得到signature。

signature=sha1(string1) // 0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意！！！
签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
签名用的url必须是调用JS接口页面的完整URL。
出于安全考虑，开发者必须在服务器端实现签名的逻辑。
拿到签名后就可以正式开始撸代码了~~

前端代码
通过后台给出的接口获取到签名的具体信息，然后开始配置分享相关内容

/*  在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）如果遇到某些不支持的情况，也可以降低版本使用
*/
<script tpye="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script tpye="text/javascript">// 如果使用$.ajax，需要先引入jquery$.ajax({type:"Get",url: `后台获取的接口URL + 你的本地url地址`, // 因为签名要根据页面URL来自动获取success: function(res){// 分享配置wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: res.data.appId, // 必填，公众号的唯一标识timestamp: res.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.nonceStr, // 必填，生成签名的随机串signature: res.data.signature,// 必填，签名jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表   我这里配置的是分享给好友、分享到朋友圈});// 在配置分享内容之前，还可以先检测一下jsApi是否可用wx.checkJsApi({jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,success: function(res) {// 以键值对的形式返回，可用的api值true，不可用为false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}}});wx.ready(function () {   //需在用户可能点击分享按钮前就先调用wx.updateAppMessageShareData({ title: '', // 分享标题desc: '', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '', // 分享图标success: function () {// 设置成功}})wx.updateTimelineShareData({ title: '', // 分享标题link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '', // 分享图标success: function () {// 设置成功}})});// 这里可以写也可以不写，主要是用来测试看看config信息有没有通过的wx.error(function(res){// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开			config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。});}})
</script>