微信公众号H5自定义卡片分享，H5自定义分享微信开发者工具可以，但是手机上不行

先解答一下为什么微信开发者工具可以，但是手机上不行。这里踩坑了很久。一直以为是代码的问题，反复调试。最后解决了。
原因：直接点击打开h5网站链接导致
解决：
1、把链接加入公众号的菜单，从公众号进入h5网站
2、将链接生成二维码，扫码进入网站等等
通过上面的两种方式进入网站后再去分享就正常了

h5自定义卡片分享

直接分享url链接是最简单的方式，但是直接分享链接可信度不高，现在人们看到url链接都有一定的防范意识，以为是诱导、诈骗等链接。可信度低，一般不会点开，所以我们需要自定义卡片分享的形式

我这里用的是uniapp，直接上代码

##### 前期准备：

第一步
1、申请一个服务号。并且必须是认证通过的服务号
2、填写ip白名单
3、将域名加入JS安全域名中（分享时分享的链接必须在JS安全域名中）

第二步
前端开发

1、安装weixin-js-sdk的依赖

npm install weixin-js-sdk --save

2、引入安装好的依赖

import wx from "weixin-js-sdk";

3、代码实现

    // 分享功能
    share() {
      // 获取当前页面的完整URL（去除hash部分）
      const currentUrl = window.location.href.split('#')[0];

        // 请求后端获取配置
      http.get('/Share/buildConfig', {url: currentUrl}).then((res) => {
        if (res.code == 0) {
          let wxSign = res.data;
          console.log('微信配置参数:', wxSign);

          wx.config({
            debug: true, // 调试模式，生产环境改为false
            appId: wxSign.appId,
            timestamp: wxSign.timestamp,
            nonceStr: wxSign.nonceStr,
            signature: wxSign.signature,
            jsApiList: [
              'updateAppMessageShareData',
              'updateTimelineShareData'
            ], // 添加更多接口以备后用
            openTagList: [] // 如果需要使用开放标签
          });

          // 在ready回调中设置分享
          wx.ready(() => {
            console.log('微信JS-SDK初始化成功');
            this.setShareData('我是标题', '我是描述', 'http://xxx.com/static/icon/logo.jpg');
          });

          wx.error((err) => {
            console.error('微信JS-SDK初始化失败:', err);
            // 可以在这里尝试重新获取签名
          });
        }
      }).catch(error => {
        console.error('获取签名失败:', error);
      });
    },

    // 设置分享参数
    setShareData(title, desc, imgUrl) {
      const currentUrl = location.href.split('#')[0];

      const shareData = {
        title: title,
        desc: desc,
        link: currentUrl, // 使用当前页面URL,域名必须在公众号安全域名中
        imgUrl: imgUrl, // 必须是完整URL
        success: () => {
          console.log('分享设置成功');
          // 可以在这里添加分享成功的数据统计
        },
        cancel: () => {
          console.log('用户取消分享');
        },
        fail: (err) => {
          console.error('分享设置失败:', err);
        }
      };

      try {
        // 新的API（推荐）
        wx.updateAppMessageShareData(shareData);
        wx.updateTimelineShareData(shareData);

        // 兼容旧API（备用）
        // wx.onMenuShareAppMessage(shareData);
        // wx.onMenuShareTimeline({
        //   title: title,
        //   link: currentUrl,
        //   imgUrl: imgUrl,
        //   success: shareData.success,
        //   cancel: shareData.cancel
        // });

        // wx.onMenuShareQQ(shareData);
        // wx.onMenuShareQZone(shareData);

      } catch (error) {
        console.error('设置分享失败:', error);
      }
    }

第三步
后端实现
我这里使用的是thinkphp 的 EasyWechat
安装EasyWechat，具体操作看文档：
https://easywechat.com/4.x/installation.html

 composer require overtrue/wechat:~4.0 -vvv

php接口

    // 获取分享配置
    public function buildConfig()
    {
        $url = $this->request->param("url");
        $arr = [
            'updateAppMessageShareData',
            'updateTimelineShareData'
        ];
        $data = (new Wechat())->buildConfig($arr, $url);
        return $this->success("成功", json_decode($data, true));
    }

<?php

namespace app\common\service;

use EasyWeChat\Factory;

class Wechat
{
     //客户端配置信息
    public $config = [
        'app_id'        => 'xxxxx', // 填写自己的公众号appid
        'secret'        => 'xxxxxxx',// 填写自己的公众号秘钥

        // 指定 API 调用返回结果的类型：array(default)/collection/object/raw/自定义类名
        'response_type' => 'array',

        //...
    ];

    public function buildConfig($APIs, $url){
        $app = Factory::officialAccount($this->config);
        $app->jssdk->setUrl($url);
        return $app->jssdk->buildConfig($APIs, $debug = false, $beta = false, $json = true);
    }

}

完成！