目录
一、微信授权登录步骤
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>