移動端小功能雜記（一）

一. IOS webView的修改Title Hack

　　通常來講，js修改網頁的title能夠隨意修改。

　　可是存在一種特例，好比：用戶點擊某個btn後修改網頁title。此時大部分狀況也是沒問題的，只有IOS webView修改title不成功。

　　針對於IOS webView，緣由：title在網頁加載後就定下來，要想用戶點擊btn後修改網頁title，必須加載html。因而，也就有了解決方法。

setTitle: function(title) {
  var $body = $('body');
  document.title = title;
  // Hack, Used for IOS weixin and dahuo
  var $iframe = $('<iframe src="' + 空的HTML + '" style="display:none;"></iframe>').on('load', function() {
    setTimeout(function() {
      $iframe.off('load').remove()
    }, 0)
  }).appendTo($body)
},

 

二. 獲取某月的最後時刻的時間戳

getTheMonthLastTime: function(year, month) {
  var new_year = year;
  var new_month = month++;
  if (month > 12) {
    new_month -= 12;
    new_year++;
  }
  var new_date = new Date(new_year, new_month, 1);
  return (new Date(new_date.getTime() - 1)).getTime();
},

 

三. 判斷是否在微信

is_weixin: function() {
  var ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == "micromessenger") {
    return true;
  } else {
    return false;
  }
},

 

四. 判斷手機系統

aori: function() {
  if (/Android/i.test(navigator.userAgent)) {
    return 'android';
  } else if (/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
    return 'ios';
  } else {
    return 'unknown';
  }
},

 

五. 微信分享

weixin_share: {
  addWXScript: function() { //引入js文件
    var self = this;
    var existScript = document.getElementsByTagName('script')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://res.wx.qq.com/open/js/jweixin-1.0.0.js';
    document.body.insertBefore(script, existScript);
    script.onload = function() {
      self.webchatShare();
    };
  },
  wx_config: function(appId, timestamp, nonceStr, signature, jsApiList) {
    wx.config({
      debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
      appId: appId, // 必填，公衆號的惟一標識
      timestamp: timestamp, // 必填，生成簽名的時間戳
      nonceStr: nonceStr, // 必填，生成簽名的隨機串
      signature: signature, // 必填，簽名，見附錄1
      jsApiList: jsApiList
    });
  },
  wx_shareTimeline: function(title, link, imgUrl) {
    wx.onMenuShareTimeline({
      title: desc, // 分享標題
      link: link, // 分享連接
      imgUrl: imgUrl, // 分享圖標
      success: function() {},
      cancel: function() {}
    });
  },
  wx_shareAppMessage: function(title, desc, link, imgUrl) {
    wx.onMenuShareAppMessage({
      title: title, // 分享標題
      desc: desc, // 分享描述
      link: link, // 分享連接
      imgUrl: imgUrl, // 分享圖標
      type: '', // 分享類型,music、video或link，不填默認爲link
      dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
      success: function() {},
      cancel: function() {}
    });
  },
  wx_onMenuShareQQ: function(title, desc, link, imgUrl) {
    wx.onMenuShareQQ({
      title: title, // 分享標題
      desc: desc, // 分享描述
      link: link, // 分享連接
      imgUrl: imgUrl, // 分享圖標
      success: function() {
        // 用戶確認分享後執行的回調函數
      },
      cancel: function() {
        // 用戶取消分享後執行的回調函數
      }
    });
  },
  webchatShare: function() {
    var self = this;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      try {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            var response = JSON.parse(xhr.responseText);
            var config = response.data;
            //微信分享
            if (typeof config == 'object' && config.appid) {
              var jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline'];
              self.wx_config(config.appid, config.timestamp, config.noncestr, config.signature, jsApiList);
              wx.ready(function() {
                self.wx_shareTimeline(title, link, imgUrl);
                self.wx_shareAppMessage(title, desc, link, imgUrl);
                self.wx_onMenuShareQQ(title, desc, link, imgUrl);
              });
            }
          }
        }
      } catch (e) {
        //alert(e);
      }
    };
    xhr.open('get', 'https://simu.dahuo.la/wechat/jswechat', true);
    xhr.timeout = 30000;
    xhr.send(null);
  }
},

 

五. 獲取url hashParams

getHashParams: function() {
  var hash = location.hash;
  var tmpArr = hash.split("&");
  var parmObj = {};
  if (tmpArr.length > 0 && tmpArr[0] !== "") {
    for (var i = 0, len = tmpArr.length; i < len; i++) {
      var tmp = tmpArr[i].replace("#", "").split("=");
      parmObj[tmp[0]] = tmp[1];
    }
  } else {
    parmObj = null;
  }
  return parmObj;
},

 

六. localStorage和sessionStorage操做

/**
 *get the localstorage
 *@method getLocal
 *@return {string}獲取瀏覽器中保存的某個key對應的值
 */
getLocal: function(key) {
  var storage = window.localStorage;
  return storage.getItem(key);
},
/**
 *set the localStorage
 *@method setLocal
 *@return 將某個key對應的值永久保存到瀏覽器
 */
