·设为首页收藏本站📧邮箱修改🎁免费下载专区📒收藏夹👽聊天室📱AI智能体
🔄最新发布📃文档资料库🆔加群看共享绿色软件切换到窄版
立即注册
DZ插件网»🏠首页 › Discuz!交流与探讨 › Discuz!运营教程 › 微信分享自定义标题、图片、链接的最新html代码 ...
返回列表 发布新帖

微信分享自定义标题、图片、链接的最新html代码

855 2
发表于 2021-2-14 11:42:50 | 查看全部 阅读模式

马上注册，免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
使用本文教程，必须满足几个条件：
1、项目域名必须备案（想要使用微信的接口都必须要域名是备案的）
2、认证过的公众号   
3、能运行PHP文件的环境

满足上面几个条件的话，请接着往下看：
教程

第一步
下载相关代码文件   网页调用微信js-sdk分享接口(1.4.0)  

第二步
将上步下载的accessToken文件夹上传网站目录中（路径自定义）

第三步
登录微信公众号平台（需要有认证的公众号）
1、设置-公众号设置-功能设置-JS接口安全域名（域名需要备案的）
2、开发-基本设置-IP白名单（添加IP白名单后才能调用接口）

第四步
进入accessToken文件夹，打开signPackage.php，将微信公众号的AppID、AppSecret填入对应的位置
示例代码：
  1. <?php// 实现微信分享功能// 通过script标签引入该文件，通过url参数传递原网页的完整urlerror_reporting(0);$queryString = $_SERVER["QUERY_STRING"];// 获取PHP后的网址参数，格式为：originUrl=...$url = substr($queryString,10);// 截取原网页的完整urlrequire_once "jssdk.php";$jssdk = new JSSDK("AppID", "AppSecret", $url);// 改为自己公众号的AppID、AppSecret$signPackage = $jssdk->GetSignPackage();echo "var signPackage="; die(json_encode($signPackage));// 返回微信分享所需参数 ?>
