hbuilderx专题

uni-app 微信小程序开发安装配置 HbuilderX 微信小程序开发工具

安装HbuilderX 官网下载： https://www.dcloud.io/hbuilderx.html 编译器用来编写小程序代码微信小程序开发工具官网下载：https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html 用于小程序的页面调试创建项目 HbuilderX创建项目结构如

macOS HBuilderX 使用安卓模拟器调试项目

夜神模拟器 1、下载并安装夜神模拟器下载地址: 夜神模拟器 2、打开终端，进入到夜神模拟器的 adb 工具所在目录 cd /Applications/NoxAppPlayer.app/Contents/MacOS 3、将 adb 连接到夜神模拟器的端口 ./adb connect 127.0.0.1:26001 4、查看 62001端口是否已经成功连接(没写错就是

HBuilderX wifi无线真机调试

1、使用HBuilderX中自带adb（位置：HBuilderX\plugins\launcher\tools\adbs） 2、手机和电脑连接同一局域网 3、cmd 切换到HBuilderX\plugins\launcher\tools\adbs 4、设置端口：adb tcpip 5555 5、连接：adb connect 手机的ip:5555 如果您有其他需要，或者相关内容有

VSCode打开HBuilderX创建的uniapp项目

要在 Visual Studio Code (VSCode) 中打开由 HBuilderX 创建的 UniApp 项目，您可以按照以下步骤操作：目录 1. 打开 VSCode 2. 打开项目文件夹 3. 安装所需插件 4. 配置项目 5. 启动开发服务 6. 开发和调试 7. 其他工具 1. 打开 VSCode 确保您的 VSCode 已经安装并配置好。如果还没有安装

HBuilderX编写APP一、获取token

一、新建项目二、从onenet获取key.js 1、下载之后的压缩包，解压2、关键就是找到key.js 3、将这个key.js复制到刚才的目录下面去 4、这个key.js文件就是生成token的代码 5、只要调用createCommonToken(params)这个函数，就可以实现生成token了其中onload()是一个固定的函数（1）其中的user_id 就是onenet中的

HBuilderX新增uni-app项目并发布到微信小程序

目录 1、下载软件并安装 2、创建项目并配置小程序id 3、微信开发者工具运行项目并配置 4、开发一个登录页面并发布 5、上传代码并小程序打开 6、手机扫码查看小程序 7、体验完后还要发版要去小程序申请备案认证 1、下载软件并安装下载HBuilderX 下载微信开发者工具微信公众平台申请小程序 2、创建项目并配置小程序id 这里我用的云空间是阿里云

1天搞定uniApp+Vue3+vite+Element UI或者Element Plus开发学习，使用vite构建管理项目,HBuilderX做为开发者工具

我们通常给小程序或者app开发后台时，不可避免的要用到可视化的数据管理后台，而vue和Element是我们目前比较主流的开发管理后台的主流搭配。所以今天石头哥就带大家来一起学习下vue3和Element plus的开发。准备工作 1，下载HBuilderX 开发者工具 2，安装node和npm 至于如何下载开发者工具和安装node我就不说了，大家自行百度即可。一，vue3项目创建 1

uniApp+Vue3+vite+Element UI或者Element Plus开发学习，使用vite构建管理项目,HBuilderX做为开发者工具

我们通常给小程序或者app开发后台时，不可避免的要用到可视化的数据管理后台，而vue和Element是我们目前比较主流的开发管理后台的主流搭配。所以今天石头哥就带大家来一起学习下vue3和Element plus的开发。准备工作 1，下载HBuilderX 开发者工具 2，安装node和npm 至于如何下载开发者工具和安装node我就不说了，大家自行百度即可。一，vue3项目创建 1

HBuilderX遇到的问题集合

1、HBuilderX无法连接上手机原因：手机未开通USB调试功能。解决方法：进入手机开发者模式，在开发者选项中将USB调试开启（默认关闭） 2、H5报错：Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chr

hbuilderX创建的uniapp项目转移到vscode

场景：一直使用hbuilderX开发的朋友想转移到vscode获取更好的TypeScript支持，所以想把整个项目目录拖到vscode进行开发，但发现运行不了，提示没有package.json等，并且不能执行pnpm命令首先，我们先来看一下hbuilderX里的目录结构，如下图所示：可看到这不是一个由npm init初始的项目，所以没有package.json和node_modules，没

HBuilderX内置终端无法使用不能输入

找到HBuilderX的目录打开plugins\builtincef3terminal\script找到main.js用记事本或其他什么打开他把这部分代码替换成这个再重启hbuilderX就可以了 if(isWin){shell = 'C:/Windows/System32/WindowsPowerShell/v1.0/powershell.exe';var osRelease = os

hbuilderX打包vue项目白屏问题以及element-ui的icon图标无法正常显示问题

附录一：hbuilderX打包vue项目白屏问题将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，再打包生成的 dist 文件 build: { // assetsPublicPath: '/',//修改前 assetsPublicPath: './',//修改后 } 附录二eleme

HBuilderX创建uniapp项目使用 tailwindcss

文章目录一、创建package.json文件二、打开终端 yarn / npm 安装依赖三、创建 vue.config.js文件四、创建postcss.config.js文件五、创建tailwind.config.js文件六、App.vue文件的style中引入tailwindcss 一、创建package.json文件 {"devDependencies": {"autopr

【HbuilderX】 uniapp实现 android申请权限和退出app返回桌面

目录 android申请权限：监听用户是否开启权限或关闭权限：退出app返回桌面： android申请权限：首先在 manifest.json 内添加你所需要用到权限添加权限插件 permission.js · 一次就好1/权限插件 - Gitee.comhttps://gitee.com/just-once-1/permission-plugin/b

Hbuilderx引入旧的vue工程，如何折腾

当初在学习前端时就畏难，各种工具，框架要匹配，感觉比后端开发还麻烦。今日导入一旧vue工程算是见识了。工程导入hbuilderx后，进行npm install时出错，删除了node_modules试了几次无解，加入npm install --registry=https://registry.npmmirror.com 还是无解。只能看错误日志一点点啃了。首先发现的错误是，找不到可执行的

hbuilderx 首次启动

首次启动 HBuilderX，首次启动后，您会看到一个选择窗口，您可以在此选择您喜欢的主题、快捷键。点击【开始体验】按钮后，您会看到一个《HBuilderX自述文件》，简单介绍了HBuilderX的特性，点击标签卡上的x可以关闭此文件。体验HBuilderX, 从新建项目开始吧。

hbuilderx创建、运行uni-app

创建uni-app 在点击工具栏里的文件 -> 新建 -> 项目：选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。 uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。运行uni-app 浏览器运行：进入hello-unia

HbuilderX启动微信开发者工具

1)先使用HbuilderX新建项目 2）选择项目“firstUniapp”工具-->设置, 配“微信开发者工具”的安装路径 3）打开“微信开发者工具”，允许服务端口 4） 5）结果

HBuilderX - 使用自定义代码块创建页面模板

HBuilderX 使用自定义代码块创建页面模板进入代码块页面工具 ——》代码块设置 ——》 vue代码块，进入代码块页面。如下图：设置代码块这里为我设置的一个代码块，如需其他格式的可根据内容自定义 "unitemp":{"prefix":"unitemp","body":["<template>","<view class=\"wrap\">","<view>Demo$1<

【HbuilderX】HbuilderX 安卓和 ios 真机调试

目录安卓： ios：首先准备ios 和安卓两台设备以及数据线插入电脑！安卓： 1.这里需要用到 “scrcpy” 插件来实现投屏到电脑端 githubhttps://github.com/Genymobile/scrcpy 2.下载win64位 3.开启手机开发者模式和 USB调试这里用的vivo 就以 vivo为例 4.启动和

HBuilderX 运行Android App项目至雷电模拟器

一、下载安装HBuilderX HBuildeX官网安装最新的正式版，或者点击历史版本查看更多版本；【ps：Alpha版本为开发版，功能更多，但是也不稳定，属于测试版本】直接将压缩包解压，运行HBuildeX即可。二、下载安装雷电模拟器雷电模拟器官网三、将app项目运行至雷电模拟器确保项目为app项目，

Vue学习之使用HBuilderX创建并使用vue3.0项目

Vue学习之使用HBuilderX创建并使用vue3.0项目下文将简述如何使用HBuilderX创建并使用vue3.0项目，包含项目创建、目录介绍、如何引用组件、首页自定义设置。 1、创建vue3.0项目具体操作之前章节已经阐述过不在冗余介绍，创建时选择vue3项目即可。vue2中语法和vue3不一致，vue2中若使用vue3语法会编译报错。 2、目录解析创建好的项目目录如上图

hbuilderx uniapp运行到真机控制台显示手机端调试基座版本号1.0.0，调用uni.share提示打包时未添加share模块

记录一个困扰了几天的一个蠢问题，发现真相的我又气又笑。由于刚开始接触uniapp 移动端开发，有个需求需要使用uni.share API，但是我运行项目老提示打包时没配置share模块我确实没在manifest内配置。网上搜了一些资料，但是我看官网有类似说高版本Hbuilderx编译器可以不用手动配置，会自动配置。而且我复制了一个同事的项目代码，看他调用的分享api没有配置share模块，

uni-app在hbuilderx打开微信开发工具运行

一、运行设置配置微信开发者工具路径运行-运行到小程序模拟器-运行设置配置微信开发工具的安装路径（可浏览文件位置选择）；web服务器端口号在第二步骤获得；二、打开微信开发者工具设置-安全设置打开服务端口开关，获取端口号三、uniapp项目在微信开发工具里打开报错Error:app.json:在项目根目录未找到app.json uni-app 项目我们在微信开发工具里面打开报

HBuilderX插件

HBuilderX>工具插件安装安装新插件前往插件市场安装 1.DCloud插件市场 https://ext.dcloud.net.cn/ 2.GitHub官网插件项目(下载zip) 本地离线包离线安装插件 https://hx.dcloud.net.cn/Tutorial/OfflineInstall open /Applications/HBuilderX.app/Contents/

HbuilderX报错“Error: Fail to open IDE“，以及运行之后没有打开微信开发者,或者运行没有反应的解决办法

开始问题:HbuilderX启动时,打开微信开发者工具报错"Error: Fail to open IDE",以及运行之后没有打开微信开发者,或者运行没有反应的解决办法! 解决办法: 按照步骤一步一步完成分析,除非代码报错,否则都是可以启动的第一步:检查HbuildX是否登录账号第二步:检查微信开发者工具的端口有么有打开第三步:配置manifest.json中