uni-app小程序开发环境搭建指南:微信开发者工具与HBuilder X使用教程

2025-01-26
来源:网络整理

目录

前言

Uni-App开发迷你计划已经很普遍了。当然,许多人必须派遣环境来建立这些环境。我只是记录设置时遇到的问题。是

一个软件部分

首先,我们需要使用三件事是微信开发人员工具,而另一件事是X。这两件事。微信开发人员工具的汇编和运行一部分主要实现。网络也可以运行

1。微信开发人员工具

只需选择您需要安装的路径

微信开发人员工具

安装后

2. x开发工具Uni-App开发工具

解压缩可以使用压缩软件包

打开后的界面如下

两个配置部分

注意:建议在此处添加node.js环境

提供一个安装教程以查看

VUE开发-Node.js环境配置和项目操作(图形说明)

1。关于X配置

打开设置

如何搭建微信小程序的开发环境_微信平台搭建与开发_微信自己搭建小程序

选择运行配置零件以查找微信开发人员路径,以将微信开发人员工具安装路径放在我们中

仍然是运行配置部分,并找到将我们安装的节点放入中的节点路径

2。关于微信发展工具配置

首先单击开发人员工具的右上角

单击安全选项并打开服务端口

三个操作项目1。新项目

首先在X中创建一个新的VUE2项目

确保选择VUE2,否则您无法运行微信

2。代码编写

该软件将允许我们自己建立一个项目,我们可以在.vue中编写代码

开发网络的朋友应该开始。这应该很快

3。构建 - 浏览器编译

我们直接单击右侧进行编译,看看代码是否错误。没有仅仅显示我们自己创建的模板

4。配置Mini -

如何搭建微信小程序的开发环境_微信平台搭建与开发_微信自己搭建小程序

首先,我们需要做一些配置

如果我们是由他人介绍的,我们需要重新获得Uni-App的ID

如果您建立的项目,您可以忽略此部分

查找微信迷你程序配置

我们需要微信Mini计划来查看以下文章并获得一些

获取微信迷你节目的注册过程并获取(完整的布局文化教程)

此ID和我们的登录微信开发人员工具登录需要关联,否则将无法运行

如果我们需要运行别人的小程序,我们还需要修改此部分

四个实施效应

完成上述之后,我们只需要单击上面的运行即可选择微信开发人员工具以自动编译和运行和运行

软件将自动开始选择信任和运行

运行效果

修改X中的代码后修改代码

按CTRL + S自动运行

分享