使用Hbuilder快速生成WebApp

使用Hbuilder快速生成WebApp

前期准备

• 一个移动端网站，例如：www.cbizunion.top/
• Hbuilder官网：www.dcloud.io/

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

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

点击右上角下载

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

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

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

软件界面如图所示

步骤二 环境配置

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

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

步骤三 套壳编译

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

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

有些网站不能立即切换成移动端页面，此时按F5刷新一下，然后把网址复制下来

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

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

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

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

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

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

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

总结

由此，我们成功完成了任务，使用Hbuilder快速生成了一款WebApp。是不是感觉很简单呢！ 如果你还想了解更多信息，请访问官方文档：ask.dcloud.net.cn/docs/#//ask…

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!