華米ZeppOS推出的時間不算長,網上配置環境的教程也不多。本人在配置環境過程中,前后花了兩三天時間,踩了很多坑,特此寫一篇教程,希望能幫助到想嘗試ZeppOS小程序開發的朋友。
由於配套的開發工具還處於較快迭代階段,本教程可能不適用於未來的版本,當前時間點為:2022.4
本教程發布於博客園,轉載請先征得同意!
教程概要:
一、安裝Ubuntu虛擬機
二、虛擬機內安裝ZeppOS模擬器
三、宿主機安裝vscode
四、宿主機安裝zeos cli
五、在vscode內結合cli編寫代碼並調試
六、一些踩坑記錄
一、安裝Ubuntu虛擬機
進行小程序開發,調試是必不可少的。如果你有支持zeppos的設備,當然可以用設備實機調試。我估摸有設備的人應該是少數,所以需要安裝模擬器。
目前,官方的模擬器僅支持Ubuntu系統,據說未來會有跨平台的模擬器。
如果你也愛折騰,可能會問:為什么不用Win10自帶的wsl?為什么不裝雙系統?答案是:很可能折騰不好!很久以前剛接觸Linux時,我嘗試過雙系統,然而放棄了;這兩天在反復裝了三次wsl2的Ubuntu之后,才終於搞好,容易有奇怪的問題,建議也別耗費這個時間。(當然wsl還是很好用的,只是模擬器暫時沒有很好地適配。不支持systemctl命令等原因,使得wsl和獨立安裝的Ubuntu有所不同)
1. 下載虛擬機軟件
個人習慣於用VMware Workstation 16 Player運行各種虛擬機,player版能免費用於非商業用途。官網
安裝過程中,不要點得太快,看清楚了再下一步——因為如果你的win10開啟了hyper-v功能,需要額外勾選一個自動安裝WHP的復選框,才能讓vmware正常運行。
2. 下載Ubuntu系統鏡像
國內可去清華鏡像站等處快速下載,建議下載lts版本。
3. 打開vmware,用鏡像新建一個虛擬機
我的配置如圖下圖。網絡連接模式,經測試橋接模式和NAT模式都可以連接到模擬器。該配置在安裝完成后仍然可以修改。
4. 修改虛擬機apt源,加快下載
打開終端,sudo su切到root,將/etc/apt/sources.list修改為:
1 deb https://mirrors.ustc.edu.cn/ubuntu/ focal main restricted universe multiverse 2 deb-src https://mirrors.ustc.edu.cn/ubuntu/ focal main restricted universe multiverse 3 deb https://mirrors.ustc.edu.cn/ubuntu/ focal-updates main restricted universe multiverse 4 deb-src https://mirrors.ustc.edu.cn/ubuntu/ focal-updates main restricted universe multiverse 5 deb https://mirrors.ustc.edu.cn/ubuntu/ focal-backports main restricted universe multiverse 6 deb-src https://mirrors.ustc.edu.cn/ubuntu/ focal-backports main restricted universe multiverse 7 deb https://mirrors.ustc.edu.cn/ubuntu/ focal-security main restricted universe multiverse 8 deb-src https://mirrors.ustc.edu.cn/ubuntu/ focal-security main restricted universe multiverse 9 deb https://mirrors.ustc.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse 10 deb-src https://mirrors.ustc.edu.cn/ubuntu/ focal-proposed main restricted universe multiverse
5. 更新軟件
1 apt update 2 apt upgrade
二、虛擬機內安裝ZeppOS模擬器
是的,終於開始安裝模擬器了,首先依照官網說明下載所需文件:
下載依賴安裝腳本文件,並執行,等待相關依賴下載安裝完成
下載ZeppOS模擬器安裝包,並安裝
下載了setup.sh和deb安裝包兩個文件之后,以root身份運行setup.sh
sudo sh setup.sh
然后用dpkg安裝simulator的deb包(包名換成你下載的版本
sudo dpkg -i simulator_1.0.7_amd64.deb
安裝完成后,系統會出現一個叫simulator的應用,即為我們安裝的zeppos模擬器。可以將圖標固定到左側導航欄方便使用。至此模擬器安裝完成。點擊即可打開模擬器,效果如下:
三、宿主機安裝vscode
這一步請直接百度
四、宿主機安裝zeos cli
1. 安裝nodejs和npm
安裝包可至官網下載。不難,搞不好請自行百度。
需要注意的是,nodejs版本得高於12(還是10來着,記不清了),所以盡量下載更新的nodejs安裝包。
安裝完成后,檢查nodejs和npm版本:
node -v npm -v
我的node和npm版本如下:
2. 使用npm安裝zeus cli
在終端內輸入:
npm i @zeppos/zeus-cli -g
如果速度太慢,可以嘗試使用cnpm替代npm,具體方法自行百度。有時網絡問題會導致安裝出錯,需要重復幾次安裝。
3. 使用cli創建項目
這里直接引用官方文檔:
創建任務前,記得先將終端定位到想要創建項目的目錄里。template那個選項選擇helloworld,即可創建helloworld項目:
五、在vscode內結合cli編寫代碼並調試
在剛剛新建的項目目錄下打開vscode,並在vscode內新建終端:(下圖中代碼已非原始代碼)
回到虛擬機內,打開終端,輸入ifconfig,在如下位置找到虛擬機的ip,並復制:
在vscode終端輸入:
zeus dev
啟動調試,即可在虛擬機內的模擬器上運行自己創建的應用。初次啟動時,會提示輸入模擬器的ip,此時將剛剛在虛擬機里復制到的IP粘過來。
以后需要修改模擬器IP時,可使用如下命令:
//查看當前所有配置
zeus config list //修改模擬器IP
zeus config set simulator_host=【剛剛復制的IP地址】
在模擬器中,按下鍵盤上home鍵解鎖,進入應用列表,拖動到最下方即可見到自己的創建的應用:
至此,我們成功在Win10內用vscode連接到了Ubuntu虛擬機內的zeppos模擬器,並運行了自己創建的應用!
六、一些踩坑記錄
- 如果在虛擬機內因為一些意外情況關了模擬器再重啟,可能7650端口仍然會被占用。此時,用 lsof -i:7650查看占用端口進程的pid,再用kill -9 【pid】即可解除占用,再重新打開simulator。
- 在zeus dev運行起來后,一旦你的源文件有了改動,zeus就會自動構建、刷新模擬器。但在我的虛擬機中,如果源代碼中出現錯誤,模擬器會閃退。此時即使在vscode里修正了錯誤並手動點擊按鈕打開模擬器,里面的應用很可能還是原來的,沒刷新。這時只需要再稍動一下源代碼,讓zeus自己刷新就行。
- 增加新頁面后,記得在app.json內注冊,否則無法跳轉。
- 如果增加了新的UI控件卻沒有顯示,大概率是樣式參數有錯,需要細心檢查
- 虛擬機的內存得大一些,經測試,4G內存時模擬器比較卡頓,5G內存或以上時比較流暢