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 最新安装使用教程,附详细图解,持续更新
|
程序员 Linux iOS开发
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
572 1
|
小程序 安全 JavaScript
从零开始uniapp微信小程序项目到发布(超级详细)
最近微信小程序又掀起一波风潮,本文站在新手的角度出发,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考,从零搭建uniapp小程序项目
2677 1
|
11月前
|
数据可视化 数据处理 Python
如何使用Python实现一个基于均线的交易策略
【10月更文挑战第9天】本文介绍了如何使用Python实现一个基于均线的交易策略。主要步骤包括导入所需库(如`pandas`、`numpy`和`matplotlib`),加载股票或期货的历史数据,计算均线和其他指标,实现交易策略逻辑,以及可视化交易结果。示例代码展示了如何根据均线交叉点进行开仓、止损和止盈操作,并提供了注意事项,如数据来源、交易成本和风险管理。
483 7
|
6月前
|
固态存储 安全 测试技术
别再用盗版镜像了!官方渠道获取Win10 ISO+VMware正版激活全流程
本文详细介绍了在VMware虚拟机上安装Windows 10系统的全流程,涵盖环境准备、虚拟机配置、系统安装及优化等关键步骤。内容包括软件资源获取(如VMware与Win10镜像下载链接)、硬件要求核查、虚拟机创建与参数设置(如UEFI/BIOS选择、处理器与内存分配),以及系统安装中的具体操作和常见问题解决方法。此外,还提供了性能调优方案(如显卡加速、快照管理)和高频问题解决方案,确保用户避开常见坑点。最后附有配套资源包和数据验证结果,帮助用户高效完成搭建并提升使用体验。
6393 17
|
JSON 运维 Go
Go 项目配置文件的定义和读取
Go 项目配置文件的定义和读取
|
前端开发
[巨详细]使用HBuilder-X新建uniapp项目教程
【6月更文挑战第6天】安装HBuilder-X 详细步骤可看上文》》 启动uniapp项目 先打开HBuilder-X
698 5
|
机器学习/深度学习 数据可视化 算法
经典时间序列分析概述:技术、应用和模型
时间序列数据按时间顺序收集,具有时间维度的重要性,需专门技术和模型进行分析预测。其应用广泛,涵盖经济预测、风险管理、天气预报、气候建模、流行病学、患者监测、需求预测、客户行为分析及预测性维护等领域。时间序列特征包括趋势、季节性和周期性模式。自相关和偏自相关用于衡量数据点间关系,白噪声表示无自相关的时间序列。平稳性指统计特性随时间保持一致,对建模至关重要。常见模型包括ARMA、ARIMA、SARIMA、ARCH和GARCH,用于捕捉复杂动态并预测未来模式。选择合适模型和确定顺序对准确预测至关重要。掌握这些基础知识不仅增强对复杂模型的理解,还能确保预测方法的稳健性和可靠性。
1310 1
经典时间序列分析概述:技术、应用和模型
|
小程序 JavaScript Java
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。