uni-app开发之编辑器HBuilderX(一)

前言:一直想要研究uni-app,苦于没有合适的项目和时机,最近帮同事解决一些小程序的bug,终于下定决心好好整理一下笔记,开始入坑uni-app

一、编辑器(HBuilderX)

uni-app需要真机模拟,所以使用专业的编辑器会事半功倍。

1、下载地址HBuilderX-高效极客技巧    (建议使用正式版----app开发版) 

说明:Alpha更新频率高,不稳定,所以最好下载正式版

标准版可用来开发web,和vs code 、webstrom差不多,要运行uni-app需要装对应插件

App版装了很多App/Uni-app的插件,开箱即用

2、安装,下载后直接解压到某个文件夹,双击下面的图标即可使用,或者发送快捷图标到桌面

3、使用,双击图标

 首次进入会让你勾选主题,还有你自己熟悉的快捷键方案(这个真是太赞了,之前习惯用vs code)

 4、新建项目

文件----新建----项目,选择你想要的类型,输入项目名称即可,当然如果有现成的git或svn地址,可点击左下角进行导入项目。

可参考uni-app官网

备注:若用vue-cli创建项目出现问题,请参见我的另一篇文章

使用vue-cli创建uni-app的常见问题_谭鱼鱼儿的博客-CSDN博客

HBuilderX是DCloud推出的一款跨平台的开发工具,而uni-app是基于Vue.js框架的一种跨平台应用开发解决方案。下面我将简要介绍HBuilderX uni-app的开发教程。 1. 环境搭建:首先,我们需要下载并安装HBuilderX开发工具,然后在工具的插件市场中搜索并安装uni-app插件。安装完成后,打开HBuilderX,点击新建uni-app项目,选择你的开发平台(如App、小程序等)和模板,填写项目名称和存储路径,点击完成即可创建一个uni-app项目。 2. 组件使用:uni-app开发中使用的是Vue.js框架,所以你可以使用Vue语法来编写你的界面和逻辑。在HBuilderX编辑器中,可以直接创建和编辑uni-app项目中的页面,你可以添加页面、组件和自定义样式等。 3. API调用:uni-app封装了一些常用的API接口,可以用来进行数据交互、地理位置服务、摄像头调用等。你可以在编写代码的过程中,直接调用这些API接口来完成你的功能。 4. 打包发布:完成开发后,你可以选择将你的uni-app项目打包发布到不同的平台,如App、小程序等。在HBuilderX中,你可以选择对应的平台,然后进行打包操作。 总的来说,使用HBuilderX开发uni-app项目可以让你在一个工具中完成多个平台的开发,极大地提高了开发效率和便利性。你可以通过学习和实践上面的教程,掌握HBuilderX uni-app开发的基本技能,进行跨平台开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值