1 通用一般流程

2 各种类型项目解读

2.1 默认项目类型

2.1.1 目录结构

2.1.2 manifest

2.2 mui项目

2.3 mui登陆模板

2.3.1 项目创建与目录介绍

2.3.2 页面预览

2.4 底部选项卡模板

2.5 H5+

2.6 mui

2.6.1 概述

2.6.2 定位某一控件的源码

3 要点解析

3.1 头部导航栏源码分析

3.2 内容与底部导航

3.3 mui 与 H5+ 的区别

本节内容来自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×

mui-app开发之项目类型概览相关推荐

最新仿映客直播APP开发实战项目IOS开发实战8天(最全最新)
最新仿映客直播APP开发实战项目IOS开发实战8天第 1 章:直播准备 1: [录播] 课程大纲介绍 09:56 2: [录播] 了解直播技术和腾讯云直播 09:54 3: [录播] 基础封装 23 ...
关于汽车APP开发的项目优势
近年来,随着汽车智能化.车联网.以及移动4G网络的发展,与汽车相关的APP不在少数.汽车APP开发发展到现在,其中的优势日益增长,而汽车APP所表示出来的功能也逐渐被人们所接受.那么,关于汽车APP开 ...
APICloud AVM多端开发 |《生鲜电商app开发》项目源码深度解析
此项目为生鲜电商app开发类应用,主要功能包括商品列表.商品详情展示.购物车.登录注册.个人中心等. 项目源码在 https://github.com/apicloudcom/avm-simple 仓 ...
APICloud AVM多端开发 | 《外卖app开发》项目源码深度解析（上）
为了让开发者更加快速的学习和了解APICloud多端开发技术,APICloud平台特别推出一款多端源码-<餐饮点餐>,可以体验一套代码编译Android和iOS app+小程序. AVM多 ...
Android App开发实战项目之模仿美图秀秀的抠图工具（附源码和演示视频简单易懂可直接使用）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 所谓抠图神器,就是从一副图片中扣出用户想要的某块区域一.需求描述美图的修图功能如此强大,离不开专业的图片加工技术,抠图便是其中重要的一项功能.在A ...
Android App开发实战项目之仿手机QQ动感影集动画播放（附源码和演示视频可直接使用）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 动感影集就是只要用户添加一张图片,动感影集就能给每张图片渲染不同的动画效果,让原本静止的图片变得活泼起来,辅以各种精致的动画特效,营造一种赏心悦目的感 ...
Android App开发实战项目之仿喜马拉雅的听说书App实现（超详细附源码和演示视频）
需要全部源码请点赞关注收藏后评论区留下QQ~~~ 一.需求分析用户不仅能在平台上收听音频,还能成为内容创作者,总之长音频分享平台需要满足两种角色的使用:一种是作为内容创作者发布自己的音频,另一种是作 ...
Android App开发实战项目之大头贴App功能实现（附源码和演示简单易上手）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.需求描述大头贴App有两个特征,第一个是头要大,拿来一张照片后把人像区域裁剪出来,这样新图片里的人头才会比较大,第二个是在周围贴上装饰物,而且装 ...
Android App开发实战项目之购物车（附源码超详细必看）
需要源码请点赞关注收藏后评论区留言~~~ 一.需求描述电商App的购物车可谓是司空见惯了,可以知道购物车除了底部有一个结算行,其余部分主要是已加入购物车的商品列表,然后每个商品左边是商品小图,右边是 ...

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

1 通用一般流程

2 各种类型项目解读

2.1 默认项目类型

2.1.1 目录结构

2.1.2 manifest

2.2 mui项目

2.3 mui登陆模板

2.3.1 项目创建与目录介绍

2.3.2 页面预览

2.4 底部选项卡模板

2.5 H5+

2.6 mui

2.6.1 概述

2.6.2 定位某一控件的源码

3 要点解析

3.1 头部导航栏源码分析

3.2 内容与底部导航

3.3 mui 与 H5+ 的区别

mui-app开发之项目类型概览相关推荐

最新文章

热门文章