HBuilder开发词典app（一）--基本页面布局

最新推荐文章于 2024-07-29 22:41:59 发布

焗个面包

最新推荐文章于 2024-07-29 22:41:59 发布

阅读量4.8k

点赞数 1

本文链接：https://blog.csdn.net/sureSand/article/details/81073404

版权

本文介绍了如何使用HBuilder开发词典APP的基本步骤。首先，通过下载HBuilder并新建mui项目来搭建基础框架，然后删除不必要的JS和CSS，引入h.js及所需资源。在index.html中设置header和搜索框布局，利用mtab创建底部选项卡。通过修改mui.css自定义样式，并通过真机调试和边看边改功能进行效果预览。

摘要由CSDN通过智能技术生成

首先下载HBuilder；
在红色➕号按钮下新建移动app，选择mui项目，确定，然后去掉不需要的js和css，并添加h.js和一些我们用到的图片，代码图片自取：https://github.com/lightTrace/Hbuilder-app

首先index.html是整个app的入口页面，header有两个div，一个是书本样式的logo和红色背景，一个是搜索框，下面的四个nav可以通过mtab自动补全hbuilder的底部选项卡：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/mui.css" rel="stylesheet"/>

</head>
<body>
    <header class="mui-bar mui-bar-nav hBg">
     <div id="logo">