setLocal: function(key, value) {
  var storage = window.localStorage;
  storage.removeItem(key);
  try {
    storage.setItem(key, value);
  } catch (e) {
    return "error";
  }
},
/**
 *get the sessionStorage
 *@method getSession
 *@return 將某個key對應的值永久保存到瀏覽器
 */
getSession: function(key) {
  var session = window.sessionStorage;
  return session.getItem(key);
},
/**
 *set the sessionStorage
 *@method setSession
 *@return 獲取瀏覽器中保存的某個key對應的session值
 */
setSession: function(key, value) {
  var session = window.sessionStorage;
  session.removeItem(key);
  try {
    session.setItem(key, value);
  } catch (e) {
    return "error";
  }
},
//清除緩存
clearLocal: function(key) {
  var storage = window.localStorage;
  try {
    storage.removeItem(key);
  } catch (e) {
    return "error";
  }
},
clearSession: function(key) {
  var session = window.sessionStorage;
  try {
    session.removeItem(key);
  } catch (e) {
    return "error";
  }
},

 

七. 模態框

　　移動端的模態框實在是太少，這裏提供一個簡單易用的。

modal: function() {
  var defaulOptions = {
    width: "80%",
    height: "auto",
    isCenter: true,
    animate: true
  }
  var $modal = null,
    opts;
  var setOption = function(options) {
    opts = $.extend({}, defaulOptions, options);
  }
  var show = function(options) {
    setOption(options);
    $modal = $("#" + opts.id);
    if ($modal.length) {
      $modal.find(".modal-header").html(opts.title);
      $modal.find(".modal-body").html(opts.body);
      $modal.find(".modal-footer").html(opts.footer);
    } else {
      var modal = '<div class="modal-overlay" id="' + opts.id + '">';
      modal += '<div class="dahuo-modal">';
      if (opts.title) {
        modal += '<div class="modal-header">' + opts.title + '</div>';
      }
      modal += '<div class="modal-body">' + opts.body + '</div>';
      if (opts.footer) {
        modal += '<div class="modal-footer">' + opts.footer + '</div>';
      }
      modal += '</div></div>';
      $("body").append(modal);
      $modal = $("#" + opts.id);
    }
    $modal.addClass("visible").find(".dahuo-modal").css("width", opts.width).addClass("modal-in");
    bindEvent();
  };
  var hide = function() {
    $modal.removeClass("visible").find(".dahuo-modal").removeClass("modal-in");
  };
  var bindEvent = function() {
    $(".modal-cancle").on("click", function(event) {
      hide();
      event.stopPropagation();
      event.preventDefault();
    });
    $(".modal-confirm").off().on("click", function(event) {
      if ($.type(opts.callback) == "function") {
        opts.callback();
      } else {
        hide();
      }
      event.stopPropagation();
      event.preventDefault();
    });
    $(".modal-overlay").off().on("click", function(event) {
      var target = $(event.target);
      if (target.closest(".dahuo-modal").length == 0 && target.closest("[data-modal]").length == 0) {
        hide();
      }
      event.stopPropagation();
      event.preventDefault();
    });
  }
  return {
    show: show,
    hide: hide
  };
}(),

 

八. 簡易的Toast提醒

toast: function(opts) {
  var defaulOptions = {
    "content": "",
    "timeout": "1500",
    "width": "auto"
  }
  var options = $.extend({}, defaulOptions, opts);
  var time = options.timeout;
  var $template = '<div class="dahuo-toast" style="width:' + options.width + '">' + options.content + '</div>';
  var $toast = $(".dahuo-toast");
  if ($toast.length) {
    $toast.html(options.content);
  } else {
    $("body").append($template);
    $toast = $(".dahuo-toast");
  }
  $toast.addClass("visible");
  setTimeout(function() {
    $toast.removeClass("visible");
  }, time);
},

 

九. 簡易的Loading效果

loading: function() {
  var $loading = $("#loading");
  if (!$loading.length) {
    $loading = '<div class="loading" id="loading"><span></span></div>';
    $("body").append($loading);
  }
  return {
    show: function() {
      $("#loading").show();
    },
    hide: function() {
      $("#loading").hide();
    }
  }
}(),

 

十. 簡易的時間格式化方法

