前置条件

  • node14.X(前端环境,小程序依赖的前端框架下载)

  • HbuilderX(uniapp编译工具,小程序代码编写)

  • 微信开发者工具(微信小程序预览工具,只做预览)

项目部署

找到小程序代码文件夹,uniapp小程序项目一般会有如下几个文件

image-20240705151927541

因此weightLoss_smart就是我们要找的小程序项目的文件夹,后续也会在此文件夹的基础上进行操作

image-20240705152039453

打开HbuildX,将项目用导入其中,等待片刻,请注意项目层级和站长的类似,导入成功后,uniapp小程序会有左上角的图标显示(直接将文件夹拖入HbuilderX快捷方式中打开即可)

image-20240705152228595

image-20240705152306770

打开微信开发者工具,随便新建一个项目,进入开发者工具内部,打开安全端口,如下图所示

1

修改小程序的appid,没有的话就进入微信公众平台进行申请,平台链接 https://mp.weixin.qq.com/

1

修改微信小程序开发者工具安装路径

1

运行小程序项目(正常的话hbuildx会帮你唤起微信小程序开发者工具,如果没有唤起的话请往下看)

1

手动打开微信开发者工具,并运行小程序,将下方文件夹用微信开发者工具打开即可

1

其他事项

如果需要修改代码的话就需要通过HbuildX运行项目,在HbuildX中修改代码进行保存,会自动出发微信开发着工具一并修改,微信开发者工具中的代码不做任何参考,第一次运行uniapp项目需要通过HbuildX运行,否则不需要修改项目的话直接用微信开发者工具打开即可!