美文网首页
HBuilder之App

HBuilder之App

作者: Cynicism_ym | 来源:发表于2018-05-14 19:13 被阅读0次

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP。

    HBuilder提供的打包有 云端打包 和 本地打包 两种,云端打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包.


    步骤一

    下载HBuilder,注册并登陆。首先打开  文件 - 新建 - 移动APP ,输入“应用名称”,
    “位置”可以根据需要自己选择即可,“选择模板”建议选择空模板;
    

    步骤二

        建成后, 在项目管理器会显示新建的项目目录,其中css,img,js和index.html
    这几个文件可删可改可替换,unpackage文件夹是放置app图标
    和启动界面的图片。
    
        manifest.json文件是移动App的配置文件,用于指定应用的显示名称、图标、应用
    入口文件地址及需要使用的设备权限等信息,用户可通过HBuilder的可视化界面视图或者
    源码视图来配置移动App的信息。
    
    如果删除了css,img,js文件夹和index.html文件,就把其他自己的项目文件对应复制
    到文件夹中,注意html文件中的引用路径需要保持正确。
    

    步骤三

        文件复制完成后,刷新更新下,双击打开manifest.json文件来配置App。
        appid:点击云端获取(注册登陆自带)。版本号:根据需要来编辑。页面入口:默认是index.html,根据
    自己项目需要,更改APP的启动页面。应用描述:自己随便填。应用是否全屏显示:勾上就全屏显示。
    
        点击"+"号的正方形方框,选择图标素材的路径找到图标素材,再点击" 自动生成所有图标
    并替换"按钮,完成图标生成和替换。
    
        所有图标自动生成在unpackage/res/icons文件夹下
    

    步骤四

      启动图片(splash)配置,点击切换到启动图片配置
    
        1),启动选项:默认
        2),启动图片设置,根据自己需要是Android还是iOS平台,再根据不同设备对应做出启动图片
        3),在unpackage→res文件下新建个文件命名"splash",把做好的启动图片放到这个文件里面。
        4),在启动图片设置里点击"选择",找到刚放进来的启动图片
        5),SDK配置:有需要就配置,没有就默认就行。
        6),模块权限配置:有需要就配置,没有就默认就行。
        7),页面引用关系:
    
               首先点击“扫描代码”,再点击左边index.html文件
    
                该功能是什么意思:点击左侧html文件,右侧会显示不同的文件图片等。可以表示左侧html
    
                文件加载时所需要的资源。
    
         8)、代码视图:在代码视图里查看设置是否正确,确定后ctrl+s保存好。
    

    步骤五

    设置好配置选项,正式进入打包阶段:
    
          1、HBuilder里点:"发行"-"发行为原生安装包"开始打包
    
    这里介绍一下iOS打包
    
    1),这里如果选择越狱包就不需要苹果证书,一路默认设置就可以打包成功,但是打包的App只能安装在越狱过
    的手机,没越狱安装不了。
    
    2),如果使用苹果证书,这里推荐一个申请iOS证书的工具 Appuploader。免苹果付费开发者账号,直接使用
    普通苹果id,就能使用Appuploader申请ios测试证书,打包ipa安装到非越狱设备。
    

    工具的安装网址:http://www.applicationloader.net/blog/zh/72.html

    免开发者账号申请iOS证书教程:http://www.applicationloader.net/blog/zh/1073.html

            2、提交成功后点击确定,就可以查看App打包状态
    
             3、最后将安装包传到手机,并安装。
    

    相关文章

      网友评论

          本文标题:HBuilder之App

          本文链接:https://www.haomeiwen.com/subject/xevddftx.html