HBuilderX

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

介绍

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

• 内置多种模拟器

• 内置可视化的整个uniapp开发流程中的所有功能

  • 新建项目

  • 使用开发插件

  • 发布项目

安装

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

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

新建项目

运行项目

运行到H5端

运行到小程序端 方式一

打开小程序-服务端口

运行到微信小程序

运行到小程序端 方式二

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

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

引入开发插件

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

选择插件

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

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

阅读插件文档

导入插件

添加示例代码

<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. 复制 uniapp 的 app id 到 uniapp的 项目中
4. 在huilderX中 登录账号
5. 进行发布

注册账号

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

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

复制新建好的 app id

添加到uniapp项目中

回到hbuilderX中

一键打包

---