项目之微信授权、ajax重复、移动端页面拖动、alert弹框等问题大合集

目录

一、微信授权登录步骤

二、ajax请求，有时候会出现重复请求的情况。

三、判断移动端是安卓手机还是苹果。

四、页面拖动问题

五、微信浏览器中，aler弹框不显示域

六、三元运算符（三目运算符）

一、微信授权登录步骤

1.前端获取url里面的code

a.如果url里面没有code值，访问特定微信链接来获取code，然后生成一个含有code值的url地址

    // 公众号的AppId
    const AppId = this.appid 
	// 获取当前的页面路径，这就是回调的地址 hash记得转码
	const local = encodeURIComponent(window.location.href);
    //访问的特定的微信链接，生成code
	const href =`https://open.weixin.qq.com/connect/oauth2/authorize?
				 appid=${AppId}&
				 redirect_uri=${local}&
				 response_type=code&
				 scope=snsapi_userinfo&
				 state=1#wechat_redirect`
			     window.location.href = href

b.获取code的方法

//使用正则截取地址栏里的code
//函数方法
function getUrlParam (name) {
    //构造一个含有目标参数的正则表达式对象
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
    //匹配目标参数  
    var r = window.location.search.substr(1).match(reg)
    //返回参数值
    if (r != null) return unescape(r[2]); return null              
};

//调用
let code = this.getUrlParam('code') // 截取url中的code
console.log('code',code)

//使用split截取地址栏里的code
let hrefs = window.location.href.split('?')
hrefs.forEach(item =>{
	  if(item.split('=')[0] == 'code'){
		 this.getOpenId(item.split('=')[1])
	  }else{
		 console.log('暂无code');
      }
})

2.后端接收前端传给后端的code，根据code获取access_token，然后在根据获取的access_token获取用户的信息，并给前端返回对应的数据（openid，微信昵称）。

二、ajax请求，有时候会出现重复请求的情况。

解决方法：

function prevent_reloading () {
      var pendingRequests = {}
      jQuery.ajaxPrefilter(function (options, originalOptions, jqXHR) {
      var key = options.url
        
      if (!pendingRequests[key]) {
          pendingRequests[key] = jqXHR
      } else {
          //jqXHR.abort();    //放弃后触发的提交
          pendingRequests[key].abort()   // 放弃先触发的提交
      }
        
      var complete = options.complete
      options.complete = function (jqXHR, textStatus) {
          pendingRequests[key] = null
          if (jQuery.isFunction(complete)) {
            complete.apply(this, arguments)
          }
      }
   })
}

三、判断移动端是安卓手机还是苹果。

1.引入资源

<script src="https://cdn.bootcdn.net/ajax/libs/mobile-detect/1.4.5/mobile-detect-modernizr.js"></script>

2.调用

//获取手机型号--ios，Android
function isAndroidOrIOS () {
    var u = navigator.userAgent
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
    if (isAndroid) {
        return "android"
    }
    if (isiOS) {
        return "ios"
    }
    return false
}

四、页面拖动问题

a.引入ajax

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> 

b.使用

//页面禁止拖动、滚动
$("html,body").css("overflow", "hidden").css("height", "100%")
document.body.addEventListener('touchmove', self.welcomeShowedListener, false);

五、微信浏览器中，aler弹框不显示域

(function () {
    //先判断是否为微信浏览器
    var ua = window.navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        //重写alert方法，alert()方法重写，不能传多余参数
        window.alert = function (name) {
           var iframe = document.createElement("IFRAME")
           iframe.style.display = "none"
           iframe.setAttribute("src", 'data:text/plain')
           document.documentElement.appendChild(iframe)
           window.frames[0].window.alert(name)
           iframe.parentNode.removeChild(iframe)
        }
    }
})()

六、三元运算符（三目运算符）

运算符的符号是： ? :

语法：

     条件表达式 ? 表达式1: 表达式0;

结果：

   当条件表达式为true则选择表达式1,反之false则选择表达式0

注：在前端使用或许更有妙用，有的地方会让代码变得更加简洁，少一些变量的定义等。

<td style="text-align: center !important;">
    <i th:class="${res.hide eq '0'}?'fa fa-eye':'fa fa-eye-slash'"
       th:title="${res.hide eq '0'}?'显示':'隐藏'">
    </i>
</td>