mui-app开发之项目类型概览

小薛引路

已于 2022-01-27 18:03:09 修改

阅读量3k

点赞数 2

分类专栏： muiapp开发文章标签： android web app webview

于 2022-01-24 15:27:26 首次发布

本文链接：https://blog.csdn.net/m1m2m3mmm/article/details/122664616

版权

muiapp开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本节内容来自B站视频的笔记：HBuilder+MUI_哔哩哔哩_bilibili认识HBuilder以及MUI，并使用HBuilder和MUI创建简单Apphttps://www.bilibili.com/video/BV1kW411Q7Eb认识HBuilder以及MUI，并使用HBuilder和MUI创建简单Apphttps://www.bilibili.com/video/BV1kW411Q7Eb

1 通用一般流程

使用HBuilderX创建项目一般步骤：

文件 -- 新建 -- 项目

选择5+APP -- 设置项目名称 -- 设置项目存储路径 -- 选择要创建的项目类型 -- 创建项目

2 各种类型项目解读

2.1 默认项目类型

2.1.1 目录结构

默认项目类型中，只是创建了目录，但各目录都是空的：

css：定义样式表文件
img：定义图片资源文件
js：定义js文件
unpackage：项目打包资源文件
index：默认的主页面
manifest：项目配置文件

2.1.2 manifest

基础配置

应用图标设置

设置启动页面

拓展模块勾选

权限设置

其他模块设置

源码视图：以源码的形式，展示所有的配置项；开发中，直接粘贴官方的案例代码即可实现配置

2.2 mui项目

创建项目时，选择mui项目，如下图：

生成项目目录结构如下：

较默认项目，mui项目文件更加丰富：

css：给出了官方的 mui 样式表，及其min版本，两者内容一样只是说后者删掉了所有的空格，体积更小
fonts：字体文件，在mui中一些图标是以字体的形式给出的
js：给出了mui的官方发js文件，及其min版本
unpackage：同上
index.html：同上
manifest.json：同上

2.3 mui登陆模板

该模板包含了APP常用的注册、登录、设置、解锁、忘记密码等通用功能，降低用户开发任务量。

2.3.1 项目创建与目录介绍

创建项目时，选择mui项目模板，如下图：

目录结构如下：

2.3.2 页面预览

打开任意页面，点击右上角的【预览】即可实时查看页面的效果

手势解锁页面：

2.4 底部选项卡模板

该模板用于创建包含底部选项卡的应用，如微信等

该模板内置mui的新页面创建和跳转的源代码，可以直接拷贝学习使用

创建项目时，选择【底部选项卡】模板，如下图：

目录结构及解释

2.5 H5+

该模板集成了大量应用案例，可以提升代码效率。说白了，想要什么功能，在这里抄过去，然后自己改改就OK了。

对应的APP调用手机底层功能时使用：

HTML5+ API Reference (html5plus.org)https://www.html5plus.org/doc/zh_cn/webview.html

2.6 mui

2.6.1 概述

该模板的源码功能与官方首页的组件功能一致：

MUI-最接近原生APP体验的高性能前端框架 (dcloud.net.cn)https://dev.dcloud.net.cn/mui/https://dev.dcloud.net.cn/mui/

2.6.2 定位某一控件的源码

如果想查看某个控件的源码：在控件上，右键，选择【查找代码中对应的DOM节点】

根据代码中提示的example/***.html，在项目的examples目录下，去查找对应的页面即可

3 要点解析

3.1 头部导航栏源码分析

快捷键：mHeader

代码片段：

        <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>

类中各属性的含义：

mui-bar：导航栏的基本类
mui-bar-nav：头部导航栏
mui-action-back：关闭当前视图
mui-icon：mui的官方图标的基本类
mui-icon-left-nav：图标的样式；在 examples/icons 目录下，选择其他图标更换
mui-pull-left：左浮动，图标在导航栏显示的位置
mui-title：头部导航的文本值

根据上述源码解析，我们如果想在右边加一个 mui-icon mui-icon-bars 图标，照样学样，有：

<a class="mui-action-back mui-icon mui-icon-bars mui-pull-right"></a>

写css代码修改样式表

.mui-bar-nav{
    background: #fff;
};

3.2 内容与底部导航

内容快捷键：mBody

底部导航栏快捷键：mTab

3.3 mui 与 H5+ 的区别

mui 是前端框架，H5+是调用底层APP功能

MUI-最接近原生APP体验的高性能前端框架 (dcloud.net.cn)https://dev.dcloud.net.cn/mui/https://dev.dcloud.net.cn/mui/HTML5+ API Reference (html5plus.org)https://www.html5plus.org/doc/zh_cn/webview.htmlhttps://www.html5plus.org/doc/zh_cn/webview.html

Enable GingerCannot connect to Ginger Check your internet connection
or reload the browserDisable in this text fieldRephraseRephrase current sentence0Log in to edit with Ginger×