小程序兼容安卓和IOS數(shù)據(jù)處理問題及坑
最近開發(fā)微信小程序,遇到到過種坑,例如什么前端發(fā)送請求,后端請求成功,沒有獲取到前端傳遞的值;后端請求成功,并且值,前端就是出不來數(shù)據(jù);請求接口出現(xiàn)Provision headers are shown的現(xiàn)象;到最后蘋果手機上出現(xiàn)數(shù)據(jù),安卓手機出現(xiàn)不了數(shù)據(jù)等等,非常多的bug。備注后端我用的php開發(fā)的,框架用的TP5.0,我一度懷疑是我框架的原因。安卓需要的是字符串,蘋果好像都行吧,我是做的兼容處理。
作為一名程序員,連bug都沒有,你還開發(fā)什么軟件?廢話不說了先上問題吧;
1.小程序前端發(fā)送請求給后端,常用的有2中方式,一種是get請求,一種是POST請求,首先舉例get請求吧,
wx.request({
url: that.globalData.baseUrl + 'user/add',//請求后臺接口
data: {
code: avatarUrl,
username: nickName }
header: {
'content-type':'application/json',// 默認值
token: wx.getStorageSync('token')
},
method: "get",
success: function (res) {
// console.log(res)
}
})
這種傳遞方式是沒有什么問題,后端怎么都會接受到數(shù)據(jù),前端也可以接受到數(shù)據(jù)。
主要是看第二種post方法;
wx.request({
url: that.globalData.baseUrl + 'wx/getToken',//請求后臺接口
data: {
code: res.code
},
header: {
"Content-Type": "application/x-www-form-urlencoded",
},
method: "POST",
success: function (res) {
console.log(res);
wx.setStorageSync('token', res.data.data)
}
})
這種情況是后端是可以接受到數(shù)據(jù)的,,但是把 "Content-Type": "application/x-www-form-urlencoded",換成 'content-type':'application/json',后端接口就接收不到數(shù)據(jù),但是有的小程序上面post請求中header頭換成'content-type':'application/json',也能接受到數(shù)據(jù)。但是我后端就是不能,后來我就換成了這個。
2.后端請求成功,并且值,前端就是出不來數(shù)據(jù)?
主要是請求的類型和你返回給前端的數(shù)據(jù)類型不對一致。這是你就需要及時檢測數(shù)據(jù)類型,并且換成對應的數(shù)據(jù)類型。
3.請求接口出現(xiàn)Provision headers are shown的現(xiàn)象
出現(xiàn)上述現(xiàn)象主要是應為阻塞的原因,主要需要下面幾個方面,首先是否用了斷點,斷點沒注意,就會出現(xiàn);數(shù)據(jù)庫方面的請求連接是否過長,否則也會出現(xiàn)。小程序要求速度快,所以一般都用原生數(shù)據(jù)庫接口更好點,響應速度短,界面反應也快。
4.到最后蘋果手機上出現(xiàn)數(shù)據(jù),安卓手機出現(xiàn)不了數(shù)據(jù)
例如后端返回數(shù)據(jù)出現(xiàn)是這種 "{"code":1,"data":"4f756fd91b8a81f1","msg":"請求成功"}" ,那么需要對應處理:首先判斷是那種數(shù)據(jù)類型
var json =res.data
if (typeof json != 'object') {
if (json != null) {
json = json.replace("\ufeff", "")
var ob = JSON.parse(json)
} }
轉字符串還是json對象,一般都是轉json對象,傳值得時候轉json字符串比較多。有時候返回的值可能會出現(xiàn)前面有個隱藏的點,JSON.parse處理返回什么“token 有個0”,那么需要用下面的處理一下數(shù)據(jù)var aa = res.data.trim();var bb = JSON.parse(aa);謝謝大家,第一次寫。以前都是印象筆記上寫;現(xiàn)在簡書上寫。請多多指教
我總結下我印象深刻的幾個坑~
1.回答下最開始的那個問題,手寫一個日歷,為什么在安卓能遍歷顯示,而蘋果里卻不顯示?
首先確定這并不是遍歷的bug,肯定是兼容性問題,遍歷這是最基本的語法,問題肯定出在遍歷的數(shù)據(jù)處理階段,看了代碼果不其然,結論就是:ios 系統(tǒng)的問題,比如newDate(“2018-08-08”),在ios會出現(xiàn)NaN的情況,ios只支持newDate(“2018/08/08”)
2.video 視頻格式m3u8,在ios里邊兒不能播放,但是安卓能正常播放?
分析
官方給的例子,是mp4格式的文件,ios可以播放,微信小程序開發(fā)者平臺的論壇也有類似的問題,但是沒有準確的答案,我開始考慮轉換下格式,奈何,技術不夠,嘗試添加在image 標簽 添加 custom-cache={{cache}} ,data 中添加 cache:false問題解決了。
解決
<video src="{{sbDress}}" controls custom-cache="{{cache}}"></video>
3.微信小程序WxParse 包含圖片安卓端無法加載
分析
wxparse 是微信小程序用于解析富文本編輯器生成代碼的插件,用于展示一般的圖文。在安卓手機端如果內容包含圖片的標簽時整個內容都無法加載出來,在手機端查看console,發(fā)現(xiàn)安卓機在console.dir()的時候報錯,這是由于安卓機不支持console.dir()的語法。
結論:這是安卓機不支持console.dir()的語法,使用console.log()代替。
4.安卓上圖片會出現(xiàn)卡頓,變形,然后才會顯示正常的圖片大小
分析
開發(fā)文檔里寫明:注:image組件默認寬度300px、高度225px,開發(fā)時所有image的小圖標都使用了mode=”widthFixed”,只設置了寬度,讓高度自適應,就會出現(xiàn)圖片加載時初始化高度位225px,加載完畢才顯示mode的高度,由于安卓機這個卡頓教明顯,才會出現(xiàn)瞬時的變形。
結論:今后使用image 標簽,盡量固定寬高。
5.navigationBar 在安卓機中位置為左邊,在蘋果中居中顯示,那么標題字數(shù)多了之后蘋果就會默認使用…代替剩余的文字
分析
這個也不是bug,只不過時顯示問題,目前版本6.6.0里支持在window屬性里設置navigationStyle由默認樣式修改為custom,支持自定義樣式。所謂的自定義樣式,就是默認導航,只剩一個膠囊的導航。
結論:app.json里邊兒設置window{“navitionStyle”:”custom”},后要自己使用在wxml,and wxss里寫樣式顯示頭部的導航欄。
注意
由于該屬性是微信6.6.0才支持,所以需要將其他的window屬性照常寫,來兼容低版本。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript如何實現(xiàn)防止重復的網絡請求的示例
這篇文章主要介紹了JavaScript如何實現(xiàn)防止重復的網絡請求的示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
Javascript簡單實現(xiàn)面向對象編程繼承實例代碼
這篇文章主要介紹了Javascript簡單實現(xiàn)面向對象編程繼承實例代碼,簡單分析了面向對象程序設計的特征與繼承的具體實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
基于JavaScript實現(xiàn)單選框下拉菜單添加文件效果
這篇文章主要介紹了基于JavaScript實現(xiàn)單選框下拉菜單添加文件效果的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06
JavaScript實現(xiàn)的開關燈泡點擊切換特效示例
這篇文章主要介紹了JavaScript實現(xiàn)的開關燈泡點擊切換特效,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-07-07
js有趣的非空判斷函數(shù) + ?? 實現(xiàn)
本文介紹了JS中空值合并操作符??的用法,包括如何使用它來判斷數(shù)據(jù)是否為“合法數(shù)據(jù)”,即非空字符串、非undefined和非null,下面就一起來了解一下,感興趣的可以了解一下2024-09-09

