每日签到实现 Html手机端上实现每日签到的功能，感谢GitHub上的这两位的贡献 ( ^ _ ^ )签到 https://github.com/zhicaizhu123/qiandao日历 https://github.com/rxhluck/signDate上图镇楼:1.思路签到---中主要是用swiper实现上下滑动切换日历---中主要是计算了并制作table的当月日历，还能上下切换2.html界面 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="qiandao"> <div class="qiandao-content"> <div class="qiandao-icon"> <div class="hangxian"> <span></span> </div> <div class="icon-circle"> <img class="icon-avatar" src="{{$user->avatar}}"> </div> <div class="hangxian"> <span></span> </div> </div> <div class="qiandao-text"> <p>{{$user->name}}</p> </div> <div class="qiandao-btn"> @if($countSigns == 0) <a href="javascript:;" class="qd-btn">点击签到</a> @else <a href="javascript:;" class="qd-btn disabled">已签到</a> @endif <div class="hasqiandao"> 签到成功 <span class="caret"></span> </div> </div> </div> <div class="qiandao-desc"> <p>每个好习惯都始于点滴积累</p> <p>加入党员之家，蜕变更好的自己。</p> </div> <div class="qiandao-info"> <ul> <li class="time continue"> <span class="day"><em>{{$f_countsign}}</em>天</span> <span class="qiandao-tip">连续签到</span> </li> <li class="time sum"> <span class="day"><em>{{$countMonth}}</em>天</span> <span class="qiandao-tip">当月签到</span> </li> <li class="time read"> <span class="day"><em>{{$countYear}}</em>天</span> <span class="qiandao-tip">共计签到</span> </li> </ul> </div> </div> </div> <div class="swiper-slide"> <div class="qiandao"> <div class="qiandao-detail qiandao-content"> <div class="qiandao-icon"> <div class="hangxian"> <span></span> </div> <div class="icon-circle"> <img class="icon-avatar" src="{{$user->avatar}}"> </div> <div class="hangxian"> <span></span> </div> </div> <div class="qiandao-text"> <p>{{$user->name}}</p> </div> <div class="qiandao-btn"> @if($countSigns == 0) <a href="javascript:;" class="qd-btn">点击签到</a> @else <a href="javascript:;" class="qd-btn disabled">已签到</a> @endif <div class="hasqiandao"> 签到成功 <span class="caret"></span> </div> </div> </div> <div class="qiandao-calendar"> <div id="signDate"> <div class="monthAndyear"> <span class="date-left"></span> <span class="date-time"></span> <span class="date-right"></span> </div> <table></table> </div> </div> </div> </div> </div> </div> <div class="jiantou"></div> <div class="jiantou2"></div> <link rel="stylesheet" href="{{url('packages/common/Swiper-3.3.1/css/swiper.min.css')}}"> <link rel="stylesheet" href="{{url('packages/common/signDate/css/signDate.css')}}"/> <link rel="stylesheet" href="{{url('/packages/common/iosOverlay/css/iosOverlay.css')}}"> <script src="{{url('packages/common/signDate/js/Calendar.js')}}"></script> <script src="{{url('packages/common/Swiper-3.3.1/js/swiper.min.js')}}"></script> <script src="packages/common/iosOverlay/js/iosOverlay.js"></script>3.Js实现主要是签到点击，历史签到获取，日历切换3部分 $(function () { var isSwiper = true; var calendar = new DuCalendar('signDate'); calendar.init(); $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $(".qiandao-btn").on("click", ".qd-btn", function (e) { e.preventDefault(); if (!$(".qd-btn").hasClass("disabled")) { $.ajax({ method: "POST", url: "/sign_in", dataType: "json", success: function (data) { if (data.success) { $(".continue > span > em").html(parseInt($(".continue > span > em").html()) + 1); $(".sum > span > em").html(parseInt($(".sum > span > em").html()) + 1); $(".read > span > em").html(parseInt($(".read > span > em").html()) + 1); $(".qd-btn").addClass("disabled").html("已签到"); var tip = $(".qd-btn").parent().find(".hasqiandao"); tip.addClass("active"); var timeout = setTimeout(function () { tip.removeClass("active"); }, 2000); } else { alert(data.msg); } }, error: function (xhr, type) { alert("未连接到服务器"); } }); } else { return; } }); var myswiper = new Swiper('.swiper-container', { direction: 'vertical', height: window.innerHeight, onSlideChangeEnd: function (swiper) { if (swiper.isEnd) { $(".jiantou").hide(); $(".jiantou2").show(); if (isSwiper) { var overlay = iosOverlay({ text: "Loading", duration: 20e3, icon: "/packages/common/iosOverlay/img/load.gif" }); $.ajax({ method: "POST", data: {month: calendar.month}, url: "/sign_calendar", dataType: "json", success: function (data) { if (data.success) { var signs = data.data; var ids = "#day_8888"; for (var i = 0; i < signs.length; i++) { var date = new Date(signs[i].created_at); ids = ids + " ,#day_" + date.getDate(); } $(ids).remove("today"); $(ids).addClass("today"); overlay.update({ icon: "/packages/common/iosOverlay/img/check.png", text: data.msg }); isSwiper = false; } else { overlay.update({ icon: "/packages/common/iosOverlay/img/cross.png", text: data.msg }); } }, error: function (xhr, type) { overlay.update({ icon: "/packages/common/iosOverlay/img/cross.png", text: "服务器连接错误" }); } }); } } else { $(".jiantou2").hide(); $(".jiantou").show(); } }, }); });日历切换获取历史数据rxhluck写的已经封装的差不多了，扩展一下就好//初始化属性数据 DuCalendar.prototype.getData = function () { var overlay = iosOverlay({ text: "Loading", duration: 20e3, icon: "/packages/common/iosOverlay/img/load.gif" }); $.ajax({ method: "POST", data: {month: this.month}, url: "/sign_calendar", dataType: "json", success: function(data){ if(data.success){ var signs = data.data; var ids = "#day_8888"; for (var i = 0;i<signs.length;i++){ var date = new Date(signs[i].created_at); ids = ids+" ,#day_"+ date.getDate(); } $(ids).remove("today"); $(ids).addClass("today"); overlay.update({ icon: "/packages/common/iosOverlay/img/check.png", text: data.msg }); }else{ overlay.update({ icon: "/packages/common/iosOverlay/img/cross.png", text: data.msg }); } }, error: function(xhr, type){ overlay.update({ icon: "/packages/common/iosOverlay/img/cross.png", text: "服务器连接错误" }); } }); } //左键 this.leftBtn.onclick=function(){ _tag-- var dateObj; if(_tag == 0){ dateObj = new Date(); }else{ var y = parseInt(This.year); var m = parseInt(This.month)-1; if(m<0){ m = 11 ; y--; } dateObj = new Date(y,m,1); } This.addProDate(dateObj); This.showType(); This.addTable(); This.getData(); } //右键 this.rightBtn.onclick=function(){ _tag++ var dateObj; if(_tag == 0){ dateObj = new Date(); }else{ var y = parseInt(This.year); var m = parseInt(This.month)+1; if(m>11){ m = 0; y++; } var dateObj = new Date(y,m,1); } This.addProDate(dateObj); This.showType(); This.addTable(); This.getData(); }4.后端Laravel写接口界面初始化/*** * 每日签到查询 * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View */ public function sign(){ $title = '每日签到'; $user = session('user'); $user = Users::find($user->id); if($user->apply_state != 5){ return redirect()->route('returnBlade', ['您还不是党员，需要先进行报道。', 'dybd']); } $f_countsign = DB::select('SELECT f_countsign_days(:id,:date) as countsign', ['id' => $user->id,'date'=> date("Y-m-d ", time())]); $f_countsign = $f_countsign[0]->countsign; $countYear = Signs::where('users_id','=',$user->id)->whereBetween('created_at', [ date("Y",time())."-01-01 00:00:00", date("Y",strtotime("+1 year"))."-12-31 23:59:59" ])->count(); $countMonth = Signs::where('users_id','=',$user->id)->whereBetween('created_at', [ date("Y-m-01",time())." 00:00:00", date("Y-m-t",time())." 23:59:59" ])->count(); $countSigns = Signs::where('users_id','=',$user->id)->whereBetween('created_at', [ date("Y-m-d",time()), date("Y-m-d",strtotime("+1 day")) ])->count(); if($countSigns>0){ $f_countsign++; } return view('mobile.sign', [ 'title'=>$title, 'user'=>$user, 'f_countsign'=>$f_countsign, 'countSigns'=>$countSigns, 'countYear'=>$countYear, 'countMonth'=>$countMonth]); }签到Ajax/*** * 每日签到 * @return array */ public function sign_in(){ $user = session('user'); $countSigns = Signs::where('users_id','=',$user->id)->whereBetween('created_at', [ date("Y-m-d",time()), date("Y-m-d",strtotime("+1 day")) ])->count(); if($countSigns == 0){ DB::transaction(function () use ($user) { $integral = new Integrals(); $integral->name = config('bgjd.sign')[0]['name']; $integral->integral = config('bgjd.sign')[0]['integral']; $integral->users_id = $user->id; $integral->save(); $sign = new Signs(); $sign->name = config('bgjd.sign')[0]['name']; $sign->users_id = $user->id; $sign->integrals_id = $integral->id; $sign->save(); }); $res = ['success'=>true,'msg'=>'签到成功']; }else{ $res = ['success'=>false,'msg'=>'已签到']; } return $res; }历史月份的签到数据/*** * 历史签到查询 * @param Request $request * @return array */ public function sign_calendar(Request $request){ $data = $request->all(); $rules = [ 'month' => 'required' ]; $messages = [ 'month.required' => '月份必须填写' ]; $validator = Validator($data, $rules, $messages); if ($validator->passes()){ $user = session('user'); $Signs = Signs::where('users_id','=',$user->id)->whereBetween('created_at', [ date("Y",time())."-".($data['month']+1)."-01 00:00:00", date("Y",time())."-".($data['month']+1)."-".date("t",time())." 23:59:59" ])->get(); if($Signs){ $res = ['success'=>true,'msg'=>($data['month']+1).'月签到','data'=>$Signs]; }else{ $res = ['success'=>false,'msg'=>'已签到']; } }else{ $res = ['success'=>false,'msg'=>$validator->messages()->first()]; } return $res; }5.连续签到数据库方法这个还是比较关键的，所以提一下BEGIN DECLARE days INT; DECLARE flag INT; DECLARE previous_day DATE; SET days := 0; SET flag := 1; SET previous_day := DATE_SUB(end_time,INTERVAL 1 DAY); WHILE flag>0 DO SELECT COUNT(DISTINCT(DATE(created_at))) INTO flag FROM signs WHERE users_id = id AND DATE(created_at) = previous_day ; IF flag > 0 THEN SET days := days + 1; SET previous_day := DATE_SUB(previous_day,INTERVAL 1 DAY); END IF; END WHILE; RETURN days; END基本这样就全部完成了，Css就不附上了。

