HBuilderX 小白上手指南

简介: HBuilderX 小白上手指南

HBuilderX

常见问题 hx.dcloud.net.cn/Tutorial/Qu…

介绍

HBuilderX  是和uniapp配套的开发工具,如果要开发uniapp项目,使用HBuilderX会带来挺多的便利性。

  • 内置多种模拟器
  • 内置可视化的整个uniapp开发流程中的所有功能
  • 新建项目
  • 使用开发插件
  • 发布项目

安装

安装教程 hx.dcloud.net.cn/Tutorial/in…

下载安装后,记得使用 管理员身份打开 hbuilderx

Y[592RDN`584GP()$}Z@)B2.png

新建项目

0KPO))C0W7O`VDDTH70]G4Q.png

运行项目

运行到H5端

3GEH2TB2$}LD3%2MGDM0H[2.png

运行到小程序端 方式一

打开小程序-服务端口

P[UX`ZSP@309][XJ)_$BJ48.png

运行到微信小程序

_O[%AH94IYM26HH}08]UDEI.png

运行到小程序端 方式二

打开微信小程序开发者工具,选择导入

Y08%5SZWJBW7[R($9ZC9D46.png

然后找到该项目下的目录 unpackage\dist\dev\mp-weixin 进行导入即可。

引入开发插件

hbuilderx 提供了一键为uniapp导入项目的功能

选择插件

插件市场 ext.dcloud.net.cn/

LQWO6[R2[PM@I24RB](9}PL.png

打开插件市场,然后选择你需要的插件

D0[{CYG[[JS_Q@JBKH}F9N4.png

阅读插件文档

]V58TWKV@KLYA%0[U{C[6QX.png

导入插件

K~6D(JY5~UI}5)(W%3DE1$G.png

添加示例代码

<template>
  <view>
    <almost-lottery :prizeList="prizeList" :prizeIndex="prizeIndex" @reset-index="prizeIndex = -1"
      @draw-start="handleDrawStart" @draw-end="handleDrawEnd" @finish="handleDrawFinish"
      v-if="prizeList.length" />
  </view>
</template>
<script>
  import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
  export default {
    components: {
      AlmostLottery
    },
    data() {
      return {
        // 以下是奖品配置数据
        // 奖品数据
        prizeList: [{
            prizeId: 1,
            prizeName: "西瓜",
            prizeStock: 10,
            prizeWeight: 10,
          },
          {
            prizeId: 2,
            prizeName: "苹果",
            prizeStock: 10,
            prizeWeight: 10,
          },
          {
            prizeId: 3,
            prizeName: "龙眼",
            prizeStock: 10,
            prizeWeight: 10,
          },
          {
            prizeId: 4,
            prizeName: "葡萄",
            prizeStock: 10,
            prizeWeight: 10,
          },
          {
            prizeId: 5,
            prizeName: "火龙果",
            prizeStock: 10,
            prizeWeight: 10,
          },
          {
            prizeId: 6,
            prizeName: "番茄",
            prizeStock: 10,
            prizeWeight: 10,
          }
        ],
        // 中奖下标
        prizeIndex: -1
      }
    },
    methods: {
      // 本次抽奖开始
      handleDrawStart() {
        // 这里需要处理你的中奖逻辑,并得出 prizeIndex
        // 请查看示例项目中的代码
        this.prizeIndex=2;
      },
      // 本次抽奖结束
      handleDrawEnd() {
        // 完成抽奖后,这里处理你拿到结果后的逻辑
        // 请查看示例项目中的代码
      },
      // 抽奖转盘绘制完成
      handleDrawFinish(res) {
        // 抽奖转盘准备就绪后,这里处理你的逻辑
        // 请查看示例项目中的代码
        // console.log('抽奖转盘绘制完成', res)
      }
    }
  }
</script>

发布uniapp

hbuilderX  内置一键发布功能,但是使用它要

  1. 必须要 注册登录
  2. uniapp  开发者中心上新建应用
  3. 复制 uniappapp id  到 uniapp的 项目中
  4. huilderX中 登录账号
  5. 进行发布

注册账号

打开页面进行注册即可 account.dcloud.net.cn/oauth2?reg=…

在 uniapp  开发者中心上新建应用

复制新建好的  app id

G01CSDI[(8V0LOW[_BS$HOC.png

添加到uniapp项目中

$5E([X4ZJ280}SUC])C1~6J.png

回到hbuilderX

7WC8%WX7PFWKNA3%$E}OOAC.png

一键打包

%OMXS]OJ{(GQRN3]N2UR01F.png


L6Q~T_E)MQ2RH`QL[T6`5{Q.png


目录
相关文章
|
前端开发 IDE 编译器
HBuilderX 最新安装使用教程,附详细图解,持续更新
HBuilderX 最新安装使用教程,附详细图解,持续更新
|
小程序 安全 JavaScript
从零开始uniapp微信小程序项目到发布(超级详细)
最近微信小程序又掀起一波风潮,本文站在新手的角度出发,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考,从零搭建uniapp小程序项目
4176 1
|
小程序 开发工具 开发者
微信开发者工具使用教程
微信开发者工具使用教程
|
1月前
|
人工智能 自然语言处理 数据挖掘
Qwen3.8-Max-Preview深度全解析:2.4万亿参数旗舰MoE模型+Token Plan限时优惠完整落地指南
2026年7月,全新旗舰级混合专家大模型Qwen3.8-Max-Preview正式开放抢先体验,作为通义千问Qwen3系列规格最高、综合推理能力顶尖的新一代模型,该模型总参数量达到2.4万亿(2.4T),是当前线上可调用的原生多模态旗舰模型,综合推理水准对标海外顶级Fable 5模型,在复杂工程开发、长文档深度分析、多步骤智能体自治、跨境多语言创作、海量数据挖掘五大高难度业务场景实现跨越式性能提升。
2118 3
|
前端开发
[巨详细]使用HBuilder-X新建uniapp项目教程
【6月更文挑战第6天】安装HBuilder-X 详细步骤可看上文》》 启动uniapp项目 先打开HBuilder-X
1355 5
|
JavaScript 前端开发 API
你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解
onMounted作为vue3中最常用的钩子函数之一,能够灵活、随心应手的使用是每个Vue开发者的必修课,同时根据其不同写法的特性,来选择最合适最有利于维护的写法。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
移动开发 小程序 API
uniapp中uview组件库的丰富Upload 上传上午用法
uniapp中uview组件库的丰富Upload 上传上午用法
1256 0
|
Web App开发 移动开发 前端开发
uniapp环境H5运行及发行(入门必学)
uniapp环境H5运行及发行(入门必学)
2926 5
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端
|
JavaScript C++
使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件
本文详细介绍了如何使用Vite创建Vue3+TypeScript项目,并整合ElementPlus、Axios、Pinia、Less、Vue-router等组件或插件的步骤和配置方法。
5420 2

热门文章

最新文章