移动网站快速生成app的最快方法,赶紧来试试吧

原创 小秦博客  2020-02-27 17:31:34  阅读 206 次 评论 0 条

小秦博客就是采取这种方式生成的app,很简单,分享给有需要的朋友!大家也可以点击右上角app下载体验!

前期准备

  • 一个移动端网站,这里我用自己的网站:http://www.qinhb.com/

  • Hbuilder官网:http://www.dcloud.io/

步骤一 下载HbuilderX极客开发者工具

打开Hbuilder官网,点击HbuilderX图标进入下载页面

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第1张

点击DOWNLOAD下载

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第2张

根据你的电脑系统选择下载标准版

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第3张

下载内容为一个压缩包,将它解压到本地磁盘(如D盘)根目录下(此步不做演示),解压结果如图,双击HbuilderX.exe运行软件

  • 建议点击鼠标右键-发送到-桌面快捷方式,方便以后使用

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第4张

软件界面如图所示

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第5张

步骤二 环境配置

点击菜单栏 工具 -> 插件安装 找到App开发真机运行,点击安装,安装后如图

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第6张

回到Hbuilder官网,注册一个账号,然后到软件里点击左下角头像进行登陆

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第7张

步骤三 套壳编译

使用浏览器打开我们自己的网站,建议使用谷歌浏览器

按F12打开开发者工具,点击“PC/移动端切换显示”按钮,效果如图

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第8张

打开开发者工具软件,点击 文件 -> 新建 -> 项目

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第9张

选择 Wap2App,填写项目名称并将刚刚复制的网址粘贴进去,模板选择默认模板,然后点击创建

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第10张

右下角会提示项目创建成功,此时我们点击打开 manifest.json 文件进行App配置

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第11张

点击 图标配置 ,上传1024px*1024px的 png格式 图片作为App图标,然后点击 自动生成所有图标并替换

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第12张

选择我们的项目,点击菜单栏中的 发行,选择 App云端打包 ,ios勾选 使用越狱证书,Android勾选 使用DCloud公用证书,点击打包

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第13张

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第14张

等待云端打包,结果可通过 控制台 获取

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第15张

打包成功后,控制台给出下载地址

移动网站快速生成app的最快方法,赶紧来试试吧 个人笔记 第16张

总结

由此,我们使用Hbuilder快速生成了一款简易的App。是不是感觉很简单呢!赶紧来试试吧!

本文地址:http://www.qinhb.com/post/194.html
版权声明:本文为原创文章,版权归 小秦博客 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?