h5(HBuilderX+mui)开发App |
您所在的位置:网站首页 › h5是什么软件做出来的 › h5(HBuilderX+mui)开发App |
文章目录
h5(HBuilderX+mui)开发App一、h5开发App分析二、技术选择三、h5开发App实操环节1.工具准备2.创建移动端项目(1). 新建项目(2). 项目目录结构(3). 代码编写及运行(4). App的打包与上架1.App的打包:
h5(HBuilderX+mui)开发App
一、h5开发App分析
优点:
开发成本低,简单、快速、方便,一套代码几乎不用怎么修改就可以同时打包ios、android安装包。相比于App原生开发来说,开发成本要低很多目前很多第三方SDK也越来越多的开放h5端的接口,生态环境比较活跃。h5开发App,采用的是web前端的html5技术,各方面应用技术栈成熟,资料齐全。
缺点:
h5开发App与原生的相比,说到底相当于是将h5界面嵌入到webview中,会存在页面渲染不及原生流畅。如果接触过cordova的朋友,可以研究一下coedova打包完vue成App后代码,其实就是讲h5部分的代码嵌入到原生的activity并通过webview加载。开发工具框架之类的太多,如果一个不熟悉前端的新人过来,几乎不知道该如何下手。 所以对于一些业务逻辑简单,没有复杂的操作处理和与硬件交互的应用,h5开发再合适不过。对一些重型的应用还是原生的为主,h5为辅助也是一个很好的搭配。
二、技术选择
cordova + vue: App整体使用vue项目来编写代码,使用Cordova来打包vue项目成App。 参考: (不过由于Cordova的配置等比较繁琐,本人不太推荐这一种方案)HBuilderX + h5: App整体采用html5,以及mui框架来实现,通过HBuilderX来打包成App。 相比于上一种Cordova打包方式,本人比较推荐这一种方案,不需要很繁琐的配置,并且开发过程中的调试,相信就凭这一点很多开发者就知道该怎么选择了。下面我主要就讲解第二种方案。
三、h5开发App实操环节
1.工具准备
HBuilderX: 下载链接:https://www.dcloud.io/hbuilderx.html 下载完直接解压打开HBuilderX.exe即可 ![]() 注意: 很多朋友可能一直在使用老版本的HBuilder,但是最近HBuilder出现了:ios手机调试遇到----“安装失败 return code=-402620395,请手动安装F:\develop_tools\HBuilder\plugins\com.pandora.tools.android_1.0.0.201808130227\base\iPhone_base.ipa到手机上(可使用iTools安装),并重新运行真机调试”—的问题,并且这个问题官方也没有给出解决方案,所以趁现在项目还不是很多的时候,就转移到HBuilderX上吧 2.创建移动端项目 (1). 新建项目文件 -> 新建 -> 项目: 新创建的项目如下:1是mui框架自带的资源,包含css,js,和字体库。2是项目的默认首页。3是App项目的基础配置,包括App的名称,logo,秘钥等等。 抛开第3部分,其实这就是一个完完全全的html项目,里面都是遵循html的写法,所以这也就是为什么现在称这种开发方式为h5开发App。 Hello World ![]() ![]() 点击 发行 -> 原生App-云打包 参数解析如下: -alias 后面的 domekey 是密钥别名(证书别名),可自己修改 -keypass 后面的 pwd123456 ,可自己修改 会生成密钥文件dome.keystore,存在 c:\key\dome.keystore ,如果你C盘没有key文件夹,要新建一个,不然会报错。 -validity 后面的 3500 ,是有效期,3500天,按天数算 然后会出现 2). ios端: 参考:https://www.jianshu.com/p/e6b86bef7a90 个人推荐一个软件:appuploader。支持生成苹果个人免费证书,唯一的遗憾就是这个软件是只有一个月的免费试用期。 3). 使用公共证书: 如果觉得生成私人证书比较麻烦,只是想打包测试一下,可以选择使用公共的测试证书来进行打包。但是如果想要把App上架,就必须使用私人证书。 3.查看打包状态: 点击 发行 -> 查看云打包状态 打包完成之后,便可将打包好的App文件下载下来。Android端可以直接安装,ios端相对麻烦一点,没有办法直接安装。 后续关于ios端如何推广安装,目前本人资料还未完全整理好,敬请谅解。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |