• HBuilder开发App教程02-环境搭建,HelloWorld以及真机调试


    环境搭建

    前言

    用HBuilder做开发,其实可以说是最简单的一种环境搭建了,甚至可以说没有环境需要搭建,

    想想android开发的时候,相当痛苦,下载各种sdk,而且都需要FQ,苦不堪言。

    用HBuilder做开发,只需要基础的java环境,其余的android和ios环境统统不需要。

    HBuilder可以做到这一点,是因为:

    1.将打包放到的云端,免去了本地搭建环境进行打包的痛苦,

    2.将调试直接设置为真机调试,免去了各种模拟器调试的痛苦。

    java环境

    只需要最基础的java环境,也就是cmd下可以运行java和javac即可,

    具体教程请自行百度之,都会有很详细的教程,或者找个java开发给搭建。

    下载安装HBuilder

    请在这里下载HBuilder:http://www.dcloud.io/

    下载完成后请教zip包解压缩到自定义的目录(windows),

    并将该目录下的HBuilder.exe发送快捷方式到桌面。

    2.png

    双击该快捷方式,

    第一次打开HBuilder需要注册,还请注册,几分钟搞定,

    登录后即可看到HBuilder主界面:

    3.png

    使用过eclipse或者myeclipse的开发人员应该很熟悉这个界面吧,

    对,HBuilder就是基于eclipse做的二次开发ide,

    所以大部分eclipse的操作,快捷键都可以直接挪过来使用。

    HelloWorld

    介绍

    稍微介绍下HBuilder可以做的事情:

    1.前端开发

    各种快捷键,各种提示,最好的一点是对所有html,css,js的各浏览器兼容性都有提示

    2.web开发

    脱胎自eclipse,自然做java web开发不成问题

    3.app开发

    这个是重头戏,编辑,在线打包,真机调试

    新建项目

    点击主界面的新建移动app,或者通过项目管理器界面右键新建,或者ctrl+n,a新建,

    你会看到如下界面:

    4.png

    1.填写应用名称

    类似eclipse中的项目名称

    2.选择位置

    3.选择模版

    空模版

    mui项目,自动引入mui相关文件

    hello h5+项目,和官网提供的nativejs示例app相同

    hello mui,和官网提供的mui示例相同

    4.点击完成

    这里选择hello mui模版,你也可以选择hello h5+模版,以后开发大部分选择mui项目这个模版。

    文件结构

    新建完成后,左侧项目管理器中会出现如下目录结构:

    5.png

    做前端开发的同学一定很熟悉了吧?

    主要注意的是manifest.json,

    很多app相关配置:app图标,启动页,权限等都在这里配置。

    end

    就这么简单,你已经做完一个HelloWorld了,剩下的就是看效果了。

    真机调试

    连接手机

    请用数据线,而不是电源线连接手机,

    ios需要下载一个调试插件,android可以直接调试,

    绝对不需要额外的环境,不论是ios还是android,

    选中项目,或者打开任意项目中的文件时,

    点击菜单--运行--真机运行--在xx设备上运行,

    或者直接ctrl+r直接运行,

    当你修改过文件后也可以直接ctrl+r,app就会重启。

     

    连接失败

    当你遇到连接失败的时候,

    android只需要随便安装一个手机助手,手机助手连接成功即可,

    ios请参考说明。

     

    run

    ctrl+r

    然后享受你用HBuilder做的第一个app吧。

    6.jpg

    更多教程:

  • 相关阅读:
    【WPF】城市级联(XmlDataProvider)
    【C#】利用反射构建实体
    毕业档案保存
    【WPF】淡入淡出切换页面
    【C#】Lamada表达式演变过程
    【C#】实现INotifyPropertyChanged的3种方法
    【Unity】矩阵运算
    (win7/8/10)鼠标右键添加按下SHIFT键时弹出带管理员权限的“在此处打开命令窗口”
    如何给grldr.mbr和grldr改名
    常用的时间同步服务器地址
  • 原文地址:https://www.cnblogs.com/changningios/p/6510103.html
Copyright © 2020-2023  润新知