关于前端公众号开发的零碎知识点集合

1.关于苹果手机和安卓手机的判断方法

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.关于苹果手机全面屏判断方法

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.关于是否是用微信打开前端页面判断

function isWeiXin() {

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

// 不加window部分Android机会显示不了提示图，即判断不了是否是微信

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.苹果手机公众号输入框焦点问题

@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;//页面滚动距离

timer = setInterval(function() {

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

currentPosition-= speed;

window.scrollTo(0, currentPosition);//页面向上滚动

currentPosition += speed; //speed变量

window.scrollTo(0, currentPosition);//页面向下滚动

clearInterval(timer);

},1);

}

6.利用js动态添加css，可参照2，因为在苹果公众号，全面屏和非全面屏，同样的css显示字体实际大小不一样，所以按照需要加载不同的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浏览器（苹果手机）处理字符串转时间兼容问题

2020-04-01 00:00:00 safari只识别‘/’

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

8.文字在苹果手机公众号上下不居中问题，及line-height 问题

在公众号开发中慎用，慎用，慎用 line-height让文字上下居中，因为在苹果公众号上，文字会自动偏下，苹果公众号会自动为元素添加padding

解决方法，不设置有背景色的标签的高度，用padding来达到设置高度的目的（非常重要）

9.margin padding 问题

父标签中第一个子标签设置margin-top 不起作用，这个margin-top的值会自动转化为父标签的margin-top,此时用父标签的padding代替

10.按钮中放图片问题

11.设置padding和margin均为0的情况下，标签之间仍有空格问题

代码换行，编辑器空格问题

12.微信公众号开发js文档

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

关闭浏览器方法

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

WeixinJSBridge.call('closeWindow');

13.公众号和浏览器返回上个界面问题

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.关于通用的上中下布局，上面高度固定，下面内容自动填充，中间随上下位置改动，内容多的情况滑动

* {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="foot">阻止默认的处理方式阻止默认的处理方式</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.自定义分享和调用微信的功能

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.用户信息获取

第一步：用户同意授权，获取code

第二步：通过code换取网页授权access_token

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

第四步：拉取用户信息(需scope为 snsapi_userinfo)

18。全面解决Html页面缓存的问题链接：https://www.cnblogs.com/gluncle/p/9680520.html

html

js和css