h5(HBuilder+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即可
不得不说，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). 新建项目：

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

(2). 项目目录结构：

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

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

在index.html下面添加如下代码：
<p style="text-align: center;color: #FF0000;font-size: 1.875rem;margin-top: 18.75rem;">Hello World</p>
2. 手机调试查看效果：
用USB连接线将手机和电脑连接，然后点击运行 -> 运行到手机或模拟器 -> （你自己的设备）
（如果这个地方不显示你的手机，可以尝试把usb拔了再试试，如果是android手机需要开启开发者模式。我是下了手机助手：爱思助手，比较方便检查手机和电脑连接）
运行效果如下：

到这一步，基本上是已经完成App的开发与调试阶段了。剩下的就是将App打包出来，android是打包成Apk文件，ios是打包成ipa文件，然后分别安装到对应的手机上。

(4). App的打包与上架

1.App的打包：

点击发行 -> 原生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天，按天数算

然后会出现
在这里插入图片描述填好后，最后填 Y 回车确认，就可以了，生成的dome.keystore，文件在C盘c:\key\下。
生成好之后便可把证书及秘钥信息填写到上面，之后便可以开始打包了。