Índice
1. Etapas de login autorizadas pelo WeChat
Em segundo lugar, solicitações de ajax, às vezes haverá solicitações repetidas.
3. Determine se o terminal móvel é um telefone Android ou um telefone Apple.
4. Problema de arrastar a página
5. No navegador WeChat, a caixa de alerta não exibe o domínio
Seis, operador ternário (operador ternário)
1. Etapas de login autorizadas pelo WeChat
1. O front-end obtém o código na url
a. Se não houver valor de código no URL, visite um link específico do WeChat para obter o código e gere um endereço de URL contendo o valor do código
// 公众号的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. Como obter o código
//使用正则截取地址栏里的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. O backend recebe o código enviado pelo frontend para o backend, obtém o access_token de acordo com o código e, em seguida, obtém as informações do usuário de acordo com o access_token obtido e retorna os dados correspondentes (openid, apelido do WeChat) para o frontend.
Em segundo lugar, solicitações de ajax, às vezes haverá solicitações repetidas.
Solução:
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)
}
}
})
}3. Determine se o terminal móvel é um telefone Android ou um telefone Apple.
1. Apresente recursos
<script src="https://cdn.bootcdn.net/ajax/libs/mobile-detect/1.4.5/mobile-detect-modernizr.js"></script>2. ligue
//获取手机型号--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
}4. Problema de arrastar a página
a.Apresentar ajax
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> b. usar
//页面禁止拖动、滚动
$("html,body").css("overflow", "hidden").css("height", "100%")
document.body.addEventListener('touchmove', self.welcomeShowedListener, false);5. No navegador WeChat, a caixa de alerta não exibe o domínio
(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)
}
}
})()Seis, operador ternário (operador ternário)
运算符的符号是： ? :
语法：
条件表达式 ? 表达式1: 表达式0;
结果：
当条件表达式为true则选择表达式1,反之false则选择表达式0Nota: Pode ser mais útil usá-lo no front end. Em alguns lugares, o código será mais conciso e haverá menos definições de variáveis.
<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>