在微信和QQ中自定义定制分享内容的标题与图片

在微信中分享内容时，默认情况下会使用网页的元信息（如<meta>标签中的og:title、og:image等）来填充分享对话框中的标题、描述以及图片。如果你希望自定义这些信息，可以通过设置页面的<meta>标签来实现。但是，如果你想在用户点击分享按钮时动态改变分享的信息（例如在H5页面中），则需要使用微信JS-SDK。

下面是如何使用微信JS-SDK来自定义分享内容的基本步骤：

1. 引入微信JS-SDK
   首先，你需要在你的HTML文件中引入微信的JS-SDK。

   <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
   

2. 配置权限验证接口
   在使用任何API之前，需要配置一个权限验证接口，这个接口通常位于你的服务器端，并且会返回用于签名的参数。

   wx.config({
       debug: false, // 开启调试模式,调用的所有api都会在console输出，若要查看传入的参数和api返回结果，请开启debug模式
       appId: 'your-appId', // 必填，公众号的唯一标识
       timestamp: Date.now(), // 必填，生成签名的时间戳
       nonceStr: 'your-nonceStr', // 必填，生成签名的随机串
       signature: 'your-signature', // 必填，签名
       jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
   });
   

3. 注册分享事件
   使用wx.ready方法来注册分享事件处理函数。

   wx.ready(function () {
       // 分享到朋友圈
       wx.onMenuShareTimeline({
           title: '你的自定义标题', // 分享标题
           link: '#', // 分享链接
           imgUrl: '#', // 分享图标
       });
   
       // 分享给朋友
       wx.onMenuShareAppMessage({
           title: '你的自定义标题', // 分享标题
           desc: '你的自定义描述', // 分享描述
           link: '#', // 分享链接
           imgUrl: '#', // 分享图标
           type: '', // 分享类型,music、video或link，不填默认为link
           dataUrl: '' // 如果type是music或video，则要提供数据链接，默认为空
       });
   });
   

请确保在实际环境中替换示例代码中的your-appId、your-nonceStr、your-signature等值为你自己的应用信息，并且服务器端能够正确生成所需的签名参数。

以上步骤完成后，当用户在微信中打开你的H5页面并选择分享时，将会按照你在代码中设定的信息进行分享。注意，微信JS-SDK的功能依赖于微信客户端的支持，并且只能在微信内置浏览器中使用。