HBuilderX 常见问题 hx.dcloud.net.cn/Tutorial/Qu…
介绍HBuilderX 是和uniapp配套的开发工具,如果要开发uniapp项目,使用HBuilderX会带来挺多的便利性。
内置多种模拟器
内置可视化的整个uniapp开发流程中的所有功能
新建项目
使用开发插件
发布项目
安装 安装教程 hx.dcloud.net.cn/Tutorial/in…
下载安装后,记得使用 管理员身份打开 hbuilderx
image-20220704143020580新建项目2022-07-04123054运行项目运行到H5端image-20220704123314731运行到小程序端 方式一打开小程序-服务端口image-20220704123431176运行到微信小程序image-20220704142120697运行到小程序端 方式二打开微信小程序开发者工具,选择导入image-20220704142621013然后找到该项目下的目录 unpackage\dist\dev\mp-weixin 进行导入即可。
引入开发插件 hbuilderx 提供了一键为uniapp导入项目的功能
选择插件 插件市场 ext.dcloud.net.cn/
image-20220704151159667打开插件市场,然后选择你需要的插件
DCloud 插件市场阅读插件文档DCloud 插件市场导入插件image-20220704143732008添加示例代码代码语言:javascript复制
@draw-start="handleDrawStart" @draw-end="handleDrawEnd" @finish="handleDrawFinish" v-if="prizeList.length" /> 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) } } } 发布uniapphbuilderX 内置一键发布功能,但是使用它要 必须要 注册 和 登录在 uniapp 开发者中心上新建应用复制 uniapp 的 app id 到 uniapp的 项目中在huilderX中 登录账号进行发布注册账号 打开页面进行注册即可 account.dcloud.net.cn/oauth2?reg=… 在 uniapp 开发者中心上新建应用复制新建好的 app id image-20220704152107100添加到uniapp项目中image-20220704152222249回到hbuilderX中 image-20220704152406867一键打包image-20220704150117531image-20220704152619176