h5技巧 · yzxwn

h5技巧

• 小结
• 手机端横屏
• 微信QQ授权

小结

• z-index设为负数时，在ios上可能会被默认为0的body元素遮挡
• 禁止QQ浏览器的默认下拉事件，和手动缩放页面功能

  document.addEventListener('touchmove',
  (evt) => {
   if (evt.cancelable) {// 判断默认行为是否可以被禁用
       if (!evt.defaultPrevented) {// 判断默认行为是否已经被禁用
           evt.preventDefault();// 禁用默认行为
       }
   }
  }
  , false);
  

• QQ浏览器调用键盘时会触发window.onresize事件，其他浏览器不会
• QQ内置浏览器不能自动执行window.open()事件
• 移动端输入框

手机端横屏

原文

const screen = () => {
    const width = document.documentElement.clientWidth;
    const height = document.documentElement.clientHeight;
    const doc = document.getElementsByClassName("watch")[0];
    if(width>height){
        doc.style.width = width + "px";
        doc.style.height = height + "px";
        doc.style.top = '0px';
        doc.style.left = '0px';
        doc.style.transform = 'rotate(0)';
    }else{
        doc.style.width = height + "px";
        doc.style.height = width + 大专栏  h5技巧 · yzxwn class="hljs-string">"px";
        doc.style.top = (height - width) / 2 + 'px';
        doc.style.left = 0 - (height - width) / 2 + 'px';
        doc.style.transform = 'rotate(90deg)';
    }
}

screen();
window.onresize=screen

扩展：竖屏显示横屏内容

if(width>height){
    doc.style.transform = `scale(1,1)`;
    doc.style.top = '0px';
    doc.style.left = '0px';
    doc.style.width = "100%";
    doc.style.height = "100%";
}else{
    doc.style.width = height / width * width + "px";
    doc.style.height = width / height * height + "px";
    doc.style.transform = `scale(${width / height},${width / height})`;
    doc.style.top = (width - height) / 2 * (width / height) + 'px';
    doc.style.left = (width - height) / 2 + 'px';
}

微信QQ授权

• 微信开发者工具
• 微信开放平台
• 微信公众平台-测试账号
• 微信授权-文档
• 原文
• 腾讯开放平台
• QQ互联-文档
• JS SDK演示
• 原文

  前端不支持跨域，暴露appid和appkey给前端不安全
  [yahoo代理](https://www.cnblogs.com/jinzhenzong/p/9035809.html)
  后台实现：重定向请求后台get接口，decodeURIComponent解码昵称