如何通过HBuilderX开发调试微信小程序

最新推荐文章于 2024-05-09 20:16:49 发布

NC_star

最新推荐文章于 2024-05-09 20:16:49 发布

阅读量2.3w

点赞数 5

分类专栏： uniapp 文章标签：微信小程序小程序微信

本文链接： https://blog.csdn.net/NC_star/article/details/121078361

版权

uniapp 专栏收录该内容

1 篇文章 2 订阅

订阅专栏

（1）通过HbuilderX开发工具创建一个基于uniapp框架的项目；

（2）对该项目进行配置：找到工具-》设置，在设置中找到如下选项，并填写微信小程序开发工具的执行文件路径。

（3）登录网址：微信公众平台申请appId，然后将该appid配置到项目中，如下：

（4）打开微信小程序开发者工具，并进行设置，如下：

（5）在HBuilderX中启动运行该uniapp项目，启动后，会自动运行在微信小程序工具端。

(6) 如果需要在真机测试，可以在微信小程序工具端生成二维码，然后微信扫描即可进行真机预览。

立减 ¥

5
点赞
踩
39

收藏

觉得还不错? 一键收藏
0
评论
如何通过HBuilderX开发调试微信小程序

（1）通过HbuilderX开发工具创建一个基于uniapp框架的项目；（2）对该项目进行配置：找到工具-》设置，在设置中找到如下选项，并填写微信小程序开发工具的执行文件路径。（3）登录网址：微信公众平台申请appId，然后将该appid配置到项目中，如下：（4）打开微信小程序开发者工具，并进行设置，如下：（5）在HBuilderX中启动运行该uniapp项目，启动后，会自动运行在微信小程序工具端。 (6) 如果需要在真机测试，可以在微信小程序工具端生成二维...
复制链接

扫一扫

专栏目录

【uniapp】HbuilderX发布微信小程序

Web_boom的博客

09-19

1万+

一、首先配置HbuilderX 与微信开发者工具关联，在HbuilderX中打开【工具】-【设置】-【运行配置】中找到小程序运行配置，在下面微信开发者工具路径将你本地微信开发者工具目录进行设置。提到微信公众平台后的代码为开发版本，想要将开发版本发布成线上版本之前要提交审核，审核通过后就会在审核版本一栏出现，这时就可以将小程序进行发布为线上版本。执行该命令后，微信小程序将会在小程序模拟器中进行打开，这个时候我们就可以看到小程序具体的页面了，相当于开发前端页面时把html在浏览器中进行打开。

Uni-app运用HBuilderX和微信web开发者工具做微信小程序

m0_75260695的博客

06-14

6867

Uni-app的介绍:uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5以及各种小程序、快应用等多个平台.HBuilderX中的H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。简称HX。HX是轻如编辑器、强如IDE的合体版本。微信web开发者工具的介绍:为帮助开发者更方便、更安全地开发和调试基于微信的网页，我们推出了微信 web 开发者工具。

参与评论您还未登录，请先登录后发表或查看评论

基于微信小程序个人健康信息管理小程序（包括数据库，源码，教程）.zip

04-24

微信小程序项目实战，微信小程序课程设计，基于微信小程序开发的，含有代码注释，新手也可看懂。包含：项目源码、数据库脚本、部署说明等，该项目可以作为课程设计使用，前后端代码都在里面。该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。里面有部署教程，项目都经过严格调试，确保可以运行！如果部署过程有疑问的话,可以叫 v xiaoxu_9411 咨询一. 技术组成前端：微信小程序 开发环境：微信开发者工具数据库：MySql 后台框架：SpringBoot/SSM （如果有的话）二. 部署说明 1. 如果含有服务端的话，一定要先部署好服务端，然后再用微信开发者工具导入，否则，小程序可能会报错 2. 微信小程序，用微信开发者工具导入或者 HBuilder x 工具 3. 数据库可视化软件，推荐使用它 Navicat，MySql 建议使用 5.7 版本

一栈走天下：使用HBuilderX高效搭建Uni-App微信小程序开发环境

热门推荐

w3222371135的博客

08-07

2万+

