移动端微信公众号开发中问题记录及解决方案

1. 关于字体大小、图片大小、块元素大小的确定，目前一种方法，使用rem，rem的计算方式

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10.8 + 'px';

其中10.8是设计图的大小除以100，这样就可以直接用设计图中的大小除以100的值。

px, em, 和rem的区别:

a. px是相对于显示器屏幕分辨率而言的。

b. em是相对于对象内文本的字体尺寸，如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，默认的是16px。以最近的有设置字体大小的父级为准。如果遇到一个代码块里有很多字体的，这种方式就会有局限性，比如

<!DOCTYPE html>

<html>

<head>

<style>

body{

font-size: 62.5%;

}

.parent{

font-size: 1.2em;

}

.child01{

font-size: 1.2em;

}

.child001{

font-size: 1.2em;

}

</style>

</head>

<body>

<div class="child001">啦啦啦啦啦啦</div>

</div>

<div class="child02"><span>我们都是好孩子</span></div>

</div>

</body>

</html>

中，child001中字体的大小就比span中的大很多，它是根据父级来的，但是父级也有父级，这样它的字体大小就是1.2＊1.2＊1.2*10, 而span就是1.2＊10，所以em是有局限性的，对于复杂的嵌套关系会变得更加复杂。

c. rem是css3新增的一个相对单位，它和em的区别是它只相对于根元素，这里的根元素指的是html，如果适应不同的分辨率的话，需要知道一个基准的分辨率，如图片是根据1080来做的

对于是1080还是10.8这个自己定就行了，因为这个决定内部的font-size和height等的值的大小。

iphone中的分辨率，pt和px，pt是指逻辑分辨率，国际单位，px是物理分辨率，像素点为单位，是2倍和3倍的关系，微信的小程序用rpx其实和我们项目中rem的计算类似，以iphone6的750px为标准

而小程序中的css中的px是指逻辑分辨率

2. box-sizing: border-box/content-box

当元素设置这个属性后，content-box表示设置的width和height就是内容的width和height，不包括padding，border。border-box表示设置的width和height包括content padding border。

3. border-color 设置为transparent不起作用。解决方案待补充

4. display:inline-block问题，会有上下左右间隙问题，需要子集设置float, 还有vertical-align:top，然后父级清除浮动，父级设置字体font-size:0

5. 在加border-radius时，android会有背景溢出的问题，需要加上

-webkit-background-clip: padding-box;-moz-background-clip: padding-box;background-clip: padding-box;以上代码，避免溢出

6.//ios 中动态修改title不起作用，需要用hack

document.title = res.result.labelName;var $body = $("body");//hack在微信等webview中无法修改document.title的情况var $iframe = $('<iframe src="data:images/heat_fire.png"></iframe>').on('load', function(){setTimeout(function(){$iframe.off('load').remove();},0);}).appendTo($body);

7. <pre>强制换行：

pre{padding: 0;margin: 0;color: inherit;

border: none;white-space: pre-wrap;word-wrap: break-word;}

8.遵循标准，内联元素不要包含块级元素，如果有问题最好设置height和line-height

10. 上传图片的展示，即预览文件流

<div class="btn pull-left" style="position: relative;"><input class="file1" style=" position: absolute; top: 0; left:0; display:block; width:100%; height:100%; opacity:0;" type="file" name='subject_share_pic' /><button type="button" class="fileBtn btn btn-primary">选择文件</button></div>

<div id="fileName" style="margin-top:15px;">{$findSubject.share_pic_name}</div>

<div class="pull-left" style=" margin-top: 15px; position: relative;"><div class="thumb" style="width:200px; height:200px;"><img id="card_img" style="width:100%; height: 100%; position: absolute; top: 0; left:0; z-index: 99; background-size: cover;" /><img style="width:100%; height: 100%; display: block;" src="{$findSubject.share_pic}" alt=""><div></div>

$(".file1").on("change", function(e) {var file = e.target.files[0];var reader = new FileReader();$("#fileName").html(e.target.files[0].name);reader.onload = function(e) {document.getElementById("card_img").style.backgroundImage = "url(" + e.target.result + ")";};reader.readAsDataURL(file);});

