微信公众号实现带图卡片分享链接

article/2025/9/22 0:02:38

 环境:PHP TP5框架

后端代码:

    /*** 使用json给前端返回必要的微信JS-SDK数据* @return \think\response\Json*/public function get_js_api_data(){//获取微信accesstoken 此处不做赘述$AccessToken = WechatService::getAccessToken();//生成一个随机字符串 传给前端用$nonceStr = substr(md5(time()), '0', '16');//生成一个时间戳 传给前端用$timestamp = time();//自己公众号的appid$appid = 'wx694*******a2b';//从前端接收到的调用接口页面的完整URL$verify_url = urldecode(input('url'));//获取js_ticket 此处不做赘述$js_ticket = $this->get_js_ticket($AccessToken);//拼接字符串加密$s_str = "jsapi_ticket=" . $js_ticket . "&noncestr=" . $nonceStr . "&timestamp=" . $timestamp . "&url=" . $verify_url;//直接使用sh1加密$signature = sha1($s_str);//打包成json数组$ret_arr = ['appId' => $appid,'nonceStr' => $nonceStr,'signature' => $signature,'timestamp' => $timestamp,'share_url' => 'http://*******.*********/index/index/index',];return json($ret_arr);}

前端代码:

头部引入微信的js包

    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>$(function () {//对当前页面的url进行编码var Url = encodeURIComponent(location.href.split('#')[0]);//这几个参数都是后台从微信公众平台获取到的var nonceStr, signature, timestamp, appId, shareUrl;$.ajax({//后台获取参数接口url: "http://*******.*********/index/share_test/get_js_api_data",type: 'POST',//将当前页面的url传到后台data: {url: Url,},success: function (data) {//得到参数var appId = data.appId;var nonceStr = data.nonceStr;var signature = data.signature;var timestamp = data.timestamp;var shareUrl = data.share_url;//通过微信config接口注入配置wx.config({debug: true, // 默认为false  为true的时候是调试模式,会打印出日志appId: appId,timestamp: timestamp,nonceStr: nonceStr,signature: signature,jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo']});//配置自定义分享内容window.share_config = {'share': {'imgUrl': 'http://*******.*********/h5/static/1637812.759501/img/LicensePlateQuery1.8bb7f30a.png', // 这里是需要展示的图标'desc': '120秒,48项天赋解析,90分钟专家咨询解读,深度剖析您的天赋人生。成为测测科技合伙人,尊享至多11项专属超值礼遇。', // 这是分享展示的摘要'title': '90%的人都认可测测科技天赋智能测评|合伙人现正招募中', // 这是分享展示卡片的标题'link': shareUrl, // 这里是分享的网址'success': function (rr) {//console.log('成功' + JSON.stringify(rr))},'cancel': function (tt) {//console.log('失败' + JSON.stringify(tt));}}};wx.ready(function () {wx.onMenuShareAppMessage(share_config.share); // 微信好友wx.onMenuShareTimeline(share_config.share); // 微信朋友圈wx.onMenuShareQQ(share_config.share); // QQ});},error: function (err) {},});})
</script>

完成


http://chatgpt.dhexx.cn/article/V1lJUrwn.shtml

相关文章

微信公众号网页分享设置及问题

准备工作 1.微信公众号、获取appId、secret&#xff1b; 2.在公众号后台填写JS接口安全域名和IP白名单&#xff1b; 后台工作 请求微信接口并给前端返回noncestr&#xff08;生成签名的随机串&#xff09;、timestamp&#xff08;生成签名的时间戳&#xff09;、signature&a…

微信公众号分享签名sign获取

微信 JS 接口签名校验工具 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?tjsapisign 后台代码&#xff1a; /*** 分享的参数* author LHB* since JDK 1.8*/ResponseBodyRequestMapping(value "/getShareParam")public ResultOutDto getShareParam(HttpServl…

php微信转发无法显示标题图片,解决微信公众号分享朋友圈不显示标题图片描述的方法...

我在微信开发者工具调试都是正确&#xff0c;为什么在真机进行测试&#xff0c;就不会显示分享标题图片描述语呢。 检查分享相关微信接口也是正确&#xff0c;代码如下&#xff1a; wx.ready(function () { wx.onMenuShareTimeline({ title: ".$c_title.", desc:&q…

微信公众号分享外部链接踩到的坑,具体说一说

公众号中嵌入h5html链接&#xff0c;分享自定义小卡片踩坑指南~~ 对接成功后&#xff0c;wx.onMenuShareAppMessage,onMenuShareTimeline方法调用时&#xff0c;自定义的标题、描述内容、link是在调用wx.config的时候就生成了&#xff0c;不是在点击分享时才生成的&#xff0c;…

微信分享次数统计、微信公众号分享关注统计

作为系列文章的第五篇&#xff0c;本文重点探讨数据采集层中的微信分享追踪系统。微信分享&#xff0c;早已成为移动互联网运营的主要方向之一&#xff0c;以Web H5页面&#xff08;下面称之为微信海报&#xff09;为载体&#xff0c;利用微信庞大的好友关系进行传播&#xff0…

微信公众号分享配置无效。。分享出来的只是纯链接了,如何自定义微信公众号的分享

微信公众号分享配置无效。。分享出来的只是纯链接了 挺久没接微信公众号的项目开发了&#xff0c;最近突然接了一个&#xff0c;结果微信自定义分享给我整懵了。原本配置的好好的&#xff0c;屡试不爽的代码&#xff0c;居然死活不生效&#xff0c;开启debug&#xff0c;开发者…

android开发中微信公众号功能,微信公众号分享与收藏开发文档(Android应用)

微信分享及收藏是指第三方App通过接入该功能&#xff0c;让用户可以从App分享文字、图片、音乐、视频、网页至微信好友会话、朋友圈或添加到微信收藏。 微信分享及收藏功能已向全体开发者开放&#xff0c;开发者在微信开放平台帐号下申请App并通过审核后&#xff0c;即可获得微…

微信公众号自定义分享

效果图&#xff1a; 1、登录微信公众号&#xff08;需要已经认证过的公众号&#xff09; 进入“设置与开发”→“公众号设置”→“功能设置”→“JS接口安全域名”&#xff0c;将文件下载下来&#xff0c;上传至与将要分享的页面相同的域名服务器中&#xff0c;上传成功后再在下…

缓存和CPU和内存和磁盘的关系

在选购CPU总听人说缓存&#xff0c;一级缓存&#xff0c;二级缓存&#xff0c;三级缓存但是这个缓存到底是什么&#xff0c;有什么作用&#xff0c;他与内存到底有什么关系&#xff0c;我们今天就来探讨一下&#xff0c;我主要目的是学习&#xff0c;写文章也是让学习更深入&am…

Hadoop性能调优、YARN的内存和CPU配置

转&#xff1a; https://blog.csdn.net/dehu_zhou/article/details/52808752 https://blog.csdn.net/dxl342/article/details/52840455 Hadoop为用户作业提供了多种可配置的参数&#xff0c;以允许用户根据作业特点调整这些参数值使作业运行效率达到最优。 一 应用程序编写…

你还不懂硬盘,内存和CPU的关系 ?(程序员入门)

你好我是辰兮&#xff0c;很高兴你能来阅读&#xff0c;本篇文章小结了硬盘&#xff0c;内存和CPU的关系&#xff0c;献给初学者&#xff0c;分享获取新知&#xff0c;大家共同进步。 文章目录 一、硬盘内存CPU图二、硬盘讲解三、内存的简介四、拓展A盘和B盘 一、硬盘内存CPU图…

CPU 与 内存之间的三级缓存的实现原理

一&#xff0e; CPU 与 Memory 内存之间的三级缓存的实现原理 1.1 cache 存在的原理 引入 Cache 的理论基础是程序局部性原理&#xff0c;包括时间局部性和空间局部性。时间局部性原理即最近被CPU访问的数据&#xff0c;短期内CPU 还要访问&#xff08;时间&#xff09;&#…

一、CPU、内存、硬盘之间的关系

本人坚持更新C语言和数据结构知识&#xff0c;可以收藏&#xff0b;关注随时了解&#x1f61c;&#x1f61c;&#x1f61c; 目录 三者关系 其实内存在这里起了两个作用&#xff1a; 总结 三者关系 当我们在计算机上执行一个程序时&#xff0c;首先由输入设备向CPU发出操作指…

计算机内存怎么与频率匹配,怎么算cpu与内存频率匹配

2018-03-02 在286、386和早期的486电脑里&#xff0c;CPU的速度不是太高&#xff0c;和内存保持一样的速度。后来随着CPU速度的飞速提升&#xff0c;内存由于电气结构关系&#xff0c;无法象CPU那样提升很高的速度(就算现在内存达到400、533&#xff0c;但跟CPU的几个G的速度相…

CPU/内存/缓存

1、CPU 和各级缓存、内存、硬盘之间的关系 为什么会出现多级缓存呢&#xff1f; 说的简单一点因为 CPU 的频率太快了&#xff0c;而若是没有缓存&#xff0c;直接读取内存中的数据又太慢了&#xff0c;我们不想让 CPU 停下来等待&#xff0c;所以加入了一层读取速度大于内存但…

【高频内存与主板内存频率和CPU内存频率之间的关系】

很多小白经常问我说我的CPU标着内存频率支持2400啊&#xff0c;那我买3200是不是浪费了&#xff0c;还有的说我主板内存最高支持4000啊&#xff0c;那我是不是要买4000的内存啊。总之小白们都不清楚高频内存的频率到底是由谁决定的&#xff0c;又由谁限制&#xff0c;高频的性能…

汇编:CPU与内存的读写关系

要想学好汇编语言&#xff0c;首先要对CPU等硬件结构有一定的了解。 软件\程序的执行过程&#xff1a; 最为关键的是需要了解CPU和内存 在学习汇编语言过程中&#xff0c;遇到的绝大部分指令都是跟内存、CPU有关的 文章目录 1、CPU总线2、CPU内存3、8086CPU的寻址方式4、CPU内…

显卡内存和计算机内存,显存和内存的关系和区别

显存和内存是什么关系?显存和内存有什么区别?接下来我们来讨论一下。通常说到显存和内存的时候,还会说一下缓存、存储,我们一起介绍一下。 1、显存 即显卡内存,也叫帧缓存,是用来存储显卡芯片处理过或者即将提取的渲染数据。直白点就是存储图形信息的东东。 像我们平时在…

Linux查看CPU和内存使用情况

top命令 top命令是Linux下常用的性能分析工具&#xff0c;能够实时显示系统中各个进程的资源占用状况&#xff0c;类似于Windows的任务管理器。 运行 top 命令后&#xff0c;CPU 使用状态会以全屏的方式显示&#xff0c;并且会处在对话的模式 – 用基于 top 的命令&#xff0…

CPU、内存、硬盘和主板的关系

一、内存 内存的正式叫法是内存储器&#xff0c;以此来与外存储器区分开。物理上它安装在计算机内部&#xff0c;通常安装在主板上&#xff0c;所以称为内存。 一般情况下我们将8个元器件看做一个单位&#xff0c;即使表示很小的数&#xff0c; 例如 1&#xff0c;也需要8个&…