ionic3實戰-ionic cordova resources自動生成圖標功能

平時用ionic開發移動端項目,特別喜歡的命令就是ionic cordova resources,將resources下的icon.png及splash.png自動生成不同分辨率的android及ios尺寸,美工只需要提供一張分辨率的圖片即可,但是最近發現這個命令開始不聽指揮了,下面來看下。
在執行ionic cordova resources命令前需要先註冊個賬號,ionic signup打開瀏覽器頁面註冊賬號,賬號註冊成功後在輸入命令ionic cordova resources然後根據提示輸入剛註冊的顯示郵箱賬號及隱藏的密碼,然後就會看到這次我們的主體異常 :
HTTP Error 503: POST https://res.ionic.io/api/v1/upload
根據這個異常可以在網上查下資料,大多是說你的網速不好或者圖片尺寸不符合,在幾年前這確實是解決部分問題的方法,都2020年了,ionic都更新到5了,明顯解決不了了,看了下github上的issure就有這個問題,具體見https://github.com/ionic-team/ionic-v3/issues,問題都999未處理了,估計v3都不維護了
 
20200406提的,距今一個月了都未解決。。。還是自己動手吧
然後找到了cordova-res這個插件
## Install
npm install -g cordova-res
 
## Usage
cordova-res
 
* `resources/icon.(png|jpg)` must be at least 1024×1024px
* `resources/splash.(png|jpg)` must be at least 2732×2732px
 
 
 
對應用的logo及歡迎頁的尺寸大小有要求,尺寸不符合也會生成圖標失敗。
然後執行cordova-res,如果未安裝python,則會提示Error: Could not find any Python installation to use等異常,裝上python並在環境變量中配置python路徑即可
 
裝完python後會發現node版本太低,然後到官網下載node最新版本安裝,安裝完成後用
node -v 看下有版本號即可,再次執行命令cordova-res會發現node版本太高了,vscode版本太低導致不支持,然後升級下vscode,接下來直接把npm、ionic、cordova等的版本均升級到最新,是否成功標識如下:
 
全部升級完再次執行ionic cordova resources --help看下
看到了這麼一行說明:This command uses the cordova-res utility[1] to generate resources locally. 地址指向https://github.com/ionic-team/cordova-res,然後在執行下
cordova-res通常情況下會卡在這一行 info sharp Using cached C:\Users\yingch\AppData\Roaming\npm-cache\_libvips\libvips-8.9.1-win32-x64.tar.gz
我從網上找了libvips-8.9.1-win32-x64.tar.gz這個包然後放到了_libvips目錄下,再次執行
cordova-res,又雙叒叕出錯了,如下:
Error:
Something went wrong installing the "sharp" module
Cannot find module '../build/Release/sharp.node'
 
這個異常的原因可以暫時不管不影響,主要是sharp不支持太高版本的node,切換node版本到6 8 10應該就沒問題了,這裏就不切換了,然後重新執行最初執行的命令
ionic cordova resources即可
 
 
更新
問題解決之後官方也給回覆了,時差的原因晚上九點多收到的,大體意思是ionic cli版本低的原因導致的,下面上解決方案

 

npm uninstall -g ionic

npm i -g @ionic/cli

若執行命令的過程中提示node版本太低不支持,需要先去nodejs官網下載node版本安裝之後在執行

更新完之後用ionic -v或者ionic cli -v查看下版本即可,然後在執行ionic cordova resources,若是未安裝cordova-res會出現下面這個異常

Error: Cannot find module 'C:\Users\yingch\AppData\Roaming\npm\node_modules\cordova-res\bin\cordova-res'

然後執行npm install -g cordova-res,若是提示本地已經有cordova-res,可以先去本地的目錄AppData/Roaming/npm下將 cordova-res及cordova-res.cmd刪除在執行命令,另一臺測試機用的node版本是v10.20.1版本,執行成功之後再次執行ionic cordova resources或者cordova-res([email protected])即可正常生成,這樣只需要更新node版本及cordova-res即可

 
 
 
 
 
 
 
 
 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章