hbuilder x 中运行 uni-app

最新推荐文章于 2024-06-18 13:52:23 发布
最新推荐文章于 2024-06-18 13:52:23 发布
阅读量6k 收藏 3
点赞数
分类专栏： uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengshaopu/article/details/116937793
版权
本文介绍了如何在Hbuilder X中配置并运行uni-app到微信小程序。主要步骤包括设置运行配置中的小程序地址，确保在微信小程序中开启安全地址，以及使用微信小程序开发者工具进行运行。
摘要由CSDN通过智能技术生成

首先我们要配置小程序的地址
1.点击上面的运行、运行到小程序摸机器、微信小程序开发者工具
在这里插入图片描述
2.运行配置里面有小程序运行配置里面的地址就是小程序的地址
在这里插入图片描述
3.还要去微信小程序里面打开安全地址不打开会运行不起来会报错

4.要运行的话还需进入小程序开启安全地址
开启后回去就可以运行了

在这里插入图片描述

5.配置好以后，点击运行、运行到小程序摸机器、微信开发者工具
出现下面这些就证明运行成功会自动打开wx小程序

16:30:49.675 项目 '第一天' 开始编译...
16:30:50.878 请注意运行模式下，因日志输出、sourcemap以及未压缩源码等原因，性能和包体积，均不及发行模式。若要正式发布，请点击发行菜单或使用cli发布命令进行发布
16
最低0.47元/天 解锁文章
fengshaopu
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HBuilder 微信小程序中运行uni-app项目
q1ngqingsky的博客
07-25 2768
在HBuilder中打开设置，在运行配置中填写你本地的微信开发者工具所在路径。
通过Hbuilder X创建uni-app项目并引入UView
08-18
本篇将详细介绍如何通过Hbuilder X来创建uni-app项目，并将其与UView集成。 首先，我们需要安装Hbuilder X，这是一个强大的多端开发工具，集成了代码编辑、预览、打包等功能。下载并安装完成后，打开Hbuilder X，...
[巨详细]使用HBuilder-X启动uniapp项目教程
最新发布
肥晨开发的学习之路
06-18 1088
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。点击运行–》运行到浏览器–》任意选择浏览器。其他的情况下可以选择合适的命令行。
HBuilder X如何运行uni-app 项目
caixuanji的博客
07-31 2万+
HBulider如何运行uni-app 项目 首先，先配置你的node按照路径跟npm安装路径 如果没有装node环境的话先装node环境跟vue-cli脚手架。 配置成功后点击菜单里的运行/运行到浏览器 然后HBulider会进行编译 编译运行终端结果如下： 打开浏览器输入http://localhost:8080/ 即可运行起来 如果报错，请检查插件有没有安装成功 我安装的插件如下图所示： uni-app是必装的插件，因为我们的项目就是用uni-app写的 然后我会装内置浏览器跟内置终端
HbuilderX运行uni-app开发的微信小程序
jieyucx的博客
12-08 3204
HbuilderX运行uni-app开发的微信小程序
通过可视化界面HBuilderX操作uni-app项目
BradenHan的专栏
07-29 2391
由于使用文档太过详细繁杂，对于初次接触uniapp的同学可能有点不知所措。
创建、运行uni-app（通过HBuilderX）
博客
04-14 627
uni-app官网•介绍•快速上手。
HBuilderX uni-app登录实例.zip
09-10
【HBuilderX与uni-app简介】 HBuilderX是一款由DCloud（数字天堂）开发的高效、智能的前端集成开发环境，特别适用于HTML5、JavaScript、Vue等Web开发。它提供了丰富的代码提示、智能感知、自动补全等功能，极大地...
HBuilderX+uni-app开发的支持小程序、安卓、IOS的电商程序，带后台
09-28
【标题】"HBuilderX+uni-app开发的支持小程序、安卓、IOS的电商程序，带后台" 这个项目基于HBuilderX和uni-app框架，旨在构建一个跨平台的电商应用程序，能够覆盖微信小程序、Android以及iOS等多个主流移动操作系统...
uni-app基础.pptx
09-01
在HbuilderX中运行uni-app项目非常简单，只需在菜单栏选择运行，然后选择运行到浏览器或者微信开发者工具。对于微信开发者工具，首次使用需要配置小程序IDE的相关路径，确保能够顺利运行。运行到手机或模拟器时，需...
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
11-21
问题 由于这次项目是在初学 Vue 之后的第一个正式项目，没有考虑到类似 路由懒加载、 按需加载的问题 ，所以呢，也算是没经验。 到了这些天，项目写得差不多了，准备放到服务器测试，才发现这个问题。 优化前： app.js 2.3MB vendor.js 2.4MB vendor.css 612kB app.js.map 9.13MB vendor.js.map 16.21MB //不一一列举.... 优化 接下来看看优化方法。 优化步骤1： 不生成.map文件 在 webpack.prod.cong.js 文件下，修改配置项 sourceMap 设置为 false 或者删除：
uni-app登录实例的实现
03-29
在本文中，我们将深入探讨如何使用uni-app框架和HBuilderX工具来实现一个登录实例。uni-app是一个跨平台的前端框架，它允许开发者编写一次代码，就能运行在多个平台上，如微信小程序、支付宝小程序、H5、App等。...
Hbuildx工具启动uniapp项目
weixin_48952990的博客
07-17 2185
Hbuild工具启动uniapp项目
使用HBuilderX搭建uni-app
仅此一❤
03-04 9187
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 查看更多 1、工具安装 HBuilderX：官方IDE下载地址 2、创建uni-app 创建项目： 创建完后目录结构（common目录是手动创建的） 3、使用vuex vuex是HBuilderX已经内置好了，可以直接使用 代码如下 index.js ...
hbuilderx创建、运行uni-app
zengliguang的专栏
02-24 3082
在百度开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 百度开发者工具，即可在百度开发者工具里面体验uni-app。在抖音开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 抖音开发者工具，即可在抖音开发者工具里面体验uni-app。真机运行：连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。
教你在HbuilderX上使用模拟器运行uni-app,良心教学！！！
f1661434531的博客
07-05 5113
事先声明：本人电脑为windows操作系统，只能使用Android模拟器，因此只对Android模拟器(以逍遥模拟器为例)进行介绍一、下载安装HbuilderX和逍遥模拟器（准备工作）二、添加adb.exe到环境变量三、在HbuilderX中连接模拟器一、下载安装HbuilderX和逍遥模拟器（准备工作）1.下载安装HbuilderXHbuilderX官网链接：https://www.dcloud.io/hbuilderx.html 点击Download for Windows下载安装即可2.下载安装
【蛋糕商城】（一）使用HBuliderX搭建uni-app项目
io_123io_123的博客
04-16 6270
【蛋糕商城】（一）项目搭建：如何搭建一个uni-app项目
HBuilderX中uni-app真机运行调试步骤，以及未检测到手机解决方法。
热门推荐
m0_49016709的博客
10-12 3万+
1、在电脑端安装手机助手，例如华为的华为手机助手。 2、在HBuilderX中设置adb路径（就是电脑上安装的手机助手的路径） 3、助手链接手机，进入手机打开设置=》关于手机，不停点击版本号，直到提示，已开启开发者模式。 4、在设置里搜索 开发人员选项。打开开发人员选项。 5、数据线连接电脑USB连接方式选择MIDI选项。 6、在开发者里打开USB调试，弹窗点击确认。 （没有提示不要紧，应该是你的手机忘记了！，后边重连就好） 7、授权计算机弹出点击确认（没有提示不要紧应该是你的手机忘记了！） 8
hbuilderx安装uni-app插件
07-27
要在HBuilderX中安装uni-app插件，您可以按照以下步骤进行操作： 1. 首先，您需要下载并安装HBuilderX工具。您可以从官方网站上下载HBuilderX的安装包\[1\]。 2. 安装完成后，打开HBuilderX。在工具栏中选择“工具”，然后选择“插件安装”\[3\]。 3. 在插件安装界面中，您可以搜索并找到uni-app插件。点击插件名称，然后点击“安装”按钮进行安装。 4. 安装完成后，您可以在HBuilderX中创建或打开一个uni-app项目。在项目中的任何一个.vue文件中，点击HBuilderX工具栏的“运行”按钮，然后选择“运行到浏览器”，再选择您想要在其中运行uni-app的浏览器\[2\]。 这样，您就可以在HBuilderX中安装uni-app插件，并在浏览器中体验uni-app的H5版本了。希望对您有帮助！ #### 引用[.reference_title] - *1* *2* [uni-app以及HBuilderX安装](https://blog.csdn.net/fangyuan__/article/details/116168774)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [[HBuilderX开发uniapp]自动代码格式化插件安装及配置](https://blog.csdn.net/zxcve/article/details/123633437)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值