本文档介绍了如何在UniApp开发中实现将链接分享到微信好友，并确保在分享时显示标题和缩略图的方法。

背景
第一次用uniapp开发H5页面，发现分享给微信好友的链接，不显示标题和缩略图
步骤一：安装插件
首先，在项目根目录下的命令行中执行以下命令：

npm install weixin-js-sdk

这将在您的项目中添加weixin-js-sdk插件。

步骤二：配置AppID
在使用微信分享功能之前，您需要配置您的AppID，timestamp，nonceStr，signature

步骤三：编写分享代码
接下来，在您想要触发分享操作的页面或组件中，添加一个按钮或其他交互元素，并为其绑定一个点击事件。例如，在某个按钮的点击事件中，可以使用以下代码来触发分享操作：

import wx from 'weixin-js-sdk'import requestUtils from '@/http/request.js'import requsetApi from '@/api/home'
// 堆代码 duidaima.com
// 发起获取signature请求
function getSignature() {

    var url = window.location.origin + '/'requsetApi.signature({
        url
    }).then(res = >{
        if (res.code === 200) {
            setShare(res.data)
        }
    })
}
// 设置分享数据
function setShare(signature) {
    var url = window.location.origin + '/'requestUtils.uni_setStorageSync('signature', JSON.stringify(signature))

    wx.config({
        debug: false,
        // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        // 配置微信 JSSDK
        appId: signature.appId,
        // 必填，公众号的唯一标识
        timestamp: signature.timestamp,
        // 必填，生成签名的时间戳
        nonceStr: signature.nonceStr,
        // 必填，生成签名的随机串
        signature: signature.signature,
        // 必填，签名
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
    })

    wx.ready(function() {
        console.log('这是分享功能') wx.updateAppMessageShareData({
            imgUrl: 'https://xxx.com/static/ai.png',
            // 分享图标
            title: 'AI',
            // 分享标题
            link: url,
            // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            desc: '生活工作神器',
            // 分享描述
            success: function() {
                console.log('我来分享了')
            }
        }) wx.updateTimelineShareData({
            desc: '生活工作神器',
            // 分享描述
            title: 'AI',
            // 分享标题
            link: url,
            // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'https://xxx/static/ai.png',
            // 分享图标
            success: function() {
                console.log('我来分享了')
            }
        })
    }) wx.error((res) = >{
        console.log(res)
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        // getSignature()
    })
}

//分享
export
default
    function share() {

        const _signature = requestUtils.uni_getStorageSync('signature')
        // 先看看缓存里有没有
        if (_signature) {
            let signature = JSON.parse(_signature)
            // 获取当前时间戳
            var now = parseInt(new Date().getTime() / 1000) + ''
            // 计算两个时间戳之间的差值，单位为秒
            var diff = now - signature.expire_time

            // 判断差值是否大于2小时的秒数，即7200秒
            if (diff > 7200) {
                console.log('时间戳已经超过两小时。') getSignature()
            } else {
                console.log('时间戳未超过两小时。') setShare(signature)
            }
        } else {
            getSignature()
        }
    }

在上述代码中，我们触发分享操作。您可以根据需要自定义分享的标题、摘要、链接和缩略图等内容。

步骤四：测试分享功能
完成以上步骤后，您可以重新编译并运行您的UniApp项目，并在H5中测试分享功能。当您点击触发分享的按钮时，微信将会弹出分享界面，并显示您设置的标题和缩略图。

请确保您的微信公众平台已经配置了合适的权限和域名白名单，以便正常进行分享操作。

结论
通过按照本文档中的步骤，在UniApp开发中实现将链接分享到微信好友，并显示标题和缩略图是相对简单而有效的。