一、配置在微信开发者工具的设置中开启，如图：在HBuilderX中新建项目，选择uni-app，如图：在HBuilderX中编写代码目录结构如图：编写代码： index.less .content{ padding: 0 40rpx; image{ width: 100%; } .title{ display: block; text-align: cente...

基于hbuilder开发的微信小程序音乐播放系统，可添加本地音乐（含源码）

10-19

可用hbuilder开发工具直接打开微信小程序，可直接运行，不需要调试，可直接使用。播放设置、下一首、上一首、暂停按键、播放列表等功能

超简单的微信小程序轮播图

01-03

Tips：微信小程序可以在HbuilderX用HTML标签（如Ddiv、span等）写前端代码，也可以用微信小程序语法写（view、swiper标签），然后npm run dev编译后，在微信开发者工具里面导入该项目，就可以调试项目，查看效果。...

基于微信小程序的健康管理（毕业设计，包括数据库，源码，教程）.zip

04-24

微信小程序毕业设计，微信小程序课程设计，基于微信小程序开发的，含有代码注释，新手也可看懂,可作为毕业设计，课程设计。包含：项目源码、数据库脚本、部署说明等，该项目可以作为课程设计使用，前后端代码都在...

基于微信小程序党员之家服务系统小程序（包括数据库，源码，教程）.zip

04-24

微信小程序项目实战，微信小程序课程设计，基于微信小程序开发的，含有代码注释，新手也可看懂。包含：项目源码、数据库脚本、部署说明等，该项目可以作为课程设计使用，前后端代码都在里面。该系统功能完善、...

基于微信小程序的租房平台（毕业设计，包括源码，数据库，教程）.zip

06-01

小程序 毕业设计，小程序 课程设计，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。包含：项目源码、数据库脚本、软件工具等，该项目可以作为毕设、...

基于微信小程序微信阅读小程序（包括数据库，源码，教程）.zip

04-24

基于微信小程序的食堂线上预约点餐系统（毕业设计，包括源码，数据库，教程）.zip

06-01

基于微信小程序坛小程序（包括数据库，源码，教程）.zip

04-24

基于微信小程序校园订餐小程序（包括数据库，源码，教程）.zip

04-24

使用hbuilder x 把网址打包成app

周小仙女的博客

02-15

2601

1、选择新建项目，选择 2、选择wap2App 填写app名称，网址 3、点击创建 4、在manifest.json文件中配置好app的基本信息，比如启动图标之类的 5、右击项目，点击发行，选择原生app打包，就可以了 ...

在HBuilderX上面新建微信小程序项目

loongkingwhat的博客

08-01

1万+

文章目录一、前期准备（一）微信开发者工具（二）HbuilderX二、创建项目步骤（一）HBuilderX创建小程序工程（二）、配置小程序AppID（三）、运行项目到微信小程序 一、前期准备（一）微信开发者工具 小程序开发工具是腾讯官方发布的用于开发微信小程序的IDE软件，可以从微信官方网站下载到这个工具，建议下载稳定版本的软件。下载安装文件后，执行默认安装即可，初次启动需要扫码才能登陆该软件【重要】为了保证微信开发者工具与HbuilderX配合使用，必须开放小程序的服务端口。这样将来HbuilderX

HBuilderX开发微信小程序在《微信开发者工具》中运行

weixin_40544290的博客

01-02

1729

HBuilderX，微信开发者工具，开发微信小程序

hbuilderx开发微信小程序

05-01

HBuilderX 是一款跨平台的 IDE，可以用于开发多种类型的应用，包括微信小程序。以下是使用 HBuilderX 开发微信小程序的步骤： 1. 安装 HBuilderX：前往官网下载并安装 HBuilderX。 2. 创建项目：打开 HBuilderX，选择「新建项目」，选择「小程序」，输入项目名称和路径，点击「创建」。 3. 编写代码：在 HBuilderX 中，可以使用类似于 Web 开发的方式编写小程序代码，包括 HTML、CSS 和 JavaScript。 4. 预览项目：点击「运行」按钮，选择「微信开发者工具」，将项目导入微信开发者工具中，并在微信开发者工具中预览项目。 5. 调试和发布：在微信开发者工具中进行调试和发布，可以通过 HBuilderX 将代码上传到微信小程序平台上。以上就是使用 HBuilderX 开发微信小程序的基本步骤，希望对你有所帮助。