公众号问题列表
1. 软键盘遮住输入框的问题：ios键盘被挡住（fixed定位或者absolute定位）
方法1：
<script>
window.onload = function(){
var timer = null;
document.getElementById("inputtxt").onfocus = function(){
clearInterval(timer);
var index = 0;
timer = setInterval(function(){
if (index>5) {
$("body").scrollTop(1000000);
clearInterval(timer);
}
index++;
},50);
}
}
</script>方法2：
问题描述：输入框失去焦点后，样式错乱，绑定的点击事件也错乱了
只需要在页面内加入以下代码就OK了（布局使用fixed也是OK的）
document.addEventListener('focusout', function(e) {
window.scrollTo();
});2. 手机复制到剪贴板功能
----------暂无解决方案
3. android和ios旋转屏幕事件：
window.onorientationchange转屏事件，安卓不支持，window.orientation不论是横屏还是竖屏，值都为0
=========目前浏览器都支持，但是iPhone6s使用该方法获取到的高度和宽度，是旋转之前的高度和宽度
手机旋转事件兼容性问题：
A.使用（window.innerWidth和window.innerHeight）或者（$(window).width()和$(window).height()）-----安卓：获取到的值为旋转之前的值--------iphone：正确
B.使用（window.screen.width和window.screen.height）获取屏幕高度和宽度 ------安卓：旋转后值正确 ------iphone：跟旋转无关，保持不变
var isAndroid = navigator.userAgent.indexOf('Android') > -1?true:false;
var w = isAndroid?window.screen.width:$(window).width();
var h = isAndroid?window.screen.height:$(window).height();4. 打卡事件实现效果：手指按住不动，打卡区域旋转动画，手指松开，返回成功或失败效果
实现1：在touchstart事件中，调用打卡接口返回成功失败值，touchend事件中，根据成功失败状态显示相对应效果（bug: 安卓不会走touchend事件，苹果如果多次连续打卡，也会出现同样问题）
原因：由于touchstart事件中调用接口阻塞touchend事件
解决方案：在touchstart事件中，不调用打卡接口，touchend事件中，调用打卡接口
该效果实现情况：手指触摸过程中touchstart，一直兜圈圈，手指松开后touchend，动画停止，返回成功失败
Zf--tip:
应该实现效果：手机触摸过程中touchstart，一直兜圈圈，直到接口返回成功失败，手指松开后touchend，不作处理。
5. canvas绘图：引用外部的图片，会变虚
Bug问题描述：canvas引用外部的图片，图片会变虚，使用getPixelRatio方法获取手机屏幕高清度倍数。安卓等都没问题，其中6p及6sp获取到该值3后，不再进行canvas绘制。设置固定值为1没问题，设置为2没问题。
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;解决方案：设置该值为固定值2倍，canvas按2倍绘制，最后将canvas设置Style的width和height为1倍的值。
6. ios同地址不同参数返回问题：
Bug问题描述： 从A页面，改变了地址的参数值然后location.href重定向到A页面，物理键返回时，ios地址栏改变了，页面刷新了，但是POST请求入参正常，但返回的接口数据是刚重定向之后返回的接口数据。实际上，未走后台接口，日志中无记录。
使用的无效方法：A. 给ajax接口设置cache:false B. 重定向链接加入hash值 C. 给调用的post接口入参增加随机串字段
Eg: 从链接A：http://www.baidu.com/test.html?Openid=AAA 重定向到链接B：http://www.baidu.com/test.html?Openid=BBB 此时页面刷新，点击返回，POST请求接口数据是链接B接口返回的数据
7. tk加密问题：
A： GET请求加密：openid加密后可能会含有空格，此时后端无法加密成功，需要给该字段加密后，再进行一次编码
Eg： "openId="+encodeURIComponent(encrypt.encrypt(openId))
B： POST请求加密：如果有多个字段需要加密，选择多个字段联合加密，而不是分别加密，可避免openid加密后可能会含有空格的问题。并且，后端分别解密会相对耗时较长
var info = {"openId": openId,"sign": sign};
info = JSON.stringify(info);
info = encrypt.encrypt(info);
var lotteryDataPram = JSON.stringify({"reqInfo": info});C： 加密值不能太长，不然加密无法通过，报错：too long
8. 请求接口post入参问题：
A： content-type值为x-www-form-encode类型（默认）时，不需要JSON.stringify(data)转为字符串
B : content-type值为application/json类型时，需要JSON.stringify(data)转为字符串
C： 如果入参中含有key字段value值为数组类型的，{“key”: [1,2,3]}，根据需要转换成JSON.stringify(数组)转化为字符串，不然后端不能正确获取到该字段及值
9. 网页在服务器上存在，但报错404
问题描述：前端网页确定存在于服务器上，但访问该链接时却报错404 not found
问题原因：前端该文件项目名与后端文件项目名称取名一致，导致该问题
解决方案：修改前端项目名称或后端接口项目名称
10. 微信公众号内关闭本页面，返回到当前对话窗口（微信内置方法）
WeixinJSBridge.call('closeWindow');11. 监听物理键返回
解决支付成功页面点物理键返回问题，注意兼容性问题（一直停留在本页面）：
history.pushstate({},"title","url");
window.popstate=function(){
}
if(window.history&&history.pushState){
window.history.pushState({"title": "lottery","url": location.href}, "lottery", location.href);
window.onpopstate=function(){
window.history.pushState({"title": "lottery","url": location.href}, "lottery", location.href);
}
}12. iphone6微信chooseImage选择图片图片不显示
1.问题描述：
使用微信jssdk的选择图片API，chooseimage接口选择完图片之后，img图片src已赋值，但是图片不显示
2.操作机型：
iphone6 & iphone6s
3.解决方案：
将引入的jssdk版本更换成最新版本
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
替换成：
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
使用http协议应跟项目域名http协议保持一致
如果域名为https协议，则：
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
13. 微信网页字体大小显示不正常bug
1.问题描述：
微信网页的字体大小有的网页显示正常，有的显示不正常，超大
2.测试机型：
iphone6,iphone6p等苹果机型
3.解决方案：
给显示字体放大的元素加入样式：display : inline-block !important;
给使用3d的元素(transform-style: preserve-3d;)加入overflow:hidden;
14. 微信浏览器取消缓存的方法
这篇文章主要介绍了微信浏览器取消缓存的方法,本文使用meta头信息实现取消了微信浏览器的缓存,特别是在开发时会经常用到,需要的朋友可以参考下
做微信公众号和调试手机页面的时候，避免不了页面要跳转到微信浏览器打开，调试阶段，android版微信浏览器一直都默认缓存html静态资源，每次静态资源变化甚至新内容发布的时候在微信浏览器上都极有可能不能更新，很多时候要清理微信缓存才能看到效果，很是烦人。部分客户装了QQ浏览器，微信实际调用的是QQ浏览器，有时候甚至光清理微信缓存都无效，QQ浏览器的缓存也要清。
经过一番探索微信浏览器确实是在webview的上层做的缓存：就是如果请求过了这个地址，就会存在本地，之后不取线上了。
解决方案是在调试阶段或者频繁更新的页面加入以下头信息：
代码如下:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />嗯，这样微信浏览器对这个页面将会一直上线拉取了。
15. 微信页面强制返回刷新：
/*回退页面强制刷新*/
var isPageHide = false;
window.addEventListener('pageshow', function () {
if (isPageHide) {
window.location.reload();
}
});
window.addEventListener('pagehide', function () {
isPageHide = true;
});
16. 安卓手机点击img图片回复放大浏览图片问题：
解决方案：
1. 使用background背景图片替换img标签图片
2. Click事件中加入return false; 阻止默认事件
17. 判断是否是微信浏览器
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
微信jssdk问题：
18. invalid url domain： 设置js接口安全域名
A. 获取openid的appid和appsecret，与微信支付时使用的appid和appsecret必须保持一致。
B. 获取openid使用appid和appsecret获取，获取签名可以使用appid和appsecret获取，也可以使用appid和tocken获取。
19. 微信登录一直处在登录状态
是因为没有获取到openid，可能原因是appid和appsecret设置不对。