华米ZeppOS小程序本地开发环境配置教程——使用Win10+VSCode

跌跌撞撞不分手 發表於 2026-5-5 23:33:13

华米ZeppOS小程序本地开发环境配置教程——使用Win10+VSCode

华米ZeppOS推出的时间不算长，网上配置环境的教程也不多。本人在配置环境过程中，前后花了两三天时间，踩了很多坑，特此写一篇教程，希望能帮助到想尝试ZeppOS小程序开发的朋友。
由于配套的开发工具还处于较快迭代阶段，本教程可能不适用于未来的版本，当前时间点为：2022.4
本教程发布于博客园，转载请先征得同意！
<h1>教程概要：</h1>
一、安装Ubuntu虚拟机
二、虚拟机内安装ZeppOS模拟器
三、宿主机安装vscode
四、宿主机安装zeos cli
五、在vscode内结合cli编写代码并调试
六、一些踩坑记录
<h1>一、安装Ubuntu虚拟机</h1>
进行小程序开发，调试是必不可少的。如果你有支持zeppos的设备，当然可以用设备实机调试。我估摸有设备的人应该是少数，所以需要安装模拟器。
目前，官方的模拟器仅支持Ubuntu系统，据说未来会有跨平台的模拟器。
如果你也爱折腾，可能会问：为什么不用Win10自带的wsl？为什么不装双系统？答案是：很可能折腾不好！很久以前刚接触Linux时，我尝试过双系统，然而放弃了；这两天在反复装了三次wsl2的Ubuntu之后，才终于搞好，容易有奇怪的问题，建议也别耗费这个时间。（当然wsl还是很好用的，只是模拟器暂时没有很好地适配。不支持systemctl命令等原因，使得wsl和独立安装的Ubuntu有所不同）
<h2>1. 下载虚拟机软件</h2>
个人习惯于用VMware Workstation 16 Player运行各种虚拟机，player版能免费用于非商业用途。官网
安装过程中，不要点得太快，看清楚了再下一步——因为如果你的win10开启了hyper-v功能，需要额外勾选一个自动安装WHP的复选框，才能让vmware正常运行。
<h2>2. 下载Ubuntu系统镜像</h2>
国内可去清华镜像站等处快速下载，建议下载lts版本。
<h2>3. 打开vmware，用镜像新建一个虚拟机</h2>
我的配置如图下图。网络连接模式，经测试桥接模式和NAT模式都可以连接到模拟器。该配置在安装完成后仍然可以修改。
<img src="https://img2022.cnblogs.com/blog/1993799/202204/1993799-20220401165745879-511386732.png" alt="" loading="lazy">
 
<h2>4. 修改虚拟机apt源，加快下载</h2>
　　打开终端，sudo su切到root，将/etc/apt/sources.list修改为：
<div class="cnblogs_code">
<pre> 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</pre>
</div>
<h2>5. 更新软件</h2>
<div class="cnblogs_code">
<pre>1 apt update
2 apt upgrade</pre>
</div>
<h1>二、虚拟机内安装ZeppOS模拟器</h1>
　　是的，终于开始安装模拟器了，首先依照官网说明下载所需文件：
相关依赖
下载依赖安装脚本文件，并执行，等待相关依赖下载安装完成
模拟器安装
下载ZeppOS模拟器安装包，并安装
下载了setup.sh和deb安装包两个文件之后，以root身份运行setup.sh
<div class="cnblogs_code">
<pre>sudo sh setup.sh</pre>
</div>
然后用dpkg安装simulator的deb包（包名换成你下载的版本
<div class="cnblogs_code">
<pre>sudo dpkg -i simulator_1.0.7_amd64.deb</pre>
</div>
安装完成后，系统会出现一个叫simulator的应用，即为我们安装的zeppos模拟器。可以将图标固定到左侧导航栏方便使用。至此模拟器安装完成。点击即可打开模拟器，效果如下：
<img src="https://img2022.cnblogs.com/blog/1993799/202204/1993799-20220401173226488-137988662.png" width="650" loading="lazy">
<h1>三、宿主机安装vscode</h1>
 这一步请直接百度