/*
時間戳轉換
dateFormat("1434511073","yy-mm-hh hh:mm:ss") rerurn 2015-06-17 11:17:53    
dateFormat("1434511073","yy-mm-hh") rerurn 2015-06-17
dateFormat("1434511073","yy/mm/hh hh:mm:ss") rerurn 2015/06/17 11:17:53        
dateFormat("1434511073","yy/mm/hh") rerurn 2015/06/17    
dateFormat("1434511073","tomorrow") rerurn 今天11:17
*/
dateFormat: function(date, format) {
  var len = date.length,
    rdate;
  var y, month, m, d, h, min, s, days, offset, today;
  if (len === 13) {
    rdate = new Date(parseInt(date));
  } else if (len === 10) {
    rdate = new Date(parseInt(date) * 1000);
    date = date * 1000;
  } else {
    rdate = new Date(parseInt(date));
  }
  y = rdate.getFullYear();
  month = parseInt(rdate.getMonth()) + 1;
  m = month < 10 ? "0" + month : month;
  d = rdate.getDate() < 10 ? "0" + rdate.getDate() : rdate.getDate();
  h = rdate.getHours() < 10 ? "0" + rdate.getHours() : rdate.getHours();
  min = rdate.getMinutes() < 10 ? "0" + rdate.getMinutes() : rdate.getMinutes();
  s = rdate.getSeconds() < 10 ? "0" + rdate.getSeconds() : rdate.getSeconds();
  switch (format) {
    case "yy-mm":
      {
        return y + "-" + m;
        break;
      }
    case "yy-mm-dd":
      {
        return y + "-" + m + "-" + d;
        break;
      }
    case "mm-dd":
      {
        return m + "-" + d;
        break;
      }
    case "yy/mm/dd":
      {
        return y + "/" + m + "/" + d;
        break;
      }
    case "yy-mm-dd hh:mm:ss":
      {
        return y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
        break;
      }
    case "yy/mm/dd hh:mm:ss":
      {
        return y + "/" + m + "/" + d + " " + h + ":" + min + ":" + s;
        break;
      }
    case "tomorrow":
      {
        days = parseInt((new Date() - date) / 86400000);
        today = new Date().getDate();
        offset = Math.abs(today - d);
        if (days < 4 && offset < 4) {
          if (offset === 0) {
            return "今天" + h + ":" + min;
          } else if (offset === 1) {
            return "昨天" + h + ":" + min;
          } else if (offset === 2) {
            return "前天" + h + ":" + min;
          }
        } else {
          return y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
        }
      }
    default:
      return y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
  }
}

 

附：相關css

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

body {
  height: auto !important;
  height: 100%;
  min-height: 100%;
  font: 14px "Microsoft YaHei", Arail, sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}

input,
button,
a,
i {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}

a {
  color: inherit;
  text-decoration: none;
}

i {
  font-style: normal;
}

li {
  list-style-position: inside;
  list-style: none;
}

a:focus,
i:focus,
input:focus,
button:focus {
  outline: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix:after {
  display: table;
  content: "";
  height: 0;
  visibility: hidden;
  clear: both;
}

.clearfix {
  display: block;
}

.hidden {
  display: none;
}

.visible {
  opacity: 1;
  z-index: 1000;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.mr-5 {
  margin-left: 5px;
}

.mr-10 {
  margin-left: 10px;
}

.mr-15 {
  margin-left: 15px;
}

.mr-20 {
  margin-left: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.font-green {
  color: #1FA400;
}

.font-red {
  color: #b71111;
}

.font-grey {
  color: #ccc;
}

.font-color-orange {
  color: #ff801a !important;
}

.font-color-green {
  color: #6db247 !important;
}

.font-color-grey {
  color: #999999 !important;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -o-box;
  -o-box-pack: center;
  -o-box-align: center;
  display: box;
  box-pack: center;
  box-align: center;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  z-index: -1;
}

.dahuo-modal {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  opacity: 0;
  -webkit-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

.modal-in {
  opacity: 1;
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.dahuo-modal .modal-header {
  line-height: 45px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}

.dahuo-modal .modal-body {
  padding: 20px 10px;
  line-height: 23px;
}

.dahuo-modal .modal-footer {
  text-align: center;
  border-top: 1px solid #ddd;
  font-size: 14px;
}

.dahuo-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 5px;
  color: #fff;
  opacity: 0;
  z-index: -1;
  -webkit-transform: translate(-50%, -50%);
  -webkit-transition: opacity 1s ease-in-out;
}

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 81px;
  height: 70px;
  display: block;
  margin: -40.5px -35px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  border-radius: 5px;
}

.loading:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px -10px;
  top: 50%;
  left: 50%;
  background: url('../images/droploading.gif') no-repeat center center;
  background-size: 20px 20px;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes loading {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.visible {
  opacity: 1;
  z-index: 10;
}

.tabs-title:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.tabs-title li {
  float: left;
  margin-left: -1px;
  padding: 10px;
}

.tabs-title li.active {
  background: #ccc;
}

.tabs-contain .tabs-content {
  margin-top: -1px;
  padding: 10px 0;
  display: none;
}

.tabs-contain .tabs-content.shown {
  display: block;
}

.top-msg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: red;
  text-align: center;
}


/*slider*/

.slider-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.slider-list {
  display: -webkit-box;
  width: 100%;
  height: 100%;
}

.slider-item {
  width: 100%;
  list-style: none;
}

.slider-item a {
  display: block;
}

.slider-item img {
  width: 100%;
}

.transitionable {
  -webkit-transition: all 0.3s ease-in-out;
}

.slider-page {
  width: 100%;
  position: absolute;
  bottom: 5px;
  left: 0;
  text-align: center;
}

.slider-page ul {
  display: inline-block;
  text-align: center;
}

.slider-page ul li {
  display: inline-block;
  vertical-align: top;
  width: 6px;
  height: 6px;
  margin: 0 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5)
}

.slider-page ul li.active {
  background: #fff
}

.img-wrap {
  width: 100%;
  height: 100%;
  background: #fafafa url("../images/loading.gif") no-repeat center center;
}