uniAPP介绍

uniApp官网
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。

环境准备

  1. node.js
  2. HBuiderX
  3. 微信开发者工具
  4. dcloud注册 uniapp开发账号
  5. 微信公众平台申请小程序开发资格并记录appid
    以上步骤就不多赘述，网上教程五花八门，准备好之后就可以开始下一步了。

开始导入

HBuilderX中新建项目或者导入均可
250826155222069.png

在HBuiderX中找到manifest.json的微信小程序配置，填入上述获得的appid
250826155333113.png

然后在HBuiderX中配置微信开发者工具的位置，把微信开发者工具中的安装路径复制上去就OK了，复制路径不需要复制.exe的文件路径
250826155701663.png

然后就可以点击运行了，由于是uniapp的源码，它第一次编译需要node.js等环境，同时还需要安装插件，HBuiderX会自动帮你下载，等待一段时间即可
250826162317154.png

趁下载之际，我们可以去打开微信开发者工具，点击安全配置，把服务端口打开
250826162550167.png

HBuilderX运行成功后，会自动打开微信开发者工具，但是这一步我一直失败
250826163450502.png

所以如果有小伙伴也遇到类似问题，可以手动将项目下\unpackage\dist\dev\mp-weixin导入到微信开发者工具中
250826162901196.png
250826163044692.png

结语

记录一下经验，希望能帮助其他遇到相同问题的开发者，在自己的实践过程中逐步学习和进步

凡是过往，皆为序章!