使用Hbuilder打包前端网站为WebApp(Android,ios应用)

桃扇骨 2022-12-12 15:16 622阅读 0赞

### 准备工作： ###

1.  你要打包的移动端网站地址，如：[http://www.tianguixing.com/dist2/\#/][http_www.tianguixing.com_dist2]
2.  安装 HbuilderX 工具： 官网：[http://www.dcloud.io/][http_www.dcloud.io]

根据你的电脑系统选择下载开发版  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]  
安装成功后，回到[Hbuilder官网][http_www.dcloud.io]，注册一个账号，然后到软件里点击左下角头像进行登陆  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]  
打开开发者工具软件，点击 文件 -> 新建 -> 项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]  
选择 Wap2App，填写项目名称并将刚刚复制的网址粘贴进去，模板选择默认模板，然后点击创建  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]  
右下角会提示项目创建成功，此时我们点击打开 manifest.json 文件进行App配置  
![在这里插入图片描述][20201008104442518.png_pic_center]  
点击 图标配置 ，上传1024px\*1024px的 png格式 图片作为App图标，然后点击 自动生成所有图标并替换

![在这里插入图片描述][20201008104518917.png_pic_center]  
选择我们的项目，点击菜单栏中的 发行，选择 原生App云打包 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]  
Android勾选，ios勾选，Android设置 使用公共测试证书，点击打包  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 5]  
IOS设置，勾选支持iPhone,支持iPad,使用越狱整数（如果选择使用IDP/IEP整数，请看[如何申请证书][Link 1]）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 6]  
点击打包即可，稍等会弹出，打包成功！

结果可通过 控制台 获取：  
![在这里插入图片描述][2020100810560149.png_pic_center]

打包成功后，控制台给出下载地址  
![在这里插入图片描述][20201008105646614.png_pic_center]  
点击下载地址，即可下载Android的apk应用软件，和ios的ipa应用软件（手机越狱才可安装）

[http_www.tianguixing.com_dist2]: http://www.tianguixing.com/dist2/#/
[http_www.dcloud.io]: http://www.dcloud.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/90cc3acb0d9d431a93882dfa8211a477.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/63db9f339fb749a4bcd231800ea0945d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/a77e347232a745529cb5bf7f828711b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/b6303b401e6b4dc68c378952852c005c.png
[20201008104442518.png_pic_center]: /images/20221123/25d31e8649344c848cd9ab5b607d6662.png
[20201008104518917.png_pic_center]: /images/20221123/2d4a94989d604a909921b4a74c62809b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/9f8ab84e0ed44c4d8be4dfadcc2618b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/7c2ef3ac5f414565be19cd9e15581b9a.png
[Link 1]: https://ask.dcloud.net.cn/article/152
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/437c18d5736f4a97b013666706691e97.png
[2020100810560149.png_pic_center]: /images/20221123/3594c238921b47a0b15b1eedfac6ed4f.png
[20201008105646614.png_pic_center]: /images/20221123/d41baf7a94c441df97331b3ba8079ee4.png