用uni-app開發多端應用,之前打包的微x小程序好好的,打包成字節的就各種兼容問題,UI框架用的uView的1.x版本,也是各種兼容問題:
1、上傳圖片上傳不了
上傳圖片用 uni.chooseImage 選中圖片后,得到的本地臨時路徑是個下面這樣的:
ttfile://temp/ab790db96c9b65cb54685c7d99c4d847.jpeg
直接用這個路徑通過 uni.uploadFile 接口上傳,會上傳不了
解決辦法:要用 uni.compressImage 這個壓縮圖片的接口去壓縮下,再用獲取到的路徑去上傳就可以了:
ttfile://temp/tempCompressImg1642681468739.jpg
對比了下兩次獲取到的本地路徑就中間的文件名部分不一樣,微x小程序就沒這個問題
2、用web-view展示pdf文件在安卓上不顯示
頁面用web-view來展示pdf文件,在ios和開發工具里都沒問題,但在安卓手機上頁面打開成功一直顯示空白,解決方案先用 uni.downloadFile 下載下來文件,在通過 uni.openDocument 打開文檔,但是安卓真機上打開依然只顯示一個pdf文件名,需要自己再點一下通過wps之類的其他第三方應用打開
3、子組件傳遞事件$emit里的事件名不能加“-”
子組件像父組件傳遞事件時,事件名里加了橫杠“-”編譯之后事件都是無效的,像下面這樣的:this.emit('on-success', true)...要改成 this.$emit('onpick', info) 才有用
4、子組件里多個slot編譯無效
自己封裝的組件里有多個 slot 的都編譯不出來,uview的很多組件也一樣有問題
5、勾選了es6轉es5,lodash里用到的函數報錯
一般我們都會勾選上es6轉es5,頁面里如果有用到 lodash庫里防抖節流函數 debounce、throttle會直接報錯,如果不轉則沒問題
6、安卓小程序點擊空白讓輸入框鍵盤收起會觸發2次頁面的點擊事件
有個頁面正好有用到輸入框和uview的步進器,先點擊輸入框獲取焦點同時鍵盤彈出,如果此時正好直接去點步進器的 + 或 - 會直接加減2
解決辦法:設置個變量去禁掉步進器 disabled,輸入框獲取焦點focus事件里去設置disabled=true,burl事件里用個定時器設置disabled=false,這樣用戶要自己先點一下空白收起鍵盤后,才能點擊步進器
7、uni.getEnv方法字節小程序不支持
小程序里web-view可以直接用uni.navigateTo之類的接口跳回小程序或者和小程序通信,單需要在網頁里引入對應平臺提供的通信sdk文件,像獲取環境信息的 uni.getEnv 方法字節小程序里是不支持的
8、uni-app打包優化
uni-app打包一般會根據環境變量來自動設置接口域名,但是uni只有生產模式production才會壓縮代碼,有時我們開發、測試環境也需要真機上預覽,如果不壓縮代碼有時會提示包超除大小限制(一般主包限制2M)
解決方案:通過默認的 NODE_ENV 命令行變量去讓打包生產模式,自己再額外加一個VUE_APP_ENV變量來判斷接口地址,如下面這樣的命令:
"build:mp-toutiao-dev": "cross-env VUE_APP_ENV=development NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --minimize --watch"