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

环境: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>

完成

微信公众号实现带图卡片分享链接相关推荐

微信公众号扫描带参数二维码实现自动分组
学习交流: CSDN资源下载地址:https://download.csdn.net/download/naruto668/10624558 之前的几个老客户找到我最近要做一个微信公众号生成带参数海报 ...
微信公众号扫描带参数二维码实现自动分组？
2019独角兽企业重金招聘Python工程师标准>>> 最近很多人都在问微信公众号扫描带参数二维码实现自动分组,通过微号帮平台操作实现,这个功能不止如此,微信二维码来源统计分析.微信 ...
微信公众号留言功能实现方法分享
微信公众号留言功能实现方法分享公众号留言功能开通方法公众号留言功能在2018年年初被限制使用,2018年以后新注册的微信公众号都没有留言功能. 至此,新注册的公众号不仅没有留言功能,运营者无法跟用 ...
微信公众号的前端热门文章及链接（不定期更新）
2020/4/11 001.万字解析微前端.微前端框架qiankun以及源码作者:晒兜斯 https://segmentfault.com/a/1190000022275991 本文将针对微前端框架 ...
如何解决微信公众号开发转发接口，分享出去是链接不是卡片
微信公众号已配置完域名且已完成微信认证.appid也准确无误,转发接口也是没有任何问题,但是分享出去后是链接不是卡片原因因为这是微信开放全域名访问后出现的限制解决方案 1.将链接添加至公众号的自 ...
微信公众号发送小程序卡片_微信公众号里怎么添加小程序-如何在微信[[公众号]]添加小程序卡片-微信关联小程序...
参考官方Demo 1.进入公众号,选择「关联小程序」后,微信公众号运营者用手机扫码进行认证,并输入小程序的AppID即可. 2.腾讯地图+小程序appID:wx7643d5f831302ab0 3. ...
微信公众号服务器端脑图,微信公众号中隐藏的思维导图工具，帮你随时随地高效思考...
「有什么好用的思维导图工具推荐呢?」后台里收到了很多小伙伴类似的问题. 事实上,市面上的思维导图工具真的非常多.无论是老牌的 XMIND,还是在线版的百度脑图或者 ProcessOn 都可以帮你制作 ...
微信公众号发送小程序卡片_如何在公众号文章中添加小程序卡片
在公众号中添加小程序卡片可以给阅读者更好的文章阅读体验,腾讯地图+小程序可以在文章内容中提供位置卡片和路线规划卡片,适用于各类含有地点信息的文章推文. 绑定腾讯地图+小程序的方法如下: 第一步:公众号 ...
如何在微信 [[公众号]]添加小程序卡片
参考官方Demo 进入公众号,选择「关联小程序」后,微信公众号运营者用手机扫码进行认证,并输入小程序的 AppID 即可. 腾讯地图+小程序appID:wx7643d5f831302ab0 在这里,可 ...

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

微信公众号实现带图卡片分享链接相关推荐

最新文章

热门文章