uniapp安装及调试

uniapp安装及调试

我们本篇文章主要讲解uniapp的项目创建

真机调试、ios模拟器调试、微信小程序调试

一、下载HBuilder X

[HBuilder X]: “https://www.dcloud.io/hbuilderx.html

我们可以下载我们需要的版本

二、安装运行并创建项目

第一次打开HBuilder X,我们可以去定义一下我们的配置,macos是去偏好设置,windows的在工具->设置

我们可以去新建项目弹出窗口配置我们项目信息,项目名称和vue版本,这里我现在的是vue3,vue3的绑定预设是vite。

我们也可以去选择不一样的模板。

三、运行项目

当我们打开项目的时候,准备运行的时候,我们可以选择将我们的项目运行到哪里,它会提示你安装相对应的插件,如果安装完插件,我们的软件没有识别到我们的插件,那我们可以选择重启我们的软件。

这里先演示一下运行到内置浏览器(第一次运行我们可能要稍等一下)

四、调试

1.ios模拟器调试

当然,在ios模拟器调试的前提是要是macos环境,并且下载了xcode(提前准备一下哦)因为我没有ios手机🫠

我们选择运行到ios模拟器 App基座(loading…)

选择我们的模拟器手机型号

现在我就可以看到程序运行到了我们的iPhone 14 Pro Max(香得嘞)

当我们修改我们的程序代码并保存,就可以看见我们的视图更新了

2.Android手机真机调试

当然,没有Android手机的也可以借其他同学的(Android模拟器配置有点麻烦,就先不配置了,想配置的同学先自行打开搜索🔍)

手机真机调试的前提是要打开你的手机的开发者模式,不同的手机开启的方式也是不一样的,我的手机是红米K20 pro

具体打开流程为设置->我的设备->全部参数->点击MIUI版本3下(连击)系统提示进入开发者模式->返回到更多设置->开发者选项->打开usb调试

当我们选择运行到Android App基座,就会识别你的手机(记得用数据线将手机连接到电脑),点击运行

第一次运行,手机会让你安装,点击安装就可以了

3.微信小程序开发者工具调试

这个调试的方式的前提是要有一个开发者账号,没有的同学要先去注册一个

[注册]: “https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

然后利用注册绑定的微信登陆我们的微信公众平台

没有下载微信开发者工具的同学也要下载一个

然后在我们的开发->开发管理->开发设置下面有我们的开发者ID(等会要用)

当我们点击发行->小程序-微信的时候,会让你配置你的开发者ID,然后项目就会自动打包

第一次编译的时候,我们可以根据编译完成的项目路径去手动导入我们的微信开发者工具去调试

注意:不要在微信开发者工具去修改我们的代码,因为下一次发行编译会覆盖掉我们的修改

当然,我们还有另一种导入方法,那就是自动导入

首先我们要将微信开发者工具的安全设置的服务端口打开

再到HBuilder X去配置微信开发者工具的路径(这里的路径可以查看自己的安装路径)

到这我们的配置就完成了

接下来我们再发行微信小程序

我们就可以看见微信开发者工具自动打开并运行我们的项目了

总结:

到目前为止,我们开发时候的调试就可以轻松掌握了

Donate
  • Copyright: Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
  • Copyrights © 2022-2023 alan_mf
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信