微信分享功能

首先可以去微信官方的js-sdk查看具体的使用方法
地址:http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html

1.首先需要在认证了的公众平台域名下,
2.config配置文件getSign.php需要传入两个微信公众平台提供的参数(appId,appsecret):getSign
步骤一:在页面头部引入js

[code lang=”js”]
<script type="text/javascript">http://res.wx.qq.com/open/js/jweixin-1.0.0.js</script>
[/code]

步骤二:配置config

[code lang=”js”]
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: ”, // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: ”, // 必填,生成签名的随机串
signature: ”,// 必填,签名,见附录1
jsApiList: [‘onMenuShareTimeline’,’onMenuShareAppMessage’] //朋友和朋友圈 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
[/code]

步骤三:通过ready接口处理成功后的操作

[code lang=”js”]
wx.ready(function (res) {
//分享到朋友圈
wx.onMenuShareTimeline({
title: shareData.title, // 分享标题
link: shareData.share_url, // 分享链接
imgUrl: shareData.imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareAppMessage({
title: shareData.title, // 分享标题
desc: shareData.desc, // 分享描述
link: shareData.share_url, // 分享链接
imgUrl: shareData.imgUrl, // 分享图标
type: ”, // 分享类型,music、video或link,不填默认为link
dataUrl: ”, // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
wx.error(function (res){
console.log(res.errMsg);
});
[/code]

步骤四:获取config数据

[code lang=”js”]
//获取jssdk数据
$.getJSON(‘getSign.php?url=’ + shareData.share_url,function(signPackageData){
weixinShare(signPackageData);
});
[/code]

完整的代码示例

[code lang=”js”]
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
(function(){
var shareData = {
‘share_url’:window.location.href,
‘title’:’我的2015负能量成功清零,新的一年’ + shareTitle,
‘desc’:’2015整年的负能量,大神都帮我转成了新年好运,真的好灵啊,你也来试试吧!’,
‘imgUrl’:’http://h5.becomingjenny.net/Koala2016-yd/img/share.jpg’
}
function weixinShare(signPackage){
wx.config({
debug: false,
appId: ‘wxb6b88f29b866f7b3’, // 必填,公众号的唯一标识
timestamp: signPackage.timestamp, //当前的时间戳
nonceStr: signPackage.nonceStr,
signature: signPackage.signature,// 必填,签名,见附录1
jsApiList: [‘onMenuShareTimeline’,’onMenuShareAppMessage’]
});
wx.ready(function (res) {
//分享到朋友圈
wx.onMenuShareTimeline({
title: shareData.title, // 分享标题
link: shareData.share_url, // 分享链接
imgUrl: shareData.imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareAppMessage({
title: shareData.title, // 分享标题
desc: shareData.desc, // 分享描述
link: shareData.share_url, // 分享链接
imgUrl: shareData.imgUrl, // 分享图标
type: ”, // 分享类型,music、video或link,不填默认为link
dataUrl: ”, // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
wx.error(function (res){
console.log(res.errMsg);
});
}

//获取jssdk数据
$.getJSON(‘getSign.php?url=’ + shareData.share_url,function(signPackageData){
weixinShare(signPackageData);
});
})();
</script>
[/code]

js判断各类浏览器

1、浏览器:

[code lang=”js”]
var bw = (function() {
var UserAgent = navigator.userAgent.toLowerCase();
return {
isUc : /ucweb/.test(UserAgent), // UC浏览器
isChrome : /chrome/.test(UserAgent.substr(-33,6)), // Chrome浏览器
isFirefox : /firefox/.test(UserAgent), // 火狐浏览器
isOpera : /opera/.test(UserAgent), // Opera浏览器
isSafire : /safari/.test(UserAgent) && !/chrome/.test(UserAgent), // safire浏览器
is360 : /360se/.test(UserAgent), // 360浏览器
isBaidu : /bidubrowser/.test(UserAgent), // 百度浏览器
isSougou : /metasr/.test(UserAgent), // 搜狗浏览器
isIE6 : /msie 6.0/.test(UserAgent), // IE6
isIE7 : /msie 7.0/.test(UserAgent), // IE7
isIE8 : /msie 8.0/.test(UserAgent), // IE8
isIE9 : /msie 9.0/.test(UserAgent), // IE9
isIE10 : /msie 10.0/.test(UserAgent), // IE10
isIE11 : /msie 11.0/.test(UserAgent), // IE11
isLB : /lbbrowser/.test(UserAgent), // 猎豹浏览器
  isWX : /micromessenger/.test(UserAgent), // 微信内置浏览器
isQQ : /qqbrowser/.test(UserAgent) // QQ浏览器
};
}());

[/code]

2、系统

[code lang=”js”]
var os = (function() {
var UserAgent = navigator.userAgent.toLowerCase();
return {
isIpad : /ipad/.test(UserAgent),
isIphone : /iphone os/.test(UserAgent),
isAndroid : /android/.test(UserAgent),
isWindowsCe : /windows ce/.test(UserAgent),
isWindowsMobile : /windows mobile/.test(UserAgent),
isWin2K : /windows nt 5.0/.test(UserAgent),
isXP : /windows nt 5.1/.test(UserAgent),
isVista : /windows nt 6.0/.test(UserAgent),
isWin7 : /windows nt 6.1/.test(UserAgent),
isWin8 : /windows nt 6.2/.test(UserAgent),
isWin81 : /windows nt 6.3/.test(UserAgent)
};
}());
[/code]

[code lang=”js”]
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {//移动终端浏览器版本信息
trident: u.indexOf(‘Trident’) > -1, //IE内核
presto: u.indexOf(‘Presto’) > -1, //opera内核
webKit: u.indexOf(‘AppleWebKit’) > -1, //苹果、谷歌内核
gecko: u.indexOf(‘Gecko’) > -1 && u.indexOf(‘KHTML’) == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf(‘Android’) > -1 || u.indexOf(‘Adr’) > -1, //android终端或者uc浏览器
iPhone: u.indexOf(‘iPhone’) > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf(‘iPad’) > -1, //是否iPad
webApp: u.indexOf(‘Safari’) == -1 //是否web应该程序,没有头部与底部
weixin: u.indexOf(‘MicroMessenger’) > -1, //是否微信
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}

if(browser.versions.mobile || browser.versions.ios || browser.versions.android ||
browser.versions.iPhone || browser.versions.iPad){
window.location = "http://m.baidu.com";
}
[/code]

3、判断是否是iOS或者Android手机移动端:

[code lang=”js”]
<script type="text/javascript">
var u = navigator.userAgent;
var isAndroid = u.indexOf(‘Android’) > -1 || u.indexOf(‘Adr’) > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
alert(‘是否是Android:’+isAndroid);
alert(‘是否是iOS:’+isiOS); </script>
[/code]

移动端开发-rem

对于手机开发,适配是一个非常麻烦的事情,大家一般都是是呀百分百或者缩放来做,但是这种方法还是会导致实际效果跟设计稿差别很大。
借鉴腾讯的做法,使用先计算当前尺寸对应设计稿的1像素比例,在rem来写尺寸大小。这个方法个人到现在发现是最好的一种
只需要按照图片或者容器在设计稿的尺寸来写,就能很完美的呈现
1、在head标签里引入下面代码
[code lang=”js” type=”js”]
//全局字体rem
(function(window, document, widSize) {
‘use strict’;
var hotcss = {};
(function() {
var viewportEl = document.querySelector(‘meta[name="viewport"]’),
dpr = window.devicePixelRatio || 1,
maxWidth = 540;

dpr = dpr >= 3 ? 3 : ( dpr >=2 ? 2 : 1 );

document.documentElement.setAttribute(‘data-dpr’, dpr);
hotcss.dpr = dpr;

document.documentElement.setAttribute(‘max-width’, maxWidth);
hotcss.maxWidth = maxWidth;

var scale = 1 / dpr,
content = ‘width=device-width, initial-scale=’ + scale + ‘, minimum-scale=’ + scale + ‘, maximum-scale=’ + scale + ‘, user-scalable=no’;

if (viewportEl) {
viewportEl.setAttribute(‘content’, content);
} else {
viewportEl = document.createElement(‘meta’);
viewportEl.setAttribute(‘name’, ‘viewport’);
viewportEl.setAttribute(‘content’, content);
document.head.appendChild(viewportEl);
}

})();
hotcss.mresize = function() {
//var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;
var clientWidth = document.documentElement.clientWidth,
clientHeight = document.documentElement.clientHeight;

//横屏
clientWidth = (clientWidth>clientHeight)? clientHeight: clientWidth;
console.log(clientWidth);
////优化pc和平板体验
if (hotcss.maxWidth && (clientWidth / hotcss.dpr > hotcss.maxWidth)) {
clientWidth = hotcss.maxWidth * hotcss.dpr;
}
console.log(clientWidth);

var htmlSize = clientWidth / widSize * 100;
htmlSize = htmlSize < 50 ? 50 : htmlSize;
document.documentElement.style.fontSize = htmlSize + ‘px’;
};

setTimeout(function() {
hotcss.mresize();
//防止某些机型怪异现象,异步再调用一次
}, 333);
//绑定resize的时候调用
hotcss.mresize();

})(window, document, 750);
[/code]
2、在css填写容器宽高时,(假设设计尺寸宽是640)直接填写图片或者设计的 尺寸值/100 + rem。(eg:图片尺寸200x100px,可以直接写width:2rem;height:1rem;)
这种方式 在不同手机下显示尺寸都是跟设计稿完美对应的,唯一需要修改的就是高度不一样,元素之间的间隔需要做修改
3、高度不一样,调整间隙可以使用媒体查询配合

移动端开发笔记

一、手机端点击时,禁止出现灰色区域的方法-webkit-tap-highlight-color:transparent;
二、移除IOS环境下的按钮的默认样式-webkit-appearance:none;
三、设置页面在浏览器全屏,meta信息里把自己标记成web应用
1、去哪儿针对UC和QQ是这样做的:
UC:
[code lang=”js”]
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
[/code]
QQ:
[code lang=”js”]
<meta name="x5-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
[/code]
2、WebApp全屏模式:伪装app,离线应用。
[code lang=”js”]
<meta name="apple-mobile-web-app-capable" content="yes" /> <!– 启用 WebApp 全屏模式 –>
[/code]
四、meta标签设置
1、隐藏状态栏/设置状态栏颜色,只有在开启WebApp全屏模式时才生效。
[code lang=”js”]
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
[/code]
2、添加到主屏后的标题
[code lang=”js”]
<meta name="apple-mobile-web-app-title" content="标题">
[/code]
3、忽略数字自动识别为电话号码
[code lang=”js”]
<meta content="telephone=no" name="format-detection" />
[/code]
4、添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载banner
[code lang=”js”]
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
[/code]
5、其他
[code lang=”js”]
<!– 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 –>
<meta name="HandheldFriendly" content="true">
<!– 微软的老式浏览器 –>
<meta name="MobileOptimized" content="320">
<!– uc强制竖屏 –>
<meta name="screen-orientation" content="portrait">
<!– QQ强制竖屏 –>
<meta name="x5-orientation" content="portrait">
<!– UC强制全屏 –>
<meta name="full-screen" content="yes">
<!– QQ强制全屏 –>
<meta name="x5-fullscreen" content="true">
<!– UC应用模式 –>
<meta name="browsermode" content="application">
<!– QQ应用模式 –>
<meta name="x5-page-mode" content="app">
<!– windows phone 点击无高光 –>
<meta name="msapplication-tap-highlight" content="no">
<!– 删除默认的苹果工具栏和菜单栏。 –>
<meta name="apple-mobile-web-app-capable" content="yes">
<!– 优先使用 IE 最新版本和 Chrome–>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!– 关于X-UA-Compatible –>
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!– 使用IE6 –>
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!– 使用IE7 –>
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!– 使用IE8 –>
<!– 浏览器内核控制 –>
<meta name="renderer" content="webkit|ie-comp|ie-stand">

<!– 禁止浏览器从本地计算机的缓存中访问页面内容 –>
<meta http-equiv="Pragma" content="no-cache">

<!– Windows 8 –>
<meta name="msapplication-TileColor" content="#000"/> <!– Windows 8 磁贴颜色 –>
<meta name="msapplication-TileImage" content="icon.png"/> <!– Windows 8 磁贴图标 –>

<!– 转码申明:用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下meta –>
<meta http-equiv="Cache-Control" content="no-siteapp" />
[/code]
五、判断设备是否支持touch事件
[code lang=”js”]
isTouch = (‘ontouchstart’ in window) || window.DocumentTouch && document instanceof DocumentTouch;
[/code]
六、*禁用复制文本
[code lang=”css”]
-webkit-user-select:none
[/code]
七、可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。
[code lang=”css”]
-webkit-font-smoothing:antialiased
[/code]
八、Javascript限制只能在微信内置浏览器打开
[code lang=”js”]
<script type="text/javascript">
// 对浏览器的UserAgent进行正则匹配,不含有微信独有标识的则为其他浏览器
var useragent = navigator.userAgent;
if (useragent.match(/MicroMessenger/i) != ‘MicroMessenger’) {
// 这里警告框会阻塞当前页面继续加载
alert(‘已禁止本次访问:您必须使用微信内置浏览器访问本页面!’);
// 以下代码是用javascript强行关闭当前页面
var opened = window.open(‘about:blank’, ‘_self’);
opened.opener = null;
opened.close();
}
</script>
[/code]
九、

jquery和zepto对应touch事件的区别

一:在jQuery下:
1.touchstart: e.originalEvent.changedTouches[0].pageX;
2.touchmove: e.originalEvent.changedTouches[0].pageX;
3.touchend: e.originalEvent.changedTouches[0].pageX;

二:在zepto下
1.touchstart: e.touches[0].pageX;
2.touchmove: e.touches[0].pageX;
3.touchend: e.changedTouches[0].pageX;

三:原生js下:

每个触摸事件被触发后,会生成一个event对象,event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表,尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表,尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成,touch对象里包含着触摸信息,主要属性如下:
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素

1.touchstart: e.changedTouches[0].pageX或e.touches[0].pageX;
2.touchmove: e.changedTouches[0].pageX或e.touches[0].pageX;
3.touchend: e.changedTouches[0].pageX;

zepto和jquery的区别

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’) * 1
zepto:$this.find(‘option’).not(function() {return !this.selected}).attr(‘data-v’) * 1
但是获取有select中含有disabled属性的元素可以用 $this.find(“option:not(:disabled)”) 因为disabled是标准属性

2-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 画了一个小三角形:

.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 、 height
jQuery: 返回 width 、 height

3-3.隐藏元素
Zepto.js: 无法获取宽高;
jQuery: 可以获取。

4.Zepto 的each 方法只能遍历 数组,不能遍历JSON对象

5.Zepto 的animate 方法参数说明 :详情点击->
zepto中animate的用法

6.zepto的jsonp callback函数名无法自定义

7.DOM 操作区别
jq代码:
(function($) {
$(function() {
var $list = $(‘

  • jQuery 插入

‘, {
id: ‘insert-by-jquery’
});
$list.appendTo($(‘body’));
});
})(window.jQuery);
jQuery 操作 ul 上的 id 不会被添加。
zepto代码:
Zepto(function($) {
var $list = $(‘

  • Zepto 插入

‘, {
id: ‘insert-by-zepto’
});
$list.appendTo($(‘body’));
});
Zepto 可以在 ul 上添加 id 。

8.事件触发区别
jq代码:
(function($) {
$(function() {
$script = $(‘