混合app(webapp)

Posted 2021-06-17 前端e站（公众号同名）

Hbuilder中开发webapp

• • 前言
  • 开发流程

你好！ 本篇文章主要讲解 webapp 在 Hbuilder 初始化构建流程。可以仔细阅读这篇文章，熟悉一下 webapp 开发的配置，让你快速开启属于你的第一个 webapp 项目。

前言

• 编辑器：Hbuilder，安装地址：https://www.dcloud.io
• UI框架：MUI，文档地址：https://dev.dcloud.net.cn/mui

开发流程

在 Hbuilder 构建一个 webapp 项目

• 新建项目 - 移动app
• 选择 - mui项目
• 文件结构
  

• unpackage 打包文件记录

开发准备

在右上角调整开发模式为 边改边看模式 ，按照 H5 的开发方式进行开发
在 index.html 中加入测试内容

<header class="mui-bar mui-bar-nav">
 	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
 	<h1 class="mui-title">我的标题</h1>
</header>
<div class="mui-content">
	Hello webapp
</div>

打包配置

• 发行 - 云原生安装包
• 打包 - 完成后会生成 .apk 文件（可选择 ios 、Android ）

• 注意： 在打包前会有开发者账号登录，实名认证，按照 Hubilder指引完成操作即可。

4. 在手机上安装 .apk文件，查看你的第一个 app

有兴趣学习前端相关的内容，可以关注公众号：前端e站