php静态页面如何自定义分享朋友圈,静态页面H5页面如果调用微信JS-SDK进行自定义内容分享...

背景

最近在给朋友手机站做一个手机静态页面，朋友要求能在微信中自定义分享的内容，百度有各种相关文章，翻了很多页也没找到一个能详细阐述的文章，站长爬了微信官方技术文档，同时也爬了很多相关文章，结合后就有了如下的文章。

前提

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

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

教程

第一步

第二步

将上步下载的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页面添加如下代码

var baseUrl = "https://www.abc.com/";

var wxData = {

"imgUrl" : baseUrl + 'logo.png',//分享缩略图

"link"   : baseUrl + 'welcome.html',//分享的链接

"title"  : '接单：网站，公众号，小程序等业务',//分享朋友标题

"title2"  : 'QQ：345823660',//分享朋友圈标题

"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 () {

}

});

});

2020.9.19修正