Update 2024-10-10-微信h5卡片链接分享开发.md

Author: MisterChangRay

_posts/2024-10-10-微信h5卡片链接分享开发.md

@@ -22,39 +22,56 @@ tags:
 
 
 #### 3. 开发流程
-1. 公众号获取appid,secrtKey, 并且配置Ip白名单
+1. 公众号获取appid,AppSecret, 并且配置Ip白名单。`设置与开发-基本配置`
 2. h5中引入微信的jssdk
-3. 开发后端签名代码, 参考下文
-4. h5端注册响应事件，参考下文
+3. 公众号配置js安全域名`设置与开发-公众号设置-功能设置-JS接口安全域名`
+4. 开发后端签名代码, 参考下文
+5. h5端注册响应事件，参考下文
 
 上述流程后在微信打开链接,点击分享给朋友，分享出去就是卡片形式啦。其实还是很简单的。
 
+以下代码复制后即可使用。
+
 h5端示例代码:
 ```js
 // js 这里需要每次请求后端生成分享的签名参数信息
-   fetch(`/api/wxshareinfo?q=${encodeURIComponent(location.href)}`, function (res) {
+   
+    fetch(`/api/wxshareinfo?q=${encodeURIComponent(location.href)}`).then(res => res.json()).then(res => {
+
         wx.config({
-            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
-            appId: 'wx762222228', // 必填，公众号的唯一标识
+            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
+            appId: 'xxxxxx', // 必填，公众号的唯一标识
             timestamp: res.timestamp, // 必填，生成签名的时间戳
             nonceStr: res.nonceStr, // 必填，生成签名的随机串
-            signature: res.signature,// 必填，签名
-            jsApiList: ['updateAppMessageShareData'] // 必填，需要使用的JS接口列表
+            signature: res.signature ,// 必填，签名
+            jsApiList: [
+                'updateAppMessageShareData',
+                'updateTimelineShareData'
+            ]
+        });
+
+        // 通过error接口处理失败验证
+        wx.error(function (errres) {
+            console.info("失败：", errres);
         });
 
         wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
-            wx.updateAppMessageShareData({
-                title: '大家快来看啊', // 分享标题
-                desc: 'hahahahaha', // 分享描述
-                link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
-                imgUrl: '', // 分享图标
+            var sharedata = {
+                title: 'hello', // 分享标题
+                desc: `hello!`, // 分享描述
+                link: res.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+                imgUrl: location.protocol + "//" + location.host+ "/logo.png", // 分享图标链接,png格式
                 success: function () {
                     // 设置成功
-                    alert("分享成功")
                 }
-            })
+            }
+
+            wx.updateAppMessageShareData(sharedata);
+            wx.updateTimelineShareData(sharedata);
+
+
         });
-    })
+    });
 
 ```
 
@@ -77,7 +94,8 @@ h5端示例代码:
 ```
 
 
-工具类代码，这里需要啰嗦一句，里面的access_token，和 jsticket这两个需要做缓存的，官方7200秒失效，我这里缓存了7000秒。
+工具类代码，这里需要啰嗦一句:
+里面的access_token，和 jsticket这两个需要做缓存的，官方7200秒失效，我这里缓存了7000秒。
 ```java
 package com.springboot.demo.zhifu;
 
@@ -98,8 +116,8 @@ import java.util.*;
 import java.util.concurrent.TimeUnit;
 
 public class jsapi_ticketGetUtil {
-    public static final String APPID = "wx7222208";
-    public static final String APPSecret = "3df82123123122222b66f";
+    public static final String APPID = "xxxx";
+    public static final String APPSecret = "xxxxxxxxx";
     private  static Logger logger = LoggerFactory.getLogger(jsapi_ticketGetUtil.class);
 
     public static final Cache<String, String> cache = CacheBuilder
@@ -159,7 +177,7 @@ public class jsapi_ticketGetUtil {
         //注意这里参数名必须全部小写，且必须有序
         string1 = "jsapi_ticket=" + jsapi_ticket +
                 "&noncestr=" + nonce_str +
-                "×tamp=" + timestamp +
+                "&timestamp=" + timestamp +
                 "&url=" + url;
         System.out.println(string1);
 
@@ -254,3 +272,13 @@ public class jsapi_ticketGetUtil {
     }
 }
 ```
+
+
+#### 4. 常见问题
+1. debug模式打开后, 页面打开没有任何提示。 这里检查下jssdk是否正确引入。config代码是否执行
+2. ` wx.ready` 方法不执行。这里重点检查下config方法是否执行
+3. 弹出提示签名错误，这里主要检查appid，和secrekey是否正确。可以使用 [官方签名工具](https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign)来验证签名是否正确
+4. 所有配置都正确但是提示授权失败，这里需要检查公众号性质。个人注册的公众号没有也无法获取分享功能接口使用的。在设置开发-接口权限那里可以看到
+5. 链接发送出去后是链接形式，不是卡片形式。这是由于微信要求链接只能通过公众号菜单分享，或者将链接生成二维码，用户扫码后再分享，这两种情况下分享出去才是卡片。
+   
+