每日技术总结：jquery datetimepicker,微博QQ好友QQ空间微信等分享接口
前言：
1.jquery datetimepicker
今天遇到一个日期控件格式的问题，默认选中显示的并不是设定的值，而是当天的日期。于是去查了一遍文档。
参考文章：jquery datetimepicker 配置参数
官方文档：DateTimePicker jQuery plugin select date and time （找了很久）
耗时2小时，翻了无数遍网页，最后亲自去看插件源码，突然灵光一现，发现只是input value的格式传错了，冤啊！！
Html代码如下：
<head> <{css src="jquery.datetimepicker.css" app="sysstat" }> <{script src="jquery.js" app="sysstat" }> <{script src="jquery.datetimepicker.js" app="sysstat" }> </head> <body> <input class="x-input cal datetimepicker" readonly="readonly" type="text" value="<{$time_start}>" id="time_from" name="time_from"> 至 <input class="x-input cal datetimepicker" type="text" value="<{$time_end}>" id="time_end" name="time_end"> </body>
js代码如下：
$('.datetimepicker').datetimepicker({
lang: "ch",
format: "Y-m-d"
});
效果如下：
问题：就是选中的那个值并不是input框里的值。
两个input value 是php渲染的数据，
<{$time_start}> 打印出来值是 2019/01/20
<{$time_end}> 打印出来值是 2019/01/20
这俩值格式跟format格式不匹配，format格式是
format: "Y-m-d"
解决：修改如下：
$('.datetimepicker').datetimepicker({
lang: "ch",
format: "Y/m/d"
});
这样就解决了这个问题。
2.微博分享，QQ好友，QQ空间，微信分享
Html代码如下：
<div class="share-wrapper"> <div onclick="shareTo('qzone')"> <img src="http://zixuephp.net/static/images/qqzoneshare.png" width="24"> </div> <div onclick="shareTo('qq')"> <img src="http://zixuephp.net/static/images/qqshare.png" width="26"> </div> <div onclick="shareTo('sina')"> <img src="http://zixuephp.net/static/images/sinaweiboshare.png" width="28"> </div> <div onclick="weixinShare()"> <img src="http://zixuephp.net/static/images/wechatshare.png" width="26"> </div> </div>
微博分享、QQ好友分享、QQ空间分享js代码如下：
function shareTo(stype) { var ftit = ''; var flink = ''; //获取网页标题title ftit = window.document.title; //获取网页中内容的第一张图片 flink = $('#thumblist img').eq(0).attr('src'); if (typeof flink == 'undefined') { flink=''; } //qq空间接口的传参 if (stype == 'qzone') { window.open('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + document.location.href + '?sharesource=qzone&title=' + ftit + '&pics=' + flink + '&summary=' + ''); } //新浪微博接口的传参 if (stype == 'sina') { window.open('http://service.weibo.com/share/share.php?url=' + document.location.href + '?sharesource=weibo&title=' + ftit + '&pic=' + flink + '&appkey=2706825840'); } //qq好友接口的传参 if (stype == 'qq') { window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + document.location.href + '?sharesource=qzone&title=' + ftit + '&pics=' + flink + '&summary=' + ''); } }
微信分享另外做的：
（1）首先引入了jquery qrcode库，生成链接二维码
微信二维码弹出层Html代码如下：
<!-- 生成的微信二维码容器，默认隐藏 --> <div class="wx-qrcode-wrapper"> <!-- 遮罩层 --> <div class="mask"></div> <!-- 弹出内容 --> <div class="wx-qrcode"> <h4>微信分享 <a href="javascript:;" class="icon-close2" onclick="closeMask()"><img src="images/static_img/icon-close2.png" alt=""></a></h4> <!-- 二维码生成位置 --> <div id="qrcode"></div> </div> </div>
<!-- 引入jquery.qrcode库 生成二维码 --> <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
/* 二维码生成代码 */ $("#qrcode").qrcode({ text: "<{url action=topwap_ctl_item_detail@index item_id=$item.item_id}>", //设置二维码内容 render: "table", //设置渲染方式 width: 200, //设置宽度,默认生成的二维码大小是 256×256 height: 200, //设置高度 typeNumber: -1, //计算模式 background: "#ffffff", //背景颜色 foreground: "#000000" //前景颜色 }); /* 微信图标上的点击事件，触发二维码弹出 */ function weixinShare() { $('.wx-qrcode-wrapper').show() } /* 关闭二维码弹层 */ function closeMask() { $('.wx-qrcode-wrapper').hide() }
问题：商品详情页pc端和移动端的链接不一样，无法分享到微信怎么办？
答案：这里有一个问题，就是在pc端进行微信分享的链接并不是当前链接，pc端的链接在移动端是打不开的，会自动跳到首页，所以这里的链接后端处理过了，已处理成对应的移动端商品详情链接。
参考文章：QQ空间、新浪微博、腾讯微博等一键分享API链接代码