手机H5仿微信多图上传（后续问题） 手机H5仿微信多图上传这片文章中已经实现了微信手机端多图上传的一些基本功能。但是到IOS真机微信浏览器中却发现怎么点击都没有反应，那么问题来了。在ios端点击文字时根本没进入on()方法体，搜索得知微信在安卓版使用X5内核，iOS版使用自带Safari内核touch事件，不支持click，Safari内核只支持，原因未知。以下是原来的写法，因为是动态append的所以一定要用这样写才能监测的到点击事件 $(document).on("click",".you_class",function () { ****** });解决方法1.像如下写法，但是这样append的就无法触发点击事件了(失败) $('.this_class').on("click",".you_class",function () { ****** });2.像如下写法，click修改为touchend事件，这样就能触发了，但是滚动一下啊就触发，那还得写touchend的位移判断，太麻烦了(成功但是不完美) $(document).on("touchend",".you_class",function () { ****** });3.把触发的div全改成button，因为button有click(没试过)4.像如下写法，语言触发的div加上cursor样式(完美解决)cursor:pointer;

手机H5仿微信多图上传 手机H5网站上传图片是基本的一个功能，所以一般程序都会用到。思路基本如下1.图片选择2.图片缩略展示3.图片详情展示4.图片删除5.图片上传1.图片选择html标签代码 <div class="bd"> <div class="upload_label">上传图片(最多可上传9张)</div> <div class="cDiv" id="listView"></div> <div class="cDiv clearfix" id="inputDiv"> <div class="weui_uploader_input_wrp">  <input class="weui_uploader_input" id="input" type="file" accept="image/*" multiple="multiple" /> </div> </div> </div>图片展示的时候必须要将手机端的图片旋转角度，不然上传的图片就是90度的图片会影响图片的浏览使用插件JavaScript-Load-Image可以将图片旋转和压缩大小 $(document).on("click",".btn_add",function () { $('#input').trigger('click') }); $(document).on("change","#input",function () { var input = $(this)[0]; // input 控件 imagesChanged(input); }); /** * 添加图片回调 */ function imagesChanged(input) { var files = input.files; // 假设 "listView" 是将要展示图片的 div var listView = $("#listView"); for (var i = 0; i < files.length; i++) { //新添加的图片 var file = files[i]; imgFiles.push(file); // Make sure `file.name` matches our extensions criteria if ( !/\.(jpe?g|png|gif)$/i.test(file.name) ) { continue; } var options = { orientation: true, maxWidth: 640, } loadImage( file, function (img) { var base = img.toDataURL("image/jpeg"); var imgRow = getImageRow(base); imgData.push(base); // add_doc(base); listView.append(imgRow); }, options // Options ); //最多张数 if (imgFiles.length >= imgCountMax) { $("#inputDiv").hide(); break; } } } // 插入一行图片 function getImageRow(imgSrc) { // 向 listView 添加一行 row var imgRow = '<div class="cell_img" >' + ''+ '</img>' + '</div>'; return imgRow; }2.缩略展示已经在上中3.详情图片展示 <!-- 图片显示详情 --> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <!-- Background of PhotoSwipe. It's a separate element, as animating opacity is faster than rgba(). --> <div class="pswp__bg"></div> <!-- Slides wrapper with overflow:hidden. --> <div class="pswp__scroll-wrap"> <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. --> <!-- don't modify these 3 pswp__item elements, data is added later on. --> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <!-- Controls are self-explanatory. Order can be changed. --> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> <!-- /图片显示详情 -->主要使用了插件photoswipe友好的展示了图片的详情 $(document).on("click",".weui_uploader_file",function () { var indexSel = $('.weui_uploader_file').index(this); var imgArr = $('.weui_uploader_file'); var items = new Array(); imgArr.each(function (i) { var img = imgArr[i]; var item = new Object(); item.src = img.src; item.w = img.naturalWidth; item.h = img.naturalHeight; items.push(item); }); var pswpElement = document.querySelectorAll('.pswp')[0]; var options = { index: indexSel, history: false, focus: false, showAnimationDuration: 0, hideAnimationDuration: 0 }; var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); gallery.init(); });4.删除图片这个最简单删除临时的图片存储数据，删除展示div即可 $(document).on("click",".btn_close",function(){ indexSel = $('.btn_close').index(this); imgFiles.splice(indexSel,1); imgData.splice(indexSel,1); // $('.update_img')[indexSel].remove(); $('.cell_img')[indexSel].remove(); if (imgFiles.length >= imgCountMax) { $("#inputDiv").hide(); }else{ $("#inputDiv").show(); } })5.图片上传我是用laravel框架的所以要设置CSRF令牌，因为是图片上传所以会有点慢，那就需要一个友好的交互等待界面使用iosOverlay,简单易用$(document).on("click",".btn_primary",function () { var title = $('#title').val(); var mood = $('#mood').val(); if (!title) { alert("标题不能为空"); return; } if (!mood) { alert("心情不能为空"); return; } if (!imgData) { alert("图片不能为空"); return; } var overlay = iosOverlay({ text: "Loading", duration: 20e3, icon: "/packages/common/iosOverlay/img/load.gif" }); $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ method: "POST", url: "/ssp_updata", data: {"title": title, "mood": mood, "imgData": imgData}, dataType: 'json', success: function (data) { if (data.success) { overlay.update({ icon: "/packages/common/iosOverlay/img/check.png", text: data.msg }); window.location.href = "/ssp"; } else { overlay.update({ icon: "/packages/common/iosOverlay/img/cross.png", text: data.msg }); } }, error: function (xhr, type) { overlay.update({ icon: "/packages/common/iosOverlay/img/cross.png", text: "服务器连接错误" }); } }); }); 6.最后一步服务器端接收图片注意本人使用的是Laravel所以是这样的的写法，用TP的就要自己写了只需要注意传回的canvas流需要去除前面描述字段·base64_decode(substr($value, 23))·jpg的是23个字段，png是22个字段public function ssp_updata(Request $request){ $data = $request->all(); $rules = [ 'title' => 'required', 'mood' => 'required', 'imgData' => 'required' ]; $messages = [ 'title.required' => '标题必须填写', 'mood.required' => '心情必须填写', 'imgData.required' => '图片必须大于1张' ]; $validator = Validator($data, $rules, $messages); if ($validator->passes()) { $imgPath = []; $imgArr = $data['imgData']; $storage = Storage::disk(config('admin.upload.disk')); $directory = '/image/'.date('Y', time()).'/'.date('md', time())."/"; $name = time(); foreach ($imgArr as $key => $value){ $target = $directory.$name.$key.".jpg"; $storage->put($target, base64_decode(substr($value, 23))); $imgPath[$key] = $target; } $user = session('user'); $Snap = new Snapshots(); $Snap->title = $data['title']; $Snap->mood = $data['mood']; $Snap->files = json_encode($imgPath); $Snap->users_id = $user->id; $Snap->save(); $res = ['success'=>true,'msg'=>"提交成功"]; return $res; } else { $res = ['success'=>false,'msg'=>$validator->messages()->first()]; return $res; } }

微信JS分享设置图标和内容 微信内置浏览器分享网页我们会发现，分享出去的提示里面都没有图标和描述，具体如下两种方法：1. 在页面body最上，添加可见的300px300px的img 注意一定是要大于300300，不然就会识别不到，这种方法非常具有偶然性，而且对图片的要求也特别的高，而且详细的描述也加不上去，还是放弃吧。<div style='display:none;'> <img src='your image link' /> </div>2. 微信开发者文档:超链接，文档里面写的很详细。1.首先你得有个认证过的微信公众(需要付款300的那种)，然后得到AppID和AppSecret，“公众号设置”的“功能设置”里填写“JS接口安全域名”。2.根据AppID和AppSecret获取access_token    GET获取:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=YOU_AppID&secret=YOU_AppSecret3.根据access_token获取jsapi_ticket GET获取:https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi4.根据jsapi_ticket计算signature签名算法签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。即signature=sha1(string1)。校验路径:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign5.开始正式编写js分享代码<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script type="text/javascript"> // 微信配置 wx.config({ debug: false,//调试开关 appId: "{$signPackage['appId']}",//第一步的appId timestamp: "{$signPackage['timestamp']}",//第四步的timestamp nonceStr: "{$signPackage['nonceStr']}",//第四步的nonceStr signature: "{$signPackage['signature']}",//第四步的signature jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 功能列表，我们要使用JS-SDK的什么功能 }); wx.ready(function(){ // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口 wx.onMenuShareTimeline({ title: '客户咨询', // 分享标题 link:"http://wap.sxol.com/{$Id|SortMemCode}", imgUrl: "{$Think.config.APP_WEB_URL}{$DataMem['Icon']}", // 分享图标 success: function () { alert("分享成功"); }, cancel: function () { alert("取消分享"); } }); // 获取“分享给朋友”按钮点击状态及自定义分享内容接口 wx.onMenuShareAppMessage({ title: '客户咨询', // 分享标题 desc: "您的专属私人顾问", // 分享描述 link:"http://wap.sxol.com/{$Id|SortMemCode}", imgUrl: "{$Think.config.APP_WEB_URL}{$DataMem['Icon']}", // 分享图标 type: 'link', // 分享类型,music、video或link，不填默认为link success: function () { alert("分享成功"); }, cancel: function () { alert("取消分享"); } }); }); </script>6.在第四步的时候我们发现里面需要填写一个URL，URL假如是实时改变的话，那signature是要实时改变的，而且第二步和第三步的access_token和jsapi_ticket也是有实效的7200秒默认，所以我们需要事实的去抓取access_token和jsapi_ticket并在不同的页面计算signature<?php class JSSDK { private $appId; private $appSecret; public function __construct($appId, $appSecret) { $this->appId = $appId; $this->appSecret = $appSecret; } public function getSignPackage() { $jsapiTicket = $this->getJsApiTicket(); $url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; $timestamp = time(); $nonceStr = $this->createNonceStr(); // 这里参数的顺序要按照 key 值 ASCII 码升序排序 $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url"; $signature = sha1($string); $signPackage = array( "appId" => $this->appId, "nonceStr" => $nonceStr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature, "rawString" => $string ); return $signPackage; } private function createNonceStr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; } private function getJsApiTicket() { // jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例 $data = json_decode(file_get_contents("jsapi_ticket.json")); if ($data->expire_time < time()) { $accessToken = $this->getAccessToken(); $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken"; $res = json_decode($this->httpGet($url)); $ticket = $res->ticket; if ($ticket) { $data->expire_time = time() + 7000; $data->jsapi_ticket = $ticket; $fp = fopen("jsapi_ticket.json", "w"); fwrite($fp, json_encode($data)); fclose($fp); } } else { $ticket = $data->jsapi_ticket; } return $ticket; } private function getAccessToken() { // access_token 应该全局存储与更新，以下代码以写入到文件中做示例 $data = json_decode(file_get_contents("access_token.json")); if ($data->expire_time < time()) { $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret"; $res = json_decode($this->httpGet($url)); $access_token = $res->access_token; if ($access_token) { $data->expire_time = time() + 7000; $data->access_token = $access_token; $fp = fopen("access_token.json", "w"); fwrite($fp, json_encode($data)); fclose($fp); } } else { $access_token = $data->access_token; } return $access_token; } private function httpGet($url) { $res = file_get_contents($url); return $res; } }调用方法$jssdk = new JSSDK("YOU_AppID", "YOU_AppSecret"); $signPackage = $jssdk->GetSignPackage();这样基本就完成了js分享的功能。

Chart基于HTML5的一个很好的统计图 官网地址:http://www.bootcss.com/p/chart.js/本人实现:http://wap.sxol.com/index.php?m=Home&a=houseCal#houseCal中文的官网写的非常详细，好用就行。

html仿IOS的提示 效果查看：http://demo.onedaylog.net/iOS-Overlay/index.html区别描述：该版本和网上版本的区别是，新增了gif图片的加载效果并不需要使用spinner，修复了update后设置时间无效。调用方式：<link href="__PUBLIC__/lib/iosOverlay/css/iosOverlay.css" rel="stylesheet"> <script src="__PUBLIC__/js/zepto.min.js"></script><!--Jquery也可以--> <script src="__PUBLIC__/lib/iosOverlay/js/iosOverlay.js"></script>加载...var overlay = iosOverlay({ text: "Loading", duration: 20e3, icon: "__PUBLIC__/lib/iosOverlay/img/load.gif" });成功提示iosOverlay({ text: "Success!", duration: 2e3, icon: "img/check.png" });错误提示iosOverlay({ text: "Error!", duration: 2e3, icon: "img/cross.png" })

html常用css技巧 1.清除图片下方出现几像素的空白间隙方法1：代码如下:img{display:block;}方法2：代码如下:img{vertical-align:top;}除了top值，还可以设置为text-top | middle | bottom | text-bottom，甚至特定的<length>和<percentage>值都可以方法3：代码如下:#test{font-size:0;line-height:0;} #test为img的父元素2.让文本垂直对齐文本输入框代码如下:input{vertical-align:middle;}3.让单行文本在容器内垂直居中代码如下:#test{height:25px;line-height:25px;}只需设置文本的行高等于容器的高度即可4.让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果代码如下:a:link{color:#03c;} a:visited{color:#666;} a:hover{color:#f30;} a:active{color:#c30;}按L-V-H-A的顺序设置超链接样式即可，可速记为LoVe（喜欢）HAte（讨厌）5.为什么Standard mode下IE无法设置滚动条的颜色？代码如下:html{ scrollbar-3dlight-color:#999; scrollbar-darkshadow-color:#999; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eee; scrollbar-arrow-color:#000; scrollbar-face-color:#ddd; scrollbar-track-color:#eee; scrollbar-base-color:#ddd; }将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可6.使文本溢出边界不换行强制在一行内显示代码如下:#test{width:150px;white-space:nowrap;}设置容器的宽度和white-space为nowrap即可，其效果类似<nobr>标签7.使文本溢出边界显示为省略号方法（此方法Firefox5.0尚不支持）：代码如下:#test{ width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。8.使连续的长字符串自动换行代码如下:#test{width:150px;word-wrap:break-word;}word-wrap的break-word值允许单词内换行9.清除浮动方法1：代码如下:#test{clear:both;}#test为浮动元素的下一个兄弟元素方法2：代码如下:#test{display:block;zoom:1;overflow:hidden;} #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height方法3：代码如下:#test{zoom:1;} #test:after{display:block;clear:both;visibility:hidden;height:0;content:'';} #test为浮动元素的父元素10.定义鼠标指针的光标形状为手型并兼容所有浏览器代码如下:#test{cursor:pointer;}若将cursor设置为hand，将只有IE和Opera支持，且hand为非标准属性值11.让已知高度的容器在页面中水平垂直居中方法：#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}Know More：已知高度的容器如何在页面中水平垂直居中12.让未知尺寸的图片在已知宽高的容器内水平垂直居中代码如下:#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;} #test p{*position:absolute;*top:50%;*left:50%;margin:0;} #test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;} #test是img的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中13.设置span的宽度和高度（即如何设置内联元素的宽高）代码如下:span{display:block;width:200px;height:100px;}要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可。所以方法非常多样，既可以设置display属性，也可以设置float属性，或者position属性等等。14.给一个元素定义多个不同的css规则代码如下:.a{color:#f00;} .b{background:#eee;} .c{background:#ccc;} <div class="a b">测试1</div> <div class="a c">测试2</div>多个规则之间使用空格分开，并且只有class能同时使用多个规则，id不可以15.让某个元素充满整个页面代码如下:html,body{height:100%;margin:0;} #test{height:100%;}16.让某个元素距离窗口上右下左4边各10像素代码如下:html,body{height:100%;margin:0;} html{_padding:10px;} #test{ position:absolute; top:10px; right:10px; bottom:10px; left:10px; _position:static; _height:100%;}17.去掉超链接的虚线框代码如下:a{outline:none;}IE7及更早浏览器由于不支持outline属性，需要通过js的blur()方法来实现，如<a onfocus="this.blur();"...18.容器透明，内容不透明方法1：代码如下:.outer{ width:200px; height:200px; background:#000; filter:alpha(opacity=20); opacity:.2;} .inner{width:200px;height:200px;margin-top:-200px;} <div class="outer"><!--我是透明的容器--></div> <div class="inner">我是不透明的内容</div>原理是容器层与内容层并级，容器层设置透明度，内容层通过负margin或者position绝对定位等方式覆盖到容器层上方法2：代码如下:.outer{ width:200px; height:200px; background:rgba(0,0,0,.2); background:#000;filter: alpha(opacity=20);} .outer .inner{position:relative;} <div class="outer"> <div class="inner">我是不透明的内容</div> </div>高级浏览器直接使用rgba颜色值实现；IE浏览器在定义容器透明的同时，让子节点相对定位，也可达到效果19.让整个页面水平居中代码如下:body{text-align:center;} #test2{width:960px;margin:0 auto;text-align:left;}定义body的text-align值为center将使得IE5.5也能实现居中20.为什么容器的背景色没显示出来？为什么容器无法自适应内容高度？方法：清除浮动通常出现这样的情况都是由于没有清除浮动而引起的，所以Debug时应第一时间想到是否有未清除浮动的地方21.做1像素细边框的table代码如下:#test{border-collapse:collapse;border:1px solid #ddd;} #test th,#test td{border:1px solid #ddd;} <table id="test"> <tr><th>姓名</th><td>Joy Du</td></tr> <tr><th>年龄</th><td>26</td></tr> </table>方法2：代码如下:#test{border-spacing:1px;background:#ddd;} #test tr{background:#fff;} <table id="test" cellspacing="1"> <tr><th>姓名</th><td>Joy Du</td></tr> <tr><th>年龄</th><td>26</td></tr> </table>IE7及更早浏览器不支持border-spacing属性，但是可以通过table的标签属性cellspacing来替代。22.使页面文本行距始终保持为n倍字体大小的基调代码如下:body{line-height:n;}注意，不要给n加单位。Know More：如何使页面文本行距始终保持为n倍字体大小的基调23.标准模式Standard mode和怪异模式Quirks mode下的盒模型区别？方法：标准模式下：Element width = width + padding + border怪异模式下：Element width = width相关资料请参阅CSS3属性box-sizing24.以图换字的几种方法及优劣分析思路1：使用text-indent的负值，将内容移出容器代码如下:.test1{width:200px;height:50px;text-indent:-9999px;background:#eee url(*.png) no-repeat;} <div class="test">以图换字之内容负缩进法</div>该方法优点在于结构简洁，不理想的地方：1.由于使用场景不同，负缩进的值可能会不一样，不易抽象成公用样式；2.当该元素为链接时，在非IE下虚线框将变得不完整；3.如果该元素被定义为内联级或者内联块级，不同浏览器下会有较多的差异思路2：使用display:none或visibility:hidden将内容隐藏；代码如下:.test{width:200px;height:50px;background:#eee url(*.png) no-repeat;} .test span{visibility:hidden;/* 或者display:none */} <div class="test"><span>以图换字之内容隐藏法</span></div>该方法优点在于兼容性强并且容易抽象成公用样式，缺点在于结构较复杂思路3：使用padding或者line-height将内容挤出容器之外；代码如下:.test{overflow:hidden;width:200px;height:0;padding-top:50px;background:#eee url(*.png) no-repeat;} .test{overflow:hidden;width:200px;height:50px;line-height:50;background:#eee url(*.jpg) no-repeat;} <div class="test">以图换字之内容排挤法</div>该方法优点在于结构简洁，缺点在于：1.由于使用场景不同，padding或line-height的值可能会不一样，不易抽象成公用样式；2.要兼容IE5.5及更早浏览器还得hack思路4：使用超小字体和文本全透明法；代码如下:.test{overflow:hidden;width:200px;height:50px;font-size:0;line-height:0;color:rgba(0,0,0,0);background:#eee url(*.png) no-repeat;} <div class="test">以图换字之超小字体+文本全透明法</div>该方法结构简单易用，推荐使用25.为什么2个相邻div的margin只有1个生效？代码如下:.box1{margin:10px 0;} .box2{margin:20px 0;} <div class="box1">box1</div> <div class="box2">box2</div>本例中box1的底部margin为10px，box2的顶部margin为20px，但表现在页面上2者之间的间隔为20px，而不是预想中的10+20px=30px，结果是选择2者之间最大的那个margin，我们把这种机制称之为“外边距合并”；外边距合并不仅仅出现在相邻的元素间，父子间同样会出现。简单列举几点注意事项: 　外边距合并只出现在块级元素上； 　浮动元素不会和相邻的元素产生外边距合并； 　绝对定位元素不会和相邻的元素产生外边距合并； 　内联块级元素间不会产生外边距合并； 　根元素间不会不会产生外边距合并（如html与body间）； 　设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并；26.在文本框中禁用中文输入法代码如下:input,textarea{ime-mode:disabled;} ime-mode为非标准属性，写该文档时只有IE和Firefox支持27.解决列表中list-style-image不能精准定位的问题方法：不使用list-style-image来定义列表项目标记符号，而用background-image来代替，并通过background-position来进行定位28.设置IE下的iframe背景透明方法：设置iframe元素的标签属性allowtransparency="allowtransparency"然后设置iframe内部页面的body背景色为transparent。不过由此会引发IE下一些其它问题，如：设置透明后的iframe将不能遮住select29.解决Chrome在应用transition时页面闪动的问题方法：-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;在Chrome下，使用过渡效果transition时有时会出现页面闪动

zepto和jquery的区别，zepto的不同使用8条小结 1. Zepto 对象 不能自定义事件例如执行： $({}).bind('cust', function(){});结果：  TypeError: Object has no method 'addEventListener'解决办法是创建一个脱离文档流的节点作为事件对象：例如： $('').bind('cust', function(){});2. Zepto 的选择器表达式: [name=value]  中value 必须用 双引号 "  or 单引号 ' 括起来  例如执行：$('[data-userid=123123123]')  结果：Error: SyntaxError: DOM Exception 12  解决办法： $('[data-userid="123123123]"') or $("[data-userid='123123123']")2-1.zepto的选择器没有办法选出 $("div[name!='abc']") 的元素2-2.zepto获取select元素的选中option不能用类似jq的方法$('option[selected]'),因为selected属性不是css的标准属性应该使用$('option').not(function(){ return !this.selected })比如：jq:$this.find('option[selected]').attr('data-v') * 1zepto:$this.find('option').not(function() {return !this.selected}).attr('data-v') * 1但是获取有select中含有disabled属性的元素可以用 $this.find("option:not(:disabled)") 因为disabled是标准属性   提供另外一种方法 看对其他人有没有帮助..$("#ID").val()  获取选中的value$("#ID option").eq($("#ID").attr("selectedIndex")).text()    获取选中的文本值参考网址：https://github.com/madrobby/zepto/issues/5032-3、zepto在操作dom的selected和checked属性时尽量使用prop方法，以下是官方说明：3.Zepto 是根据标准浏览器写的，所以对于节点尺寸的方法只提供 width() 和 height()，省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight()Zepto.js: 由盒模型（ box-sizing ）决定jQery: 忽略盒模型，始终返回内容区域的宽/高（不包含 padding 、 border ）解决方式就是使用 .css('width') 而不是 .width() 。3-1.边框三角形宽高的获取假设用下面的 HTML 和 CSS 画了一个小三角形：<div class="caret"></div> .caret { width: 0; height: 0; border-width: 0 20px 20px; border-color: transparent transparent blue; border-style: none dotted solid; }jQuery 使用 .width() 和 .css('width') 都返回 ，高度也一样；Zepto 使用 .width() 返回 ，使用 .css('width') 返回 0px 。所以，这种场景，jQuery 使用 .outerWidth() / .outerHeight() ；Zepto 使用 .width() / .height() 。3-2.offset()Zepto.js: 返回 top 、 left 、 width 、 heightjQuery: 返回 width 、 height3-3.隐藏元素Zepto.js: 无法获取宽高；jQuery: 可以获取。4.Zepto 的each 方法只能遍历 数组，不能遍历JSON对象5.Zepto 的animate 方法参数说明 ：详情点击-> zepto中animate的用法6.zepto的jsonp callback函数名无法自定义7.DOM 操作区别jq代码：(function($) { $(function() { var $list = $('<ul><li>jQuery 插入</li></ul>', { id: 'insert-by-jquery' }); $list.appendTo($('body')); }); })(window.jQuery);jQuery 操作 ul 上的 id 不会被添加。zepto代码：Zepto(function($) { var $list = $('<ul><li>Zepto 插入</li></ul>', { id: 'insert-by-zepto' }); $list.appendTo($('body')); });Zepto 可以在 ul 上添加 id 。8.事件触发区别jq代码：(function($) { $(function() { $script = $('<script />', { src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js', id: 'ui-jquery' }); $script.appendTo($('body')); $script.on('load', function() { console.log('jQ script loaded'); }); }); })(window.jQuery);使用 jQuery 时 load 事件的处理函数 不会 执行zepto代码：Zepto(function($) { $script = $('<script />', { src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js', id: 'ui-zepto' }); $script.appendTo($('body')); $script.on('load', function() { console.log('zepto script loaded'); }); });使用 Zepto 时 load 事件的处理函数 会 执行。

wp-UEditor 文章页面查看大图 前面我们已经安装好了百度的UEditor并且升级完成，本人使用一段时间后感觉图片方面还是比较薄弱的，在移动终端和PC端上都无法对图片进行放大。也没有图片相册的功能，使文章看起来很长，图片看上去很小而且不清楚，所以就感觉应该升级一下。PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。1、下载PhotoSwipe 地址：http://photoswipe.com/（本人使用的时候是4.1.1）2、解压PhotoSwipe-master可以看到很多文件，我就不一一讲解了，大家可以去看官网的API3、拷贝dist下的所有文件到，所启用主题的lib/PhotoSwipe/没有该文件夹的就新建吧(想要封装成插件的同学就自己封装一下)4、新建一个php写入引用PhotoSwipe的文件<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/lib/PhotoSwipe/photoswipe.css"> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/lib/PhotoSwipe/default-skin/default-skin.css"> <script src="<?php bloginfo('template_directory'); ?>/lib/PhotoSwipe/photoswipe.min.js"></script> <script src="<?php bloginfo('template_directory'); ?>/lib/PhotoSwipe/photoswipe-ui-default.min.js"></script>5、写入弹出放大缩小的界面，我是直接抄官网的<!-- 图片显示详情 --> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <!-- Background of PhotoSwipe. It's a separate element, as animating opacity is faster than rgba(). --> <div class="pswp__bg"></div> <!-- Slides wrapper with overflow:hidden. --> <div class="pswp__scroll-wrap"> <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. --> <!-- don't modify these 3 pswp__item elements, data is added later on. --> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <!-- Controls are self-explanatory. Order can be changed. --> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR --> <!-- element will get class pswp__preloader--active when preloader is running --> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> <!-- /图片显示详情 -->6、写入js监听事件，img有点击事件就弹出放大缩小的模块/** * Created by hua on 16-4-11. */ jQuery(document).ready(function() { $("#logPanel .entry-content img").bind("click",function(){ var imgArr = $(this); //var imgArr = $('#logPanel .entry-content img'); var index = 0; var items = new Array(); imgArr.each(function(i){ var item = new Object(); item.src = imgArr[i].src; item.w = imgArr[i].naturalWidth; item.h = imgArr[i].naturalHeight; items.push(item); }) var pswpElement = document.querySelectorAll('.pswp')[0]; var options = { // history & focus options are disabled on CodePen index:index, history: false, focus: false, showAnimationDuration: 0, hideAnimationDuration: 0 }; var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); gallery.init(); }); })OK了这样图片就能放大缩小了，因为本人的文章存在异步加载，lazyload功能，所以我就想看哪张点哪张，并没有类似相册的功能。要加的话也可以，PhotoSwipe是支持异步加载图片的。