网站打包免费生成APP教程(HBuilder软件将网址打包生成app)

今天一位小美女问我:小哥,你会不会把之前的那个客服源码的网站生成app?也就是将一个网址打包成app?

 

虽然说网络上也有很多“网站打包”的平台,也有所谓的“在线云打包“。既然有小美女问了,我就顺便分享一下吧!

 

准备:

1、网站打包工具或软件:HBuilder

2、必须有一个网站,也就是网址

3、此方法是:免费!免费!免费!重要的事情说3遍。

 

一、下载、安装 HBuilder

HBuilder 是DCloud(数字天堂)推出一款支持HTML5的Web开发IDE。“快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块及很多配套,HBuilder能大幅提升HTML、js、css的开发效率。

现在最新的版本是:HBuilderX;

 

1、HBuilder 下载地址:https://www.dcloud.io/hbuilderx.html

点进以上网址进入下载,选择”正式版“,下载时选择”标准版“即可!

HBuilderX正式版 标准版

 

2、HBuilder 安装

由于我下载的是 zip解压包,不用安装,直接解压就可以使用了,我解压到的路径是:H:\HBuilderX;

 

3、HBuilder 启动

以我这里为例子,只需要双击:H:\HBuilderX\HBuilderX.exe 就可以正常运行此软件了。

 

二、HBuilder 新建项目

 

1、点开HBuilder以后按以下路径新建项目:文件 - 新建 - 项目。

HBuilder 文件 - 新建 - 项目

 

2、如果只是打包一个网址的话,可以选择Wap2App,分别输入项目名称,以及网站地址。

例如:https://www.fujieace.com/,注意此处网址即为app默认打开的网址

再点击“创建”按钮。

Wap2App

 

三、强制横屏设置

此步骤非必要操作,没有这个功能需求的可以直接选择跳过此步骤。

 

1、单纯在manifest中设置横屏或者竖屏并不会起效果,需要加入强制横屏代码,此代码写在app.js中:app.js

代码如下:

// 锁定屏幕方向
	function lockOrientation(){
		plus.screen.lockOrientation("landscape-primary");
	},

如果代码有不懂,请参考官方手册:http://www.html5plus.org/doc/zh_cn/device.html

 

2、将以上代码写在app.js中即可!如下图:

具体横屏或者竖屏代码见下文manifest设置,此处以主屏幕横屏举例。

app.js强制横屏代码

 

3、然后再 manifest.json 设置中同样更改为“landscape-primary”横屏设置。

这里需要注意一下,默认已经是 portrait-primary(竖屏),如果选择多个方向,将根据手机重力感觉自动旋转。

manifest.json 设置中同样更改为“landscape-primary”横屏设置

 

四、网址打包生成app

总算到了最后一个步骤了,马上就大功告成了。

 

1、首先,可以在:manifest.json - 图标配置中设置app图标,并可以选择自动替换所有用到此图标的地方。manifest.json - 图标配置中设置app图标

 

2、准备进行打包,依次点击:发行 - 原生app(云打包)

打包这里需要先登陆HBuilder账号,没有的朋友可以先去注册、验证一下(邮箱验证、手机验证)就可以用了,也很简单。

HBuilder 发行 - 原生app(云打包)

 

3、Android 打包:Android(apk包)

注意去掉广告,按要求更改包名,然后使用老版证书,使用老版证书需要实名认证,点击打包会自己弹窗,点击实名即可,大概一个小时左右即可认证成功。如果等不及可以使用公共测试证书

Android 打包

 

4、iOS打包:ISO(ipa包)

可以选择越狱,并注意去掉广告;HBuilder  iOS打包

 

5、当图标没有叉号便表示可以打包,有叉就不能打包。

HBuilder 当图标没有叉号便表示可以打包,有叉就不能打包。

 

 

6、点击“打包”按钮后,如果没有安装“安心打包”插件,会弹出以下提示框,点击“安装”继续;HBuilder  安心打包

 

7、下载、安装“真机运行插件”,具体去:运行 - 运行到手机或模拟器  - 下载安装真机运行插件

HBuilder  真机运行插件

 

如果你先不下载,你打包的时候就会提示“请先下载真机运行插件然后在重新打包”:

HBuilder  下载真机运行插件

 

8、去 manifest.json - 模块配置 - Contact(通讯录) 取消掉,前面不要打勾

manifest.json - 模块配置 - Contact(通讯录) 取消掉,前面不要打勾。

 

如果“Contact(通讯录)”这里打勾过,打包的时候就会提示如下:

云端服务器返回错误:本次打包选择了通讯录权限,请完成实名认证后再继续打包!如果不需要使用通讯录权限,请在 manifest.json 页面取消通讯录权限后,重新提交打包。

通讯录权限配置:

1. APP模块配置:Contact(通讯录);

2. APP权限配置:android.permission.READ_CONTACTS

云端服务器返回错误:本次打包选择了通讯录权限,请完成实名认证后再继续打包!如果不需要使用通讯录权限,请在 manifest.json 页面取消通讯录权限后,重新提交打包。 通讯录权限配置: 1. APP模块配置:Contact(通讯录); 2. APP权限配置:android.permission.READ_CONTACTS

 

9、再点击“打包”,打包成功后的状态如下图,这里就会生成一个:

iOS越狱包 下载地址,虽然说只能下载5次。

Android安装包位置:C:/Users/NING MEI/Documents/HBuilderProjects/付杰博客/unpackage/release/apk/

HBuilder 云打包成功

 

总结:

现在我们由网站打包成APP就算完成了,只要你有一个网址就可以生成免费的APP,哪怕是一个简简单单的网页也可以,是不是感觉很爽?快去试一试吧!

    A+
发布日期:2021年03月10日 07:35:51  所属分类:HBuilder
最后更新时间:2021-03-10 08:03:37
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
前端工程化构建工具:Babel7+Webpack4
  • ¥ 15元
  • 市场价:15元
Python数据分析与机器学习实战
  • ¥ 398.0元
  • 市场价:498.0元
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
  • ¥ 1999.9元
  • 市场价:20000元
微信小程序前后端全栈开发 (Node.js+Express)
  • ¥ 39.0元
  • 市场价:39.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  0   博主  0

  1. 头像 欧文斯 1

    效果如何呢 :?:

    • 付杰 付杰

      @欧文斯 安卓的还可以,苹果的要正常用麻烦点。