基于uniApp开发小程序的部署教程

项目搜索

项目推荐

基于SSM的教务管理系统

azhou

部署文档

2,694

2022-06-05

基于SpringBoot+Html的前后端分离的学习平台

azhou

部署文档

2,022

2022-05-17

基于SpringBoot+Vue前后端分离的学校心理健康测试系统

azhou

部署文档

1,906

2023-09-10

基于Springboot+vue的物流管理项目

azhou

部署文档

1,726

2022-07-12

基于SpringBoot的前后端分离的汽车维修系统

azhou

部署文档

1,389

2022-05-17

基于SSM的教务管理系统

azhou

部署文档

1,094

2022-06-29

### 一、前置准备（软件环境）

> 最好和azhou的环境保持一直,否则容易出现奇奇怪怪的问题

##### 基础环境

- Node 14.15.3（前端环境，小程序依赖的前端框架下载）

##### 软件

- HbuildX（uniapp编译工具，小程序代码编写）
- 微信开发者工具（微信小程序预览工具，只做预览）

### 二、环境安装

Hbuilderx安装：https://www.dcloud.io/hbuilderx.html

微信开发者工具安装：https://blog.csdn.net/m0_63314727/article/details/123286844

node安装：https://blog.csdn.net/m0_67392273/article/details/126113759

### 三、项目运行

1：安装好微信开发着工具后，随便新建一个项目，进入开发者工具内部，打开安全端口，如下图所示

![1.png](https://code-grade-server-prd.oss-cn-shenzhen.aliyuncs.com/2023-05-17/8ea1b002-6931-42a7-8aea-7220645b4c78_1.png)

2：打开HbuildX，将项目用导入其中,等待片刻，请注意项目层级和站长的类似，导入成功后，uniapp小程序会有左上角的图标显示

![2.png](https://code-grade-server-prd.oss-cn-shenzhen.aliyuncs.com/2023-05-17/c3b0d876-5aa2-4683-867e-9d8749f1fe6c_2.png)

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

![3.png](https://code-grade-server-prd.oss-cn-shenzhen.aliyuncs.com/2023-05-17/e9a0bb89-f1e5-480f-8eb3-d39b0390e463_3.png)
4：修改微信小程序开发者工具安装路径

![4.png](https://code-grade-server-prd.oss-cn-shenzhen.aliyuncs.com/2023-05-17/f3c6ea29-6c66-46b9-837d-fa912362070d_4.png)

5：运行小程序项目（正常的话hbuildx会帮你唤起微信小程序开发者工具，如果没有唤起的话请看第6步）

![5.png](https://code-grade-server-prd.oss-cn-shenzhen.aliyuncs.com/2023-05-17/8e40966d-81ad-44f1-86a5-f6e8d26f3d08_5.png)

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

![6.png](https://code-grade-server-prd.oss-cn-shenzhen.aliyuncs.com/2023-05-17/a684c9b1-f1f8-4e5e-87ed-c304626ce8d0_6.png)

### 四：其他事项

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

项目详细部署文档