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


目录
打赏
0
0
0
0
133
分享
相关文章
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
495 1
从零开始uniapp微信小程序项目到发布(超级详细)
最近微信小程序又掀起一波风潮,本文站在新手的角度出发,比较适合第一次使用uniapp 开发微信小程序的伙伴,或者没有过实战经验的小伙伴参考,从零搭建uniapp小程序项目
2225 1
项目支付接入支付宝【沙箱环境】
该博客文章详细介绍了如何在PC端项目中接入支付宝支付功能,特别是在沙箱环境中的配置和实现步骤。文章提供了详细的配置指南,包括获取支付宝公钥和私钥、配置沙箱应用环境、生成密钥、设置服务端代码以及调用支付接口等步骤,并附有相应的代码示例和说明。
项目支付接入支付宝【沙箱环境】
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
1475 12
Go 项目配置文件的定义和读取
Go 项目配置文件的定义和读取
vue3+ts+elementplus写一个登录页面教程
【6月更文挑战第3天】本文介绍了如何使用 Vue 3 和 TypeScript 创建一个登录页面。首先,需安装 Vue CLI,然后创建新项目并启用 TypeScript 支持。接着,创建 `Login.vue` 组件,设计登录表单,包括用户账号、密码和验证码字段,并实现相关验证规则。页面样式包括背景、登录框和按钮等元素的布局与样式。最后,展示了`&lt;script&gt;`部分的代码,包括表单验证逻辑、生成验证码的函数以及登录提交处理。文章还提供了一个登录页面的截图和完整代码示例。
4650 1
[巨详细]使用HBuilder-X新建uniapp项目教程
【6月更文挑战第6天】安装HBuilder-X 详细步骤可看上文》》 启动uniapp项目 先打开HBuilder-X
605 5
经典时间序列分析概述:技术、应用和模型
时间序列数据按时间顺序收集,具有时间维度的重要性,需专门技术和模型进行分析预测。其应用广泛,涵盖经济预测、风险管理、天气预报、气候建模、流行病学、患者监测、需求预测、客户行为分析及预测性维护等领域。时间序列特征包括趋势、季节性和周期性模式。自相关和偏自相关用于衡量数据点间关系,白噪声表示无自相关的时间序列。平稳性指统计特性随时间保持一致,对建模至关重要。常见模型包括ARMA、ARIMA、SARIMA、ARCH和GARCH,用于捕捉复杂动态并预测未来模式。选择合适模型和确定顺序对准确预测至关重要。掌握这些基础知识不仅增强对复杂模型的理解,还能确保预测方法的稳健性和可靠性。
767 1
经典时间序列分析概述:技术、应用和模型
微信小程序+SpringBoot接入后台服务,接口数据来自后端
这篇文章介绍了如何将微信小程序与SpringBoot后端服务进行数据交互,包括后端接口的编写、小程序获取接口数据的方法,以及数据在小程序中的展示。同时,还涉及到了使用Vue搭建后台管理系统,方便数据的查看和管理。
微信小程序+SpringBoot接入后台服务,接口数据来自后端

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问