關(guān)于前端公眾號開發(fā)的零碎知識點(diǎn)集合

1.關(guān)于蘋果手機(jī)和安卓手機(jī)的判斷方法

?var u= navigator.userAgent;

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //iOS終端

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //安卓終端

2.關(guān)于蘋果手機(jī)全面屏判斷方法

var rate= window.screen.height/ window.screen.width; ?

?var limit=? window.screen.height== window.screen.availHeight? 1.8 : 1.65;// 臨界判斷值

?var result = rate> limit ? '是全面屏'：‘不是全面屏’;

3.關(guān)于是否是用微信打開前端頁面判斷

function isWeiXin() {

? ? var ua = window.navigator.userAgent.toLowerCase();

? // 不加window部分Android機(jī)會(huì)顯示不了提示圖华畏，即判斷不了是否是微信

? ? if (ua.match(/MicroMessenger/i) == 'micromessenger') {

? ? ? ? return true;

? ? } else {

? ? ? ? return false;

? ? }

}

4.flex布局在iphone 6上不兼容的問題

display:flex → display:-webkit-flex

justify-content:space-between;→-webkit-justify-content:space-between

align-items:center;→-webkit-align-items:center

flex-direction:column;→ webkit-flex-direction:column;

flex-wrap:wrap;→ webkit-flex-wrap:wrap;

5.蘋果手機(jī)公眾號輸入框焦點(diǎn)問題

@onblur="loseFocus"

function ?loseFocus() {

? ? ? ? ? ? ? ? ? ? var ua= navigator.userAgent.toLowerCase();

? ? ? ? ? ? ? ? ? ? var u= navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

? ? ? ? ? ? ? ? ? ? if(ua.match(/MicroMessenger/i)== 'micromessenger' && !!u) {

? ? ? ? ? ? ? ? ? ? ? ? var currentPosition, timer;

? ? ? ? ? ? ? ? ? ? ? ? var speed= 0;//頁面滾動(dòng)距離

? ? ? ? ? ? ? ? ? ? ? ? timer = setInterval(function() {

? ? ? ? ? ? ? ? ? ? ? ? ? ? currentPosition= document.documentElement.scrollTop|| document.body.scrollTop;

? ? ? ? ? ? ? ? ? ? ? ? ? ? currentPosition-= speed;

? ? ? ? ? ? ? ? ? ? ? ? ? ? window.scrollTo(0, currentPosition);//頁面向上滾動(dòng)

? ? ? ? ? ? ? ? ? ? ? ? ? ? currentPosition += speed; //speed變量

? ? ? ? ? ? ? ? ? ? ? ? ? ? window.scrollTo(0, currentPosition);//頁面向下滾動(dòng)

? ? ? ? ? ? ? ? ? ? ? ? ? ? clearInterval(timer);

? ? ? ? ? ? ? ? ? ? ? ? },1);

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

6.利用js動(dòng)態(tài)添加css弓候，可參照2贸典，因?yàn)樵谔O果公眾號训柴，全面屏和非全面屏衙传，同樣的css顯示字體實(shí)際大小不一樣腕铸，所以按照需要加載不同的css

?var head= document.head|| document.getElementsByTagName('head')[0];

var style = document.createElement('style');

style.type= 'text/css';

head.appendChild(style);

?style.innerHTML= ".cell-bottom {font-size: 0.14rem;}.cell-bottom .time {font-size: 0.16rem;}";

7.safari瀏覽器（蘋果手機(jī)）處理字符串轉(zhuǎn)時(shí)間兼容問題

2020-04-01 00:00:00 safari只識別‘/’

item.endDate.replace(/\-/g, "/")

8.文字在蘋果手機(jī)公眾號上下不居中問題实辑，及l(fā)ine-height 問題

在公眾號開發(fā)中慎用不从，慎用浊洞，慎用?line-height讓文字上下居中牵敷，因?yàn)樵谔O果公眾號上，文字會(huì)自動(dòng)偏下法希，蘋果公眾號會(huì)自動(dòng)為元素添加padding

解決方法枷餐，不設(shè)置有背景色的標(biāo)簽的高度，用padding來達(dá)到設(shè)置高度的目的（非常重要）

9.margin padding 問題

父標(biāo)簽中第一個(gè)子標(biāo)簽設(shè)置margin-top 不起作用苫亦，這個(gè)margin-top的值會(huì)自動(dòng)轉(zhuǎn)化為父標(biāo)簽的margin-top,此時(shí)用父標(biāo)簽的padding代替

10.按鈕中放圖片問題

11.設(shè)置padding和margin均為0的情況下毛肋，標(biāo)簽之間仍有空格問題

代碼換行，編輯器空格問題

12.微信公眾號開發(fā)js文檔

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3

關(guān)閉瀏覽器方法

? ? ? ? ? document.addEventListener('WeixinJSBridgeReady',function(){ WeixinJSBridge.call('closeWindow'); },false);

? ? ? ? ? WeixinJSBridge.call('closeWindow');

13.公眾號和瀏覽器返回上個(gè)界面問題

?history.pushState(null,null,document.URL);

?window.addEventListener('popstate',function () {history.pushState(null,null,document.URL); });

window.addEventListener("popstate",function(e) {location.href="test.html"},false); 接收事件

14.關(guān)于通用的上中下布局著觉，上面高度固定村生，下面內(nèi)容自動(dòng)填充，中間隨上下位置改動(dòng)饼丘，內(nèi)容多的情況滑動(dòng)

* {margin: 0;padding: 0;}html {height: 100%;}body {height: 100%;}

.bodyPage {height: 100%;display: flex;flex-direction: column;}

.head {height: 100px;background: green;}

.content {flex: 1;margin: 20px 0;background:lightblue;overflow: scroll}

.foot {background: blue;margin-bottom: 20px;}

? <div class="head"></div>

? <div class="content"></div>

? <div class="foot">阻止默認(rèn)的處理方式阻止默認(rèn)的處理方式</div>

</div>

15.隱藏公眾號右上角分享按鈕

function onBridgeReady() {

? ? ? ? ? ? WeixinJSBridge.call('hideOptionMenu');

? ? ? ? }

? ? ? ? if (typeof WeixinJSBridge== "undefined") {

? ? ? ? ? ? if (document.addEventListener) {

? ? ? ? ? ? ? ? document.addEventListener('WeixinJSBridgeReady', onBridgeReady,false);

? ? ? ? ? ? }else if (document.attachEvent) {

? ? ? ? ? ? ? ? document.attachEvent('WeixinJSBridgeReady', onBridgeReady);

? ? ? ? ? ? ? ? document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);

? ? ? ? ? ? }

? ? ? ? }else {

? ? ? ? ? ? onBridgeReady();

? ? ? ? }

16.自定義分享和調(diào)用微信的功能

1.文檔鏈接https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3

2.首先需要配置趁桃，配置文件檢測鏈接?http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

3.配置簽名生成步驟 accesstoken--->jsapi_ticket----->通過微信提供的后臺代碼

4.獲取accesstoken鏈接：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + wappid + "&secret=" + secret

5.獲取jsapi_ticket鏈接：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

17.用戶信息獲取

第一步：用戶同意授權(quán)，獲取code

第二步：通過code換取網(wǎng)頁授權(quán)access_token

第三步：刷新access_token（如果需要）

第四步：拉取用戶信息(需scope為?snsapi_userinfo)

18。全面解決Html頁面緩存的問題?鏈接：https://www.cnblogs.com/gluncle/p/9680520.html

html?

js和css