微信活动页开发中的遇到的坑

1、微信网页登录,关于切换微信账户区分账户信息的cookie与localStorage

存储在localStorage中的数据在切换用户后发现不会清理,之前的登录信息还是保存(不过微信ios端3月后发布的WKWebview中切换用户会清除cookie和localStorage),静等发布,目前必须得依赖cookie。

2、localStorage问题,发现部分用户localStorage空间占满,不得不做了个坏事(上线阶段发现有些用户无法登录,我这边是根据localStorage区分用户是否登录授权过)

try{

    window.localStorage.setItem(key, user.openid ? user : '');

}catch(e) {

    //localStorage 超限制 QuotaExceededError

    window.localStorage.clear();

    window.localStorage.setItem(key, user.openid ? user) : '');

}

3、touchstart、touchmove、touchend事件导致的input、select等本身自带事件无法触发

 touchmove中event.preventDefault(),然后需要在touch事件中根据当前event区分Element类型适时event.stopPropagation()来阻止事件冒泡

4、touch事件导致的click无效

我这边最终是用touchend去处理的,这时候最好是在顶级touch中根据event记录的当前clientX/clientY去做判断,touchstart、touchend前后clientX/clientY相同才去触发事

5、touch事件导致默认滚动(overflow-y:auto)失效

这个时候需要用对此Element添加下touch事件,在touchstart/touchmove/touchend中添加event.stopPropagation()阻止冒泡即可

6、移动端滚动卡顿无惯性,css需要做下处理

overflow-scrolling:touch;

-webkit-overflow-scrolling:touch;

-webkit-text-size-adjust:none;

7、ios中input没有焦点光标,输入一次后便会失去焦点无法再次输入,这里是因为css中设置了user-select:none导致的,css特别处理下

input{

      -webkit-user-select:auto;

}


感觉写个简单的活动页,写得巨累,求大侠指正~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 基于html5的移动web页面搭建技术总结 1.技术要点 1.1面向不同尺寸的手机屏幕,页面布局适配问题。 网页的...
    敲代码的张阅读 5,408评论 0 3
  • 基于html5的移动web页面搭建技术总结1.技术要点1.1面向不同尺寸的手机屏幕,页面布局适配问题。 网页的he...
    敲代码的张阅读 2,701评论 0 0
  • AMD 和 CMD 的区别有哪些?AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。CMD 是 ...
    竿牍阅读 3,989评论 0 1
  • 常见试题 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-h...
    他大舅啊阅读 7,272评论 1 5
  • 这个夜晚 来自各个方向的几头怒吼的野兽 如泥流洪水般来势汹汹 以不可阻挡的强烈的气焰 吞噬了我 洪流四散,天光惨淡...
    迟钝的琥珀阅读 1,769评论 1 0

友情链接更多精彩内容