专业网站建设品牌，十四年专业建站经验，服务6000+客户--广州京杭网络

免费热线：400-683-0016      微信咨询  |  联系我们

• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

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分析

• 优点：

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即可
  不得不说，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). 代码编写及运行

1. 在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\下。
生成好之后便可把证书及秘钥信息填写到上面，之后便可以开始打包了。

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

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

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