uniapp H5端设置分享卡片

注意

如果你已经写好配置后分享还是链接形式有可能是因为进入网页的方式不对。

新版的微信通过以下方式进入才能分享成卡片形式。

1. 从微信公众号打开网页
2. 扫码进入网页
3. 收藏网页链接后从“我的收藏”进入

网页成功分享的效果如下

配置公众号

1.1申请开发账号

微信公众平台

1.2设置安全域名

1.3正式开发

在正式账号可以在 设置与开发 > 公众号设置 > 功能设置 > js接口安全域名中设置域名

在 设置与开发 > 基本配置 获取appid和secret

配置服务器

2.1生成签名（后面会用到）

1. 生成签名逻辑，通过appid和secret获取access_token，保存到access_token服务器, access_token有两小时的有效期, 为防止触发微信的获取次数限制最好在服务器缓存access_token。

2. 通过access_token获取jsapi_ticket, jsapi_ticket也保存到服务，和access_token一样有效期为两小时，且有获取次数限制。

3. 通过签名算法生成签名，并返回给前端。在jsSDK附录1中有签名算法的完整流程

后端php生成签名代码

注意

1. 将下列代码保存到网站域名服务器下，微信浏览器不支持跨域名请求。

<?php
  $appid = 'xxxx'; // 替换为你的小程序AppID
  $secret = 'xxxxxxxxxxxxxx'; // 替换为你的小程序AppSecret
  
  $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$secret";
  
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($ch, CURLOPT_HEADER, 0);
  
  $output = curl_exec($ch);
  curl_close($ch);
  
  $data = json_decode($output, true);
  
  // 获取access_token
  $access_token = $data['access_token'];
  
  // 发起get请求 获取jsapi_ticket
  $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$access_token&type=jsapi";
  
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  curl_setopt($ch, CURLOPT_HEADER, 0);
  
  $output = curl_exec($ch);
  curl_close($ch);
  
  $data = json_decode($output, true);
  
  // 获取jsapi_ticket
  $jsapi_ticket = $data['ticket'];
  
  // 获取url参数noncestr，timestamp，link
  $noncestr = $_GET['noncestr'];
  $timestamp = $_GET['timestamp'];
  $link = $_GET['link'];
  
  // 获取签名
  $string1 = "jsapi_ticket=$jsapi_ticket&noncestr=$noncestr&timestamp=$timestamp&url=$link";
  echo sha1($string1);

前端代码

1.接入js文件

// 以下代码等同于<script src="xxxx" onload="xxxx" />
const script = document.createElement('script')
script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js'
script.onload = setShare.bind(this)
document.head.appendChild(script)

2.配置分享信息

async function setShare (){
    let config = {
        timestamp: parseInt(Date.now() / 1000),
        noncestr: "xxxxxxxxx",// 生成签名的随机串替换成你的的随机串（随便写）
        link: window.location.href //"https://bzdhapi.hlwwg.com/"
    }
    // 获取签名 请求刚刚保存的服务器的php文件
    let signature = await this.getSignature(config);
    
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: this.wx_appid, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.noncestr, // 必填，生成签名的随机串
        signature: signature,// 必填，签名
        jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData'
        ] // 必填，需要使用的JS接口列表
    });
    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
        const shareConfig = { 
            title: document.title, // 分享标题
            desc: '分享描述', // 分享描述
            link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'https://www.xxxxx.com/static/logo.png', // 分享图标(不能使用相对地址)
            success: function (res) {
                console.log("设置成功：", res);
            },
            fail: function(err){
                console.log("设置失败：", err);
            },
        }
        wx.updateAppMessageShareData(shareConfig)
        wx.updateTimelineShareData(shareConfig)
        wx.onMenuShareTimeline(shareConfig)
        wx.onMenuShareAppMessage(shareConfig)
    });
    wx.error(function(res){
        console.log("接口处理失败");
    });
}

3.请求接口（后端php文件）获取签名

// 获取签名
getSignature({timestamp,noncestr,link}){
    return new Promise((resolve, reject)=>{
        uni.request({
            // url: "https://www.xxxxx.com/getJsapiTicket.php",
            url: "/getJsapiTicket.php",// 最好是与网站相同域名，微信浏览器不支持跨域名请求
            data: {
                timestamp,
                noncestr,
                link
            },
            success(res) {
                resolve(res.data.signature)
            },
            fail(err) {
                // alert(JSON.stringify(['获取签名失败',err]))
            }
        })
    })
}