技术好文共享:移动端小功能杂记(一)

简介: 技术好文共享:移动端小功能杂记(一)

一. 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 = $('').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 = '';


document.body.insertBefore(script, existScript);


script.onload = function() {


self.webchatShare();


};


},


wx_config: function(appId, timestamp, nonceStr, signature, jsApiList) {


wx.config({


debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参//代码效果参考:http://www.jhylw.com.cn/585533309.html

数,可以在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, // 分享标题


//代码效果参考: http://www.jhylw.com.cn/312135573.html

desc: desc, // 分享描述


link: link, // 分享链接


imgUrl: imgUrl, // 分享图标


type: '', // 分享类型,music、video或link,不填默认为link


dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空


success: function() {},


cancel: function() {}


});


},


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);


});


}


}


}


} 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 = '';


modal += '';


if (opts.title) {


modal += '' + opts.title + '';


}


modal += '' + opts.body + '';


if (opts.footer) {


modal += '' + opts.footer + '';


}


modal += '';


$("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 = '' + options.content + '';


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 = '';


$("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<span style="color: rgba(0, 0, 0,

相关文章
|
1天前
|
定位技术
技术好文共享:(官网)虚幻3
技术好文共享:(官网)虚幻3
|
2天前
|
前端开发 定位技术 PHP
技术好文共享:网页游戏开发教程
技术好文共享:网页游戏开发教程
|
2天前
|
前端开发
技术好文共享:第二十二webchat(2)
技术好文共享:第二十二webchat(2)
|
2天前
|
Windows
技术好文共享:简单介绍SXS的一些有意思的特性
技术好文共享:简单介绍SXS的一些有意思的特性
|
2天前
|
算法 Linux 调度
技术好文共享:详解操作系统中断
技术好文共享:详解操作系统中断
|
1月前
|
JavaScript 小程序 Java
基于Java的大学生平时成绩量化管理系统设计与实现(亮点:点赞评论、上传下载视频资源、多用户论坛交流)
基于Java的大学生平时成绩量化管理系统设计与实现(亮点:点赞评论、上传下载视频资源、多用户论坛交流)
70 0
|
11月前
|
Python
直播网站源码社区功能部署开发:连接世界的互动形式!
直播网站源码社区功能如何去实现from flask import Flask, request app = Flask(__name__) posts = [] @app.route('/post', methods=['POST'])
直播网站源码社区功能部署开发:连接世界的互动形式!
|
开发者 Python
保姆级教程带你开发优质的Python库之上篇【建议收藏】
正式的Python专栏第9篇,同学站住,别错过这个从0开始的文章!
133 0
保姆级教程带你开发优质的Python库之上篇【建议收藏】
|
XML 前端开发 JavaScript
❤️❤️HarmonyOS(鸿蒙)全网最全资源汇总,吐血整理,赶紧收藏!❤️❤️
❤️❤️HarmonyOS(鸿蒙)全网最全资源汇总,吐血整理,赶紧收藏!❤️❤️
282 0
❤️❤️HarmonyOS(鸿蒙)全网最全资源汇总,吐血整理,赶紧收藏!❤️❤️
|
小程序
今日头条小程序平台今日发布,头条小程序开放了哪些能力?
今日头条小程序平台今日发布,头条小程序开放了哪些能力?
318 0
今日头条小程序平台今日发布,头条小程序开放了哪些能力?