前端必懂的多端开发环境搭建

前端必懂的多端开发环境搭建

运用 uniapp + HBuilderX 完成一码多平台运行,其中最关键的是先将运行环境搭建好;我总结了我平时环境搭建的方法分享给大家;
本人使用的是window系统,所以这次主要是介绍window系统的多端环境搭建,分别有H5端、微信小程序端、安卓端、ios端;

H5端

本人此次用的项目文件是 HBuilderX 默认创建的测试模板;

一、打开 HBuilderX 点击文件直接运行到浏览器

二、如果直接运行不了,则到设置中手动绑定浏览器文件地址

三、谷歌浏览器中查看运行结果,我个人多端开发一般都是用谷歌浏览器进行调试的,没办法对比其他的太好用了,谷歌浏览器YYDS

微信小程序端

小程序端大多都是大同小异,需要注意的点是如果在配置文件内配置了APPID,会有可能运行不了,需要将配置文件内的APPID删掉,运行后,手动在微信小程序开发平台内改成你自己的APPID;

一、HBuilderX 运行到小程序中、如果遇到运行不了的情况,向H5端一样手动指定小程序文件地址

二、手动修改小程序的APPID

三、小程序端成功运行

安卓端

安卓端我则是用的逍遥模拟器进行环境模拟的,当然你也可以用手机链接数据线,直接进行手机端操作;

一、下载逍遥模拟器

二、复制 HBuilderX 文件中 adb.exe 的地址

三、window搜索查看高级系统设置

四、点击环境变量

五、找到系统变量中的Path、点击编辑

六、点击新建,将之前复制的adbs的文件地址复制进去,确认创造新的环境变量

七、cmd切换后台,输入adb version 查看adb版本,检查是否可用

八、 HBuilderX 中设置Android模拟器端口

九、找到逍遥模拟器MEmu文件,cmd切换到该文件后台,绑定Android模拟器端口

十、检查是否关联成功

十一、点击运行到 Android App 基座

十二、寻找安卓模拟环境、点击运行

十三、成功运行

IOS端

一、下载iTools

ios1.jpg

二、usb线连接苹果手机、确认信任此电脑设备

三、点击设置 -> 通用 -> 设备管理 进行 HBuilderX 信任授权

四、回到 HBuilderX 在IOS APP基座上运行

五、成功运行后,会在苹果手机里面安装一个HBuilderX软件,点开就是你的项目

结语

如果大家有其他更好的多端环境搭配方案,欢迎评论处分享,谢谢!如果对你有帮助的话,麻烦给作者一个大大的赞~✨

猜你喜欢

转载自juejin.im/post/7100096637158031390