前端知识杂点（二）

该文章主要记录在工作中经常使用的小知识点、注意点、遇到的小问题

ios cookie保存用户名保存不进去

原因：因为ios不能保存中文字符的cookie
决方法：使用encodeURI(URIstring)、decodeURI(URIstring)编码解码

mescroll进去之后、ios其他界面就不能滑动了

原因：配置 up 的 isBounce 为 false 之后, 会禁止window的touchmove 事件,从而阻止 iOS 的回弹效果
如果你希望 mescroll之外的某个div 可以滑动,则可为需要滑动的div加入mescroll-touch的样式即可

砍价商城前台

用户进入后一直按返回,最后后台报code used错误

问题：用户第一次进入的是login页面，授权后页面会携带code，当用户一直点击返回，会返回到携带code的页面，
此时code应该是已经被使用过了，所以后台会报 code used 的错误。前台获取到的数据也是错误的。

解决方法：
在进入login页面之前 判断点击的是什么按钮 如果点击的是返回按钮 那就让他退出这个h5页面。

ios中第一次进入链接，链接地址不变

问题：微信分享和支付的时候 需要将地址传给后台 然后执行wxInit，但是在ios的手机中，由于进入网址后，链接地址是不变的，
所以传给后台的地址返回的config的信息不匹配，会出现用户身份校验失败的提示。

解决方法：在ios用户第一次进入网站的时候，在session中记录下第一次进入的网址，然后再分享的页面如果是ios手机，
那么将session里面记录的第一次记录的网址 传给后台。

解决方法：在app.vue加入此段代码：
const u = navigator.userAgent;
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isiOS) {
  let tlUrl_token = sessionStorage.getItem('tlUrl_token')
if(tlUrl_token){
  window.sessionStorage.removeItem("tlUrl_token");
  window.sessionStorage.setItem('tlUrl_token',window.location.href.split('#')[0])
}
else{
  window.sessionStorage.setItem('tlUrl_token',window.location.href.split('#')[0])
} 
  //window.sessionStorage.setItem('tlUrl_token',window.location.href.split('#')[0])
}

在ios上面，input很难聚焦，并且点击多次会卡住

问题：ios的手机上面，点击绑定手机号等信息的时候，input很难聚焦，点击多次就会卡住
解决方法:在main.js加此段代码

代码：
FastClick.prototype.focus = function (targetElement) {
  let length;
  if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
    length = targetElement.value.length;
    targetElement.focus();
    targetElement.setSelectionRange(length, length);
  } else {
    targetElement.focus();
  }
}

解决微信公众平台绑定域名报错

问题：在微信公众平台绑定域名之前需下载指定文件，将下载的文件放在对应的项目文件中时，
npm run dev不能找到指定文件。需在webpack.base.conf文件中写入以下代码


代码：
//引入插件
const CopyWebpackPlugin = require('copy-webpack-plugin')

//在module.exports 中加入以下代码
plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../MP_verify_vv7biECfxURx5yBW.txt'),
        to: path.resolve(__dirname, '../dist/MP_verify_vv7biECfxURx5yBW.txt'),
      },
    ]),
],

解决按钮禁止连点（函数防抖）

// 函数防抖（当一个动作连续触发，只执行最后一次）
export default function debounce(method, delay) {
    var timer = null;
    return function() {
      var context = this,
      args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function() {
        method.apply(context, args);
      }, delay);
    }
  }
  
//引入JS
import debounce from './../assets/js/antishake'

//在某个点击的方法中使用
postOrder:debounce(function(orderId){}}

使用v-if隐藏按钮某个组件的按钮时，隐藏延迟

在需要隐藏的元素上使用transition
vue提供了transition的封装组件，当删除或组件元素时，vue会做以下处理
a. 自动嗅探目标元素是否应用了css过渡或动画，如果是会在恰当的时机添加删除css类名
b. 如果过渡组件提供了js钩子函数，这些钩子函数会在恰当的时机被调用
c. 如果没有找到js钩子函数或没检测到css动画，DOM操作在下一帧立即执行

element el-menu导航刷新时高亮消失

a. element-ui提供:default-active='activeIndex'来设置默认导航高亮
b. 刷新页面时获取路由地址，让activeIndex与index一致
c. 写一个路由地址对应导航index的配置文件，示例如下：

来源：CSDN

作者：根本停不下的龙

链接：https://blog.csdn.net/weixin_43264322/article/details/103925786

标签

ios

sessionstorage