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


目录
相关文章
|
3天前
|
前端开发 C++
Marp 教程:使用 VSCode 编写专业 PPT
Marp 是一款基于 Markdown 的幻灯片制作工具,结合 VSCode 的强大编辑功能,可让你高效地创建专业 PPT。本教程将指导你如何在 VSCode 中安装 Marp 插件、配置主题和样式,并使用 Markdown 语法创建和美化幻灯片。内容包括基本结构、布局、图片与图表插入、表格制作,以及高级功能如动画效果、数学公式和代码高亮。最后,你将学会如何预览和导出幻灯片。
16 0
|
6月前
|
移动开发 前端开发 JavaScript
快速上手web前端开发(超详细教程)
快速上手web前端开发(超详细教程)
|
7月前
|
设计模式 前端开发 PHP
【PHP开发专栏】Laravel框架快速上手
【4月更文挑战第30天】本文介绍了Laravel,一个流行的PHP Web框架,以其优雅语法和简洁设计受开发者喜爱。内容分为三部分:1) 环境准备与项目创建,包括安装Composer和使用Laravel安装器创建新项目;2) 基本概念和核心组件,涉及路由、控制器、模型和视图的使用;3) 进阶功能与实战应用,如用户认证、表单验证和邮件发送。通过学习,读者可快速上手Laravel,进行高效Web应用开发。
92 0
|
7月前
|
JSON 小程序 数据格式
|
7月前
uniapp项目实践第二章:使用vscode开发uniapp项目
uniapp项目实践第二章:使用vscode开发uniapp项目
1508 0
|
7月前
|
小程序 开发者
uniapp项目笔记
uniapp项目笔记
62 0
|
安全 测试技术 Go
Goland完全攻略 新手快速上手
Goland完全攻略 新手快速上手
279 0
|
开发框架 移动开发 小程序
快速上手小程序框架Taro,安装及使用教程(一)
快速上手小程序框架Taro,安装及使用教程(一)
169 0
|
JSON 小程序 前端开发
微信小程序云开发 初学者入门教程二
微信小程序云开发 初学者入门教程二
71 0
|
存储 运维 小程序
微信小程序云开发 初学者入门教程一
微信小程序云开发 初学者入门教程一
238 0