微信分享自定義標題、圖片、鏈接的最新html代碼

火

31 主題	41 回帖	99 積分

漸入佳境

貢獻: 1 點
金幣: 17 個

發消息

樓主

發表于 2021-2-14 00:11:04 | 只看樓主 |倒序瀏覽 |閱讀模式

使用本文教程，必須滿足幾個條件：
1、項目域名必須備案（想要使用微信的接口都必須要域名是備案的）
2、認證過的公眾號
3、能運行PHP文件的環境

滿足上面幾個條件的話，請接著往下看：
教程

第一步
下載相關代碼文件網頁調用微信js-sdk分享接口(1.4.0)

游客，如果您要查看本帖隱藏內容請回復

第二步
將上步下載的accessToken文件夾上傳網站目錄中（路徑自定義）

第三步
登錄微信公眾號平臺（需要有認證的公眾號）
1、設置-公眾號設置-功能設置-JS接口安全域名（域名需要備案的）
2、開發-基本設置-IP白名單（添加IP白名單后才能調用接口）

第四步
進入accessToken文件夾，打開signPackage.php，將微信公眾號的AppID、AppSecret填入對應的位置
示例代碼：

<?php
// 實現微信分享功能
// 通過script標簽引入該文件，通過url參數傳遞原網頁的完整url
error_reporting(0);
$queryString = $_SERVER["QUERY_STRING"];// 獲取PHP后的網址參數，格式為：originUrl=...
$url = substr($queryString,10);// 截取原網頁的完整url
require_once "jssdk.php";
$jssdk = new JSSDK("AppID", "AppSecret", $url);// 改為自己公眾號的AppID、AppSecret
$signPackage = $jssdk->GetSignPackage();
echo "var signPackage=";
die(json_encode($signPackage));// 返回微信分享所需參數
?>

復制代碼

第五步
在需要調用微信自定義分享接口的html頁面添加如下代碼

<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>