<h1>四、宿主机安装zeos cli</h1>
<h2>1. 安装nodejs和npm</h2>
安装包可至官网下载。不难，搞不好请自行百度。
需要注意的是，nodejs版本得高于12（还是10来着，记不清了），所以尽量下载更新的nodejs安装包。
安装完成后，检查nodejs和npm版本：
<div class="cnblogs_code" style="margin-left: 30px">
<pre>node -v
npm -v</pre>
</div>
我的node和npm版本如下：
<img src="https://img2022.cnblogs.com/blog/1993799/202204/1993799-20220402111834992-247015763.png" alt="" loading="lazy">
<h2>2. 使用npm安装zeus cli</h2>
在终端内输入：
<div class="cnblogs_code" style="margin-left: 30px">
<pre>npm i @zeppos/zeus-cli -g</pre>
</div>
如果速度太慢，可以尝试使用cnpm替代npm，具体方法自行百度。有时网络问题会导致安装出错，需要重复几次安装。
<h2>3. 使用cli创建项目</h2>
这里直接引用官方文档：
<h2 class="anchor anchorWithStickyNavbar_31ik" style="margin-left: 30px"><img src="https://img2022.cnblogs.com/blog/1993799/202204/1993799-20220402105234510-707917568.png" alt="" loading="lazy"></h2>
创建任务前，记得先将终端定位到想要创建项目的目录里。template那个选项选择helloworld，即可创建helloworld项目：
<img src="https://img2022.cnblogs.com/blog/1993799/202204/1993799-20220402111405974-2041087632.png" alt="" loading="lazy">
<h1>五、在vscode内结合cli编写代码并调试</h1>
 在刚刚新建的项目目录下打开vscode，并在vscode内新建终端：（下图中代码已非原始代码）
<img src="https://img2022.cnblogs.com/blog/1993799/202204/1993799-20220402110234608-754579462.png" width="650" loading="lazy">
回到虚拟机内，打开终端，输入ifconfig，在如下位置找到虚拟机的ip，并复制：
<img src="https://img2022.cnblogs.com/blog/1993799/202204/1993799-20220402110646975-978459405.png" width="650" loading="lazy">
 
在vscode终端输入：
<div class="cnblogs_code">
<pre>zeus dev</pre>
</div>
启动调试，即可在虚拟机内的模拟器上运行自己创建的应用。初次启动时，会提示输入模拟器的ip，此时将刚刚在虚拟机里复制到的IP粘过来。
以后需要修改模拟器IP时，可使用如下命令：
<div class="cnblogs_code">
<pre>//查看当前所有配置
zeus config list
//修改模拟器IP
zeus config set simulator_host=【刚刚复制的IP地址】</pre>
</div>
在模拟器中，按下键盘上home键解锁，进入应用列表，拖动到最下方即可见到自己的创建的应用：
<img src="https://img2022.cnblogs.com/blog/1993799/202204/1993799-20220402111718157-58519360.png" alt="" loading="lazy">
至此，我们成功在Win10内用vscode连接到了Ubuntu虚拟机内的zeppos模拟器，并运行了自己创建的应用！
 
<h1>六、一些踩坑记录</h1>
<ol>
<li>如果在虚拟机内因为一些意外情况关了模拟器再重启，可能7650端口仍然会被占用。此时，用 lsof -i:7650查看占用端口进程的pid，再用kill -9 【pid】即可解除占用，再重新打开simulator。</li>
<li>在zeus dev运行起来后，一旦你的源文件有了改动，zeus就会自动构建、刷新模拟器。但在我的虚拟机中，如果源代码中出现错误，模拟器会闪退。此时即使在vscode里修正了错误并手动点击按钮打开模拟器，里面的应用很可能还是原来的，没刷新。这时只需要再稍动一下源代码，让zeus自己刷新就行。</li>
<li>增加新页面后，记得在app.json内注册，否则无法跳转。</li>
<li>如果增加了新的UI控件却没有显示，大概率是样式参数有错，需要细心检查</li>
<li>虚拟机的内存得大一些，经测试，4G内存时模拟器比较卡顿，5G内存或以上时比较流畅</li>
</ol>
 

</div>
<div id="MySignature" role="contentinfo">
Have you LBCCed today? 
来源：https://www.cnblogs.com/-fcy-/p/16087678.html

頁: [1]

琼殿技术论坛's Archiver

华米ZeppOS小程序本地开发环境配置教程——使用Win10+VSCode