微信內置瀏覽器WebApp開發,踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub


最近花6天時間完成了一個七夕的小活動,是一個簡單的WebApp。由於我前期對面向微信的Web開發評估不足,導致開發過程十分艱難。寫這篇文章總結下,驚醒自己未來不要再犯這樣的錯誤。

問題:

1、 有些比較老舊的手機不支持多個觸點,可能是硬件不支持,也可能是軟件問題。這並不是微信的坑,對於這個問題其實我是早就遇到過的,心里有底,也就不算問題了。

2、 手機上傳圖片會變橫,比如:豎着拍照上傳,圖片不是豎的,而變成橫的。這個也不是微信的問題,是因為我以前還沒在手機上做過圖片上傳,所以第一次遇見。

解決方案:解析圖片的EXIF信息,使用其中的orientation字段,根據方向調整圖片。參考:https://www.imququ.com/post/how-to-auto-rotate-photo-in-js.html

3、 Android版微信上傳圖片不支持拍照,只能從圖庫中選擇,參考:http://mp.weixin.qq.com/qa/index.php?qa=12686&qa_1=%E5%AE%89%E5%8D%93%E7%89%88%E5%BE%AE%E4%BF%A1%E5%86%85%E5%B5%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E5%93%8D%E5%BA%94input-file%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6%E4%B8%8D%E8%83%BD%E7%9B%B4%E6%8E%A5%E8%B0%83%E7%94%A8%E6%8B%8D%E7%85%A7%E6%88%96%E5%BD%95%E5%83%8F%E5%8A%9F%E8%83%BD-%E8%80%8Ciphone%E7%89%88%E6%89%8B%E6%9C%BA-%E6%98%AF%E5%8F%AF%E4%BB%A5%E7%9A%84

4、 一些Android手機,比如三星Note3,從SD卡中選擇圖片上傳,會提示“請選擇SD卡中的圖片”。我理解這個SD卡是指外接SD卡,直接從手機內置存儲中選擇圖片是可以上傳成功。

5、 Android4.4下<input type="file">由於系統WebView的openFileChooser接口更改,導致無法選擇文件,從而導致無法上傳文件。現在,大多數瀏覽器都修復了此BUG,但當前版本5.3的微信內置WebView並未修復。參考:https://code.google.com/p/android/issues/detail?id=62220

目前Android4.4版本系統占比上升非常快,從目前監控數據來看,1個月內上升了2%,當前Android4.4總占比超過5%,希望微信能盡快修復此BUG。

目前最新進展:Android 4.4.3+ 以上的版本已經修復了這個BUG。

6、 微信5分鍾自動清空一次緩存。如果訪問的網頁5分鍾沒有任何動作的話,就會自動清空緩存,我測試的緩存包括:localStoragesessionStorage。未測試ApplicationCacheWebSQL,暫時未知。

通過后期和同僚交流,得知微信不會主動清空緩存。可能是因為Android設置setDomStorageEnabled開啟緩存,但沒有設置存儲目錄,導致緩存被存儲到臨時目錄中,臨時目錄就有被自動清除的可能。參考:http://stackoverflow.com/questions/2961460/my-android-html-application-is-losing-values-stored-in-localstorage-when-it-shut/5418555

可以確認cookie不會被主動清除。如果將微信進程殺死,過期時間為session狀態的cookie會被清除。如果用戶主動退出微信登入,所有cookie都會被清除。

得到一些新的反饋:1、有小部分安卓機器cookie/localstorage都失效,目前微信那邊沒有好的解決方案;2、一般來說cookie + localstorage就能解決大部分問題。我現在使用了cookie + localstorage雙備份的策略。

在微信下,一切本地存儲的方式都是不靠譜的,唯一靠譜的是微信開發API,使用微信的用戶OpenID來跟蹤用戶。


后面如果還有問題,我會繼續補充

炎燎maxzhang added 移動Web開發 日記本 and removed 日記本 labels on 30 Jul
chriscai
hkongm commented  on 6 Aug

好!支持!
weixin分享網頁的API貌似也經常改。。。

mashuangyuan
mashuangshuang commented  on 12 Aug

小米2在微信瀏覽器中圖片上傳成功,但是返回的圖片地址的是空的,不知道咋回事

炎燎
Owner
maxzhang commented  on 12 Aug

@mashuangshuang 你確定上傳成功了?返回地址是服務端的事情吧

炎燎
Owner
maxzhang commented  on 13 Aug

@mashuangshuang 你可以在服務端debug下,看看圖片有沒有upload,再看服務端接收數據是否正常。這樣的問題可能因為服務端沒有接收到正常的文件流,你可以使用WebUploader的二進制模式sendAsBinary,文檔http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_options

深藍
ihuguowei commented  on 28 Sep

請問您做過微信內置瀏覽器的上下滑動處理么?有遇到過困難么?我使用了幾個庫好像均無效。

炎燎
Owner
maxzhang commented  on 29 Sep

@ihuguowei 上下滑動?能否將問題描述得更清晰一些?

@Life
udbmnm commented  on 29 Sep

@ihuguowei 微信上下滑動做過,iScroll可以做

深藍
ihuguowei commented  on 29 Sep

@maxzhang 識別上下(swipeDown、swipeUp)滑動手勢,與左右滑動類似,我不知道這樣表述好一點。
@udbmnm 謝謝您,我去試試。

@Life
udbmnm commented  on 29 Sep

@ihuguowei 滑動手勢庫很多,http://hammerjs.github.io/ 這個是我以前用過的一個

深藍
ihuguowei commented  on 5 Oct

@udbmnm 謝謝,我現在用zepto 模塊也行的,不過需要阻止掉冒泡。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM