前端开发过程中遇到的坑

持续更新……

HTML

Button

• button 在聚焦状态时，键盘输入 enter 或者 space 会触发它的 click 事件。具体可以看：灵异事件——没点击按钮却触发了click事件

微信JS-SDK相关

鉴权

• invalid url domain

  • 出现这个问题基本可以判定是配置不对
  1. 检查JS接口安全域名：是否一致。不要带协议（http://或https://），并去掉#及以后的数据

  

  2. txt 认证文件也放到根目录

  3. 检查代码里的appid和公众号后台的id是否一致

开放标签

wx-open-launch-weapp

只尝试过 跳转小程序：wx-open-launch-weapp 官方文档

• 按照文档的步骤来，需要鉴权，可通过 debug:true 调试鉴权
• 解决Vue警告

  Vue.config.ignoredElements = ['wx-open-launch-weapp']
  

1. 一定要在微信上打开才能看到开放标签
2. 经过多次尝试，开放标签里面的盒子宽度100%可以成功，但必须指定实际高度，百分比无效，而且如官方所说，不要用布局定位等等样式，十分受限。我自己的解决办法是：具体想要的样式效果等等全都在一个父盒子里完成，父盒子里面用等宽高的透明weapp盖住自己
   1. 先按正常方式写出具体样式父盒子A（position:relative相对定位）
   2. 在A里面写一个weapp盖住A盒子，宽高都是A的100%（position:absolute绝对定位， z-index:10大于A的层级即可， overflow:hidden溢出隐藏）
   3. weapp里面写一个div（宽100%，高度只要超过A的实际高度即可会溢出隐藏，background:transparent）

   • 下面是核心代码：图二是weapp的样式