window.URL方式<script type="text/javascript">/*** 从 file 域获取 本地图片 url*/function getFileUrl(sourceId) {var url;if (navigator.userAgent.indexOf("MSIE")>=1) { // IEurl = document.getElementById(sourceId).value;} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefoxurl = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chromeurl = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));}return url;}

/*** 将本地图片 显示到浏览器上*/function preImg(sourceId, targetId) {var url = getFileUrl(sourceId);var imgPre = document.getElementById(targetId);imgPre.src = url;}</script></head><body><form action=""><input type="file" name="imgOne" id="imgOne" οnchange="preImg(this.id,'imgPre');" /><img id="imgPre" src="" width="300px" height="300px" style="display: block;" /></form></body>

11.微信ios中添加了浏览记录，页面加载完成后才能执行滚动，但是如果都是图片并且页面很长的话，会有加载不出来的问题，可以通过改变背景色来解决，或是其他的css样式，只要有改变就会解决12.嵌入app端的html页面的跳转，需要协商怎么实现，目前是ios和android不同，android是直接使用的方法，ios用href地址或是trigger a 的click事件。a如果没有click事件，则不能trigger

13. z-index在iOS中严格遵循层级结构，fixed在iOS中也有问题，需要将fixed的元素放置到body元素里，或父级不动的元素上

14. 这个不是算移动端的，对于登录、注册、忘记密码中chrome如果记住密码了，则注册和忘记密码时也会有自动填充，如果避免的话，需要设置一个高度为0的密码框，并且不能是hidden的密码框

　15. iphone safari不兼容css的active，给a标签添加了active，点击没有效果。结果办法是

<body ontouchstart="" onmouseover="">

        </body>这样就可以了

16. android系统中微信浏览器的bug，当一个链接被重复点击的时候，浏览器会阻止，它会认为你是恶意的重复点击，而对于用户来说可能行为是正常的，所以避免的办法是在链接上加上随机数，比如这样

if ($(event.target).attr("href").indexOf('tel:') == -1){
event.preventDefault();
location.href = $(event.target).attr("href") + '&v=' + Math.floor(Math.random()*100+2);
}

经测试，可以解决问题

17.现在微信中调整字体的设置，但是目前我们做的不管是图片还是文字都会放大或缩小，而不是想要达到的效果，但是其他的公司貌似已经实现了，这个的解决办法是，将body的width改成百分比的，其他的大的布局也改成百分比，这样就不会有问题了，哪怕是rem为单位的

18.按钮透明度的问题，如果有disabled属性，则会根据父级的透明度来展示，无论按钮本身是否设置了不透明，所以这个需要改变方式，不用disabled属性

19.css3中placeholder的字体和颜色：

　　input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

　　color: #666;

　　}

　　input:-moz-placeholder, textarea:-moz-placeholder {

　　color:#666;

　　}

　　input::-moz-placeholder, textarea::-moz-placeholder {

　　color:#666;

　　}

　　input:-ms-input-placeholder, textarea:-ms-input-placeholder {

　　color:#666;

　　}

20.实现多行的...

//display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

//-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
//text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

21. 关于时间的获取，Safari和其他浏览器的实现方式不同，比如我获取某一天的

new Date('2018, 4, 19'), 这个在Chrome浏览器上运行ok，在Safari上获取不到日期，必须要

new Date('2018/4/19')，这样才能获取，这么写在Chrome上也能获取，所以规范是这么写。

22. 微信识别二维码，不能使用背景图片，将图片直接放到页面上就可以。如果页面中有两个二维码的话，要离得远点。

转载于:https://www.cnblogs.com/wenwenli/p/gongzhonghao_issue.html

移动端微信公众号开发中问题记录及解决方案相关推荐

微信vue路由跳转兼容_Vue微信公众号开发踩坑记录
需求微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能现状及难点采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中 ...
移动端---微信公众号开发
微信公众号开发----官网链接公众账号开发 https://mp.weixin.qq.com/ 服务号服务号提供的可开发的功能更多,每个月只能推送4条消息,服务号只能是企业或者组织进行申请订阅号 ...
微信公众号开发中的一些设置和遇到的问题
1.微信公众号开发人员设置 2.回调地址域名配置正式账号: 测试账号: 可能遇到的问题: 3.设置ip白名单利用php向微信发送请求获取openid的时候,打印显示没有返回在网上查了一些资料,基 ...
微信公众号开发中遇到的问题——支付（二）
第一次开发微信公众号,也是第一次接触微信公众号的支付,我使用的是jssdk,用h5页面调用的支付,后台使用的是java.首先声明,我不是一个愤世嫉俗的人,也不喜欢吐槽,我认为别人提供接口就已经很不错了 ...
微信公众号开发中，获取用户资料的两种方式
2019独角兽企业重金招聘Python工程师标准>>> 微信公众号的开发主要是在服务号环境下进行,订阅号是拿不到用户的资料的,因此,下文的讨论都基于微信服务号. 微信公众号的两个ac ...
微信公众号开发中分享功能分享微信朋友圈/微信好友
微信公众号中经常遇到的问题就是分享链接到微信朋友圈微信好友一类的需求. 下边走一下需要操作的流程 1.首先再项目中(一般就放到自己的公共文件中引入即可,vue中引入到index.html中)引入微信 ...
微信公众号开发中关于cookie的问题
最近在做的一个项目中使用到了微信公众号,在公众号中打开的页面中需要使用到cookie,这样方便两个页面之间的传值,但是发现页面跳转时候cookie已经过期.百思不得其解,浏览器中测试正常的,到了微信中 ...
微信开发者和其他服务器区别,求教微信公众号开发中两种认证技术的区别？
本人对微信开发中2个认证方式有些不解,求各位大佬给解释一番. 众所周知,在微信开发者进行开发时,有两个角色和两个场景存在,我分别描述如下: 第一个场景:微信服务器------>我的服务器. 在我 ...
关于微信公众号开发中扫码关注和关注之后继续扫码的不同点
2019独角兽企业重金招聘Python工程师标准>>> 开发微信商城,当遇到需要绑定上下级关系的时候,会通过扫码的方式关注公众号,但是如果不想做这个人的下级,后台添加解绑功能,继续扫 ...

移动端微信公众号开发中问题记录及解决方案

移动端微信公众号开发中问题记录及解决方案相关推荐

最新文章

热门文章