移动端微信公众号开发中问题记录及解决方案
生活随笔
收集整理的這篇文章主要介紹了
移动端微信公众号开发中问题记录及解决方案
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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> <title></title> <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="parent"> <div class="child01"> <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="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) { // IE
url = document.getElementById(sourceId).value;
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = 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的字體和顏色：
//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. 微信識別二維碼，不能使用背景圖片，將圖片直接放到頁面上就可以。如果頁面中有兩個二維碼的話，要離得遠點。
-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="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) { // IE
url = document.getElementById(sourceId).value;
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = 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
總結
以上是生活随笔為你收集整理的移动端微信公众号开发中问题记录及解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。
