h5(HBuilder+mui)开发App

时间:2024-04-08 09:57:34

h5(HBuilder+mui)开发App

一、h5开发App分析

  • 优点:
  1. 开发成本低,简单、快速、方便,一套代码几乎不用怎么修改就可以同时打包ios、android安装包。相比于App原生开发来说,开发成本要低很多
  2. 目前很多第三方SDK也越来越多的开放h5端的接口,生态环境比较活跃。
  3. h5开发App,采用的是web前端的html5技术,各方面应用技术栈成熟,资料齐全。
  • 缺点:
  1. h5开发App与原生的相比,说到底相当于是将h5界面嵌入到webview中,会存在页面渲染不及原生流畅。如果接触过cordova的朋友,可以研究一下coedova打包完vue成App后代码,其实就是讲h5部分的代码嵌入到原生的activity并通过webview加载。
  2. 开发工具框架之类的太多,如果一个不熟悉前端的新人过来,几乎不知道该如何下手。
    所以对于一些业务逻辑简单,没有复杂的操作处理的应用,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即可
    h5(HBuilder+mui)开发App不得不说,HBuilderX这一版本(2.4.6.20191210)的用户体验要比之前好很多。

注意: 很多朋友可能一直在使用老版本的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). 新建项目:

文件 -> 新建 -> 项目:
h5(HBuilder+mui)开发App
对于项目来说,尽可能在使用最少的框架来完成项目的整体业务,这样方便后期的维护。本人选用mui框架的理由是:mui框架里面,在使用很多控件的时候,会优先调用手机原生的控件,比如说弹出框等等,在很大程度上保证了App使用的流畅性。

(2). 项目目录结构:

新创建的项目如下:1是mui框架自带的资源,包含css,js,和字体库。2是项目的默认首页。3是App项目的基础配置,包括App的名称,logo,秘钥等等。
抛开第3部分,其实这就是一个完完全全的html项目,里面都是遵循html的写法,所以这也就是为什么现在称这种开发方式为h5开发App。
h5(HBuilder+mui)开发App

(3). 代码编写及运行:

  1. 在index.html下面添加如下代码:
    <p style="text-align: center;color: #FF0000;font-size: 1.875rem;margin-top: 18.75rem;">Hello World</p>
    h5(HBuilder+mui)开发App2. 手机调试查看效果:
    用USB连接线将手机和电脑连接,然后点击 运行 -> 运行到手机或模拟器 -> (你自己的设备)
    (如果这个地方不显示你的手机,可以尝试把usb拔了再试试,如果是android手机需要开启开发者模式。我是下了手机助手:爱思助手,比较方便检查手机和电脑连接)
    运行效果如下:
    h5(HBuilder+mui)开发App
    到这一步,基本上是已经完成App的开发与调试阶段了。剩下的就是将App打包出来,android是打包成Apk文件,ios是打包成ipa文件,然后分别安装到对应的手机上。

(4). App的打包与上架

1.App的打包:

点击 发行 -> 原生App-云打包
h5(HBuilder+mui)开发App
2. 生成上图中需要的证书秘钥等:
1). Android端:
打开cmd窗口在里面输入:
keytool -genkey -alias domekey -keyalg RSA -keysize 1024 -keypass pwd123456 -validity 3500 -keystore c:\key\dome.keystore

参数解析如下:
-alias 后面的 domekey 是**别名(证书别名),可自己修改
-keypass 后面的 pwd123456 ,可自己修改
会生成**文件dome.keystore,存在 c:\key\dome.keystore ,如果你C盘没有key文件夹,要新建一个,不然会报错。
-validity 后面的 3500 ,是有效期,3500天,按天数算

然后会出现
h5(HBuilder+mui)开发App填好后,最后 填 Y 回车确认,就可以了,生成的dome.keystore,文件在C盘c:\key\下。
生成好之后便可把证书及秘钥信息填写到上面,之后便可以开始打包了。

2). ios端:
参考:https://www.jianshu.com/p/e6b86bef7a90
个人推荐一个软件:appuploader。支持生成苹果个人免费证书,唯一的遗憾就是这个软件是只有一个月的免费试用期。

3). 使用公共证书:
如果觉得生成私人证书比较麻烦,只是想打包测试一下,可以选择使用公共的测试证书来进行打包。但是如果想要把App上架,就必须使用私人证书。

3.查看打包状态:
点击 发行 -> 查看云打包状态
打包完成之后,便可将打包好的App文件下载下来。Android端可以直接安装,ios端相对麻烦一点,没有办法直接安装。
后续关于ios端如何推广安装,目前本人资料还未完全整理好,敬请谅解。