HBuilderX
介绍
HBuilderX 是和uniapp配套的开发工具,如果要开发uniapp项目,使用HBuilderX会带来挺多的便利性。
- 内置多种模拟器
- 内置可视化的整个uniapp开发流程中的所有功能
- 新建项目
- 使用开发插件
- 发布项目
安装
下载安装后,记得使用 管理员身份打开 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 内置一键发布功能,但是使用它要
- 必须要 注册 和 登录
- 在 uniapp 开发者中心上新建应用
- 复制 uniapp 的
app id
到 uniapp的 项目中 - 在huilderX中 登录账号
- 进行发布
注册账号
打开页面进行注册即可 account.dcloud.net.cn/oauth2?reg=…
在 uniapp 开发者中心上新建应用
复制新建好的 app id
添加到uniapp项目中
回到hbuilderX中
一键打包