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


目录
相关文章
|
NoSQL Linux Apache
brpc最新安装上手指南
brpc最新安装上手指南
1040 1
brpc最新安装上手指南
|
5月前
|
移动开发 前端开发 JavaScript
快速上手web前端开发(超详细教程)
快速上手web前端开发(超详细教程)
|
6月前
|
JSON 小程序 数据格式
|
安全 测试技术 Go
Goland完全攻略 新手快速上手
Goland完全攻略 新手快速上手
265 0
|
存储 运维 小程序
微信小程序云开发 初学者入门教程一
微信小程序云开发 初学者入门教程一
232 0
|
JSON 小程序 前端开发
微信小程序云开发 初学者入门教程二
微信小程序云开发 初学者入门教程二
69 0
|
Web App开发 IDE Java
手把手教你下载安装Goland 新手别错过!
手把手教你下载安装Goland 新手别错过!
384 0
|
Linux Python Windows
Bellhop 从入门到上手
Bellhop,是一种水声工具箱,可以进行水下声学仿真,通过 env 文件设置环境参数,可得到与之对应的声线信息、多途等仿真
1032 1
|
开发工具
HBuilderX快速上手
HBuilderX快速上手