复制代码
第五步
在需要调用微信自定义分享接口的html页面添加如下代码
  1. <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script>document.write("<script src='accessToken/signPackage.php?originUrl=" + window.location.href + "' type='text/javascript'><\/script>");</script><script>    var baseUrl = "https://www.uw7.cn/";    var wxData = {      "imgUrl" : baseUrl + 'logo.png',//分享缩略图      "link"   : baseUrl + 'welcome.html',//分享的链接      "title"  : '接单：网站，公众号，小程序等业务',//分享朋友标题      "title2"  : 'QQ：4175455',//分享朋友圈标题      "desc"   : '价格美丽'//分享朋友的文案    };    wx.config({    debug: false,    appId: signPackage.appId,    timestamp: parseInt(signPackage.timestamp),    nonceStr: signPackage.nonceStr,    signature: signPackage.signature,    jsApiList: [    'updateAppMessageShareData',        'updateTimelineShareData'    ]    });    wx.ready(function () {    wx.updateTimelineShareData({    title: wxData.title2,    link: wxData.link,    imgUrl: wxData.imgUrl,    success: function () {    }    });    wx.updateAppMessageShareData({    title: wxData.title,    desc: wxData.desc,    link: wxData.link,    imgUrl: wxData.imgUrl,    type: 'link',    dataUrl: '',    success: function () {    }    });    });</script>
复制代码
微信, 分享, 自定义, 定义, 标题
我要说一句 收起回复
赞赏
一花一世界，一叶一追寻。一曲一场叹，一生为一人。
回复

使用道具 举报

相关帖子

评论2

Discuz智能体Lv.8 发表于 2025-3-18 06:01:55 | 查看全部
要实现微信分享自定义标题、图片、链接的功能，您需要按照以下步骤进行操作。以下是详细的步骤和代码示例：

### 第一步：下载相关代码文件
您需要下载包含微信JS-SDK的代码文件，通常这些文件会包含一个`accessToken`文件夹，里面有一些PHP文件用于生成签名和获取access token。

### 第二步：上传文件到网站目录
将下载的`accessToken`文件夹上传到您的网站目录中，路径可以自定义，但需要确保PHP文件能够被正确访问。

### 第三步：配置微信公众号平台
1. **设置JS接口安全域名**：
   - 登录微信公众号平台，进入“设置” -> “公众号设置” -> “功能设置” -> “JS接口安全域名”。
   - 添加您已备案的域名。

2. **添加IP白名单**：
   - 进入“开发” -> “基本设置” -> “IP白名单”。
   - 添加您的服务器IP地址，以确保能够调用微信接口。

### 第四步：配置`signPackage.php`
进入`accessToken`文件夹，打开`signPackage.php`文件，将您的微信公众号的`AppID`和`AppSecret`填入对应的位置。

  1. <?php
  2. require_once "jssdk.php";
  3. $jssdk = new JSSDK("yourAppID", "yourAppSecret");
  4. $signPackage = $jssdk->GetSignPackage();
  5. ?>
复制代码


### 第五步：在HTML页面中添加微信分享代码
在您需要调用微信自定义分享接口的HTML页面中添加以下代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>微信分享示例</title>
  6.     <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  7.     <script>
  8.         document.write("");
  9.         var baseUrl = "https://www.uw7.cn/";
  10.         var wxData = {
  11.             "imgUrl": baseUrl + 'logo.png', // 分享缩略图
  12.             "link": baseUrl + 'welcome.html', // 分享的链接
  13.             "title": '接单：网站，公众号，小程序等业务', // 分享朋友标题
  14.             "title2": 'QQ：4175455', // 分享朋友圈标题
  15.             "desc": '价格美丽' // 分享朋友的文案
  16.         };

  18.         wx.config({
  19.             debug: false,
  20.             appId: '<?php echo $signPackage["appId"]; ?>',
  21.             timestamp: <?php echo $signPackage["timestamp"]; ?>,
  22.             nonceStr: '<?php echo $signPackage["nonceStr"]; ?>',
  23.             signature: '<?php echo $signPackage["signature"]; ?>',
  24.             jsApiList: [
  25.                 'updateAppMessageShareData',
  26.                 'updateTimelineShareData'
  27.             ]
  28.         });

  30.         wx.ready(function () {
  31.             wx.updateTimelineShareData({
  32.                 title: wxData.title2,
  33.                 link: wxData.link,
  34.                 imgUrl: wxData.imgUrl,
  35.                 success: function () {
  36.                     // 分享成功后的回调
  37.                 }
  38.             });

  40.             wx.updateAppMessageShareData({
  41.                 title: wxData.title,
  42.                 desc: wxData.desc,
  43.                 link: wxData.link,
  44.                 imgUrl: wxData.imgUrl,
  45.                 success: function () {
  46.                     // 分享成功后的回调
  47.                 }
  48.             });
  49.         });
  50.     </script>
  51. </head>
  52. <body>
  53.     <h1>微信分享示例页面</h1>
  54. </body>
  55. </html>
复制代码


### 注意事项
1. **域名备案**：确保您的域名已经备案，否则无法使用微信的JS-SDK接口。
2. **公众号认证**：您需要有一个认证过的公众号，才能使用这些高级接口。
3. **PHP环境**：确保您的服务器支持PHP，并且能够正确运行PHP文件。

### 常见问题
- **签名错误**：如果遇到签名错误，请检查`signPackage.php`中的`AppID`和`AppSecret`是否正确，以及服务器时间是否与微信服务器时间同步。
- **分享不生效**：确保您在微信客户端中打开页面，并且已经正确配置了JS接口安全域名。

通过以上步骤，您应该能够成功实现微信分享自定义标题、图片、链接的功能。如果有任何问题，欢迎随时咨询。
-- 本回答由 人工智能 AI智能体 生成，内容仅供参考，请仔细甄别。
我要说一句 收起回复
回复 支持 反对

使用道具 举报

Discuz智能体Lv.8 发表于 2025-3-20 03:28:27 | 查看全部
要实现微信分享自定义标题、图片、链接的功能，您需要按照以下步骤进行操作。以下是详细的步骤和代码示例：

### 第一步：下载相关代码文件
您需要下载包含微信JS-SDK的代码文件，通常这些文件会包含一个`accessToken`文件夹，里面有一些PHP文件用于生成签名。

### 第二步：上传文件到服务器
将下载的`accessToken`文件夹上传到您的网站目录中，路径可以自定义，但需要确保PHP文件能够被访问。

### 第三步：配置微信公众号
1. **设置JS接口安全域名**：
   - 登录微信公众号平台，进入“设置” -> “公众号设置” -> “功能设置” -> “JS接口安全域名”。
   - 添加您网站的备案域名。

2. **设置IP白名单**：
   - 进入“开发” -> “基本设置” -> “IP白名单”。
   - 添加您服务器的IP地址，以便能够调用微信接口。

### 第四步：配置`signPackage.php`
进入`accessToken`文件夹，打开`signPackage.php`文件，将您的微信公众号的`AppID`和`AppSecret`填入对应的位置。

  1. <?php
  2. require_once "jssdk.php";
  3. $jssdk = new JSSDK("yourAppID", "yourAppSecret");
  4. $signPackage = $jssdk->GetSignPackage();
  5. ?>
复制代码


### 第五步：在HTML页面中添加微信分享代码
在您需要调用微信自定义分享接口的HTML页面中添加以下代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>微信分享示例</title>
  6.     <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  7.     <script src="path/to/your/signPackage.php"></script>
  8.     <script>
  9.         document.write("");
  10.         var baseUrl = "https://www.uw7.cn/";
  11.         var wxData = {
  12.             "imgUrl": baseUrl + 'logo.png', // 分享缩略图
  13.             "link": baseUrl + 'welcome.html', // 分享的链接
  14.             "title": '接单：网站，公众号，小程序等业务', // 分享朋友标题
  15.             "title2": 'QQ：4175455', // 分享朋友圈标题
  16.             "desc": '价格美丽' // 分享朋友的文案
  17.         };

  19.         wx.config({
  20.             debug: false,
  21.             appId: signPackage.appId,
  22.             timestamp: parseInt(signPackage.timestamp),
  23.             nonceStr: signPackage.nonceStr,
  24.             signature: signPackage.signature,
  25.             jsApiList: [
  26.                 'updateAppMessageShareData',
  27.                 'updateTimelineShareData'
  28.             ]
  29.         });

  31.         wx.ready(function () {
  32.             wx.updateTimelineShareData({
  33.                 title: wxData.title2,
  34.                 link: wxData.link,
  35.                 imgUrl: wxData.imgUrl,
  36.                 success: function () {
  37.                     // 分享成功后的回调
  38.                 }
  39.             });

  41.             wx.updateAppMessageShareData({
  42.                 title: wxData.title,
  43.                 desc: wxData.desc,
  44.                 link: wxData.link,
  45.                 imgUrl: wxData.imgUrl,
  46.                 type: 'link',
  47.                 dataUrl: '',
  48.                 success: function () {
  49.                     // 分享成功后的回调
  50.                 }
  51.             });
  52.         });
  53.     </script>
  54. </head>
  55. <body>
  56.     <h1>微信分享示例页面</h1>
  57. </body>
  58. </html>
复制代码


### 代码说明：
1. **`wx.config`**：配置微信JS-SDK，传入从`signPackage.php`获取的`appId`、`timestamp`、`nonceStr`和`signature`。
2. **`wx.ready`**：在微信JS-SDK初始化完成后，调用`updateTimelineShareData`和`updateAppMessageShareData`来设置分享到朋友圈和分享给朋友的内容。

### 注意事项：
- 确保您的域名已经备案，并且已经在微信公众号平台中设置了JS接口安全域名。
- 确保您的服务器IP已经添加到微信公众号平台的IP白名单中。
- 确保`signPackage.php`文件中的`AppID`和`AppSecret`填写正确。

通过以上步骤，您就可以在您的网站中实现微信分享自定义标题、图片、链接的功能了。如果有任何问题，欢迎随时咨询。
-- 本回答由 人工智能 AI智能体 生成，内容仅供参考，请仔细甄别。
我要说一句 收起回复
回复 支持 反对

使用道具 举报

返回列表 发布新帖

回复
 懒得打字嘛，点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

图文热点
关闭

站长推荐上一条 /1 下一条

AI智能体

关于我们

关于我们 免责声明 应用市场 下载中心

服务支持

有问必答 优秀站点 常见问题 建站必看
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载，复制和建立镜像，
如有违反，按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:3.137.202.126,GMT+8, 2025-4-1 04:21 , Processed in 0.835695 second(s), 77 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2025 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
 QQ客服返回顶部
快速回复 返回顶部 返回列表