MUI框架-05-用MUI做简单App界面

article/2025/9/24 3:29:10

MUI框架-05-用MUI做一个简单App

  • MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有必要都取掌握,找一个比较出名的,企业里常言道,适合自己的然后去深入了解
  • 当然呢这也是因为要想快速的下代码,使用框架是避免不了的,使用框架,记住一些操作是必须的,所以熟悉几个框架,然后多去了解多去用,高效是建立在记忆的基础上的
  • ios 需要证书,本篇介绍做一个简单的安卓 app

(1)MUI 组件

  • 有一个官方的组件预览 App,下载地址:http://dcloud.io/hellomui/
    在这里插入图片描述

(2)组件

  • 需要什么组件直接就可以从官网拷贝
  • 官方文档:http://dev.dcloud.net.cn/mui/ui/
    在这里插入图片描述

(3)修改默认样式

  • 基础不懂请查看:MUI框架-01-介绍-创建项目-简单页面
  • 有时候我们觉得 MUI 自带的样式不满足我们的要求,或者还需要自己增加样式,这时候就需要我们去自定义一个 css 文件
  • 然后第一步就是我们在需要修改样式的 HTML 文件中引入该 css 文件
  • 快捷方式,直接在 head 标签中,输入:link 回车,选中 css 文件在这里插入图片描述
  • 然后在 css 文件中操作
  • 比如我们需要修改头部的背景颜色:
  • 1.我们在 header 标签 class 中加一个自己命名的属性值在这里插入图片描述
  • 2.在 css 文件中用 . 选择器
  • 3.保存,预览
  • 对于特殊的一个内容:
  • 当然对于特殊的一个样式可以加 id
  • 例如:修改列表第一项背景色
  • html 文件:
  • css 文件:
  • 预览:
  • 总结:
  • 1.class 用 . 巧记:泪点,泪点,泪点
  • 2.id 用 # 啊,记住泪点也就记住这个了
  • 3.记住怎么修改,也就会了所有的修改,这个必须记住

(3)修改默认样式 2

  • 上面介绍了最简单的修改样式方法,还有其他的
  • 例如:我们要给所有 一个所有拥有 mui-table-view 的ul 标签下的所有 p 标签,将文字设置成红色
  • 在 css 文件中使用:a 空格 b 的写法表示什么下的标签,或者说某个类的标签的子孙标签,不止可以下一级,之哟啊在它下面都会生效
  • HTML 文件:
  • css 文件修改如下:
  • 预览:

总结

  • 然后利用官方组件,加上自己修改样式,就可以实现绝大多数界面的设计了
  • 不过现在做出来的只是前端显示页面,关于交互效果后面再介绍,拜拜

关于开发

  • 请查阅:官方文档

http://chatgpt.dhexx.cn/article/eEQP8MNu.shtml

相关文章

MUI--高性能前端框架

MUI是什么? 最接近原生APP体验的高性能前端框架。 相比同类框架的优势? 性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题…

移动端开发框架mui介绍

MUI 官网:https://www.dcloud.io/mui.html MUI 文档:https://dev.dcloud.net.cn/mui/ui/ 演示地址:https://dcloud.io/hellomui/ (支持手机和电脑浏览器) 开发工具:https://www.dcloud.io/hbuilderx.htm…

MUI(最接近原生APP体验的高性能前端框架)

MUI-最接近原生APP体验的高性能前端框架MUI: 最接近原生APP体验的高性能前端框架https://dev.dcloud.net.cn/mui/ 最接近原生APP体验的高性能前端框架,追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征。 MUI不依赖任何第…

关于MUI一个很实用的前端框架

今天也是我接触mui的第一天。首先先上MUI的官网上面瞧一瞧。http://dev.dcloud.net.cn/mui/window/#closewindow我这里上的不是官网, 我是先把他的基本能实现的功能先做了一个简单的了解。下面大家跟着我看: 一、Mui的组件 mui的组件都很原生比如拓展阅读…

MUI框架快速开发

文章目录 创建项目快速编写标题页面主体底部选项卡常用关键词 字体图标事件处理常见手势事件 窗口对象底部选项卡-页面切换底部选项卡窗口对象设置点击事件处理 栅格系统页面传值通过openWindow通过自定义事件 常用关键词参考 创建项目 使用MUI框架搭建项目,首先我…

MUI框架学习——了解MUI

MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架官方文档:http://dev.dcloud.net.cn/mui/ui/ (1)MUI 介绍 MUI 是什么,解决了什么问题?MUI 官方号称最接近原生APP体验的高性能前端框架简单的说就是webap…

mui框架

1 MUI介绍 1.1 MUI是什么,解决了什么问题。 (1)性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5…

MUI框架初级教程

写在前面 本系列文章我们将利用mui基于网易云音乐API实现一个音乐播放器APP,同时基于环形或者融云实现聊天功能。作为本系列文章的第一篇,本文会详细讲解html5中管理应用窗口界面的Webview模块的用法,因为是初级教程篇不过多讲解原理部分&…

MUI框架的基本使用

要使用MUI框架&#xff0c;在Hbuilder中必须新建HTML5 APP&#xff0c;并且创建MUI项目&#xff0c;Hbuilder会自动生成代码 MUI页面的使用&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-8"><meta name"viewport&…

MUI框架开发APP详解,一篇就够了

MUI框架开发APP详解&#xff0c;一篇就够了 1.MUI简介2.下载安装hbuilderx3.新建一个5app项目4.制作首页首页头部首页主体 5.制作底部选项卡6.H5plus使用设置页面样式蜂鸣 7.app打包发布基础配置图标配置发行 1.MUI简介 最接近原生APP体验的高性能前端框架 追求性能体验&…

Flask第五天-Mui+HTML5PLUS介绍、APP开发环境、MUI+HMTL5PLUS登录页面、Mui.post实现post请求、Mui.fire

一、MUI框架&#xff08;前端UI框架&#xff09; &#xff08;一&#xff09;MUI框架简介及优劣势分析&#xff1a; 1.MUI基本介绍及优劣势分析 MUI是一套前端框架&#xff0c;由DCLOUD公司研发而成&#xff0c;提供大量H5和js语言组成的组件&#xff0c;大大提高了开发效率&…

Eclipse修改字体大小

字体调整大小1.打开eclipse&#xff0c;点击“window” 2.在下拉菜单中展开找到“preferences”&#xff0c;在左边菜单中点击“general”&#xff0c;找到后展开“appearance”。 3.选择“colors and fonts”。 4.找到basic&#xff0c;点击Text Font&#xff0c;双击鼠标右…

eclipse字体大小设置

eclipse字体大小设置 ①点击菜单上的Window窗口 ②点击Preferences选项 ③General→Appearance→Colors and Fonts ④选中Text Font ⑤点击Edit ⑥更改字体大小

修改Eclipse字体以及背景颜色

操作界面默认颜色为白色。对于我们长期使用电脑编程的人来说&#xff0c;白色很刺激我们的眼睛&#xff0c;所以我经常会改变workspace的背景色&#xff0c;使眼睛舒服一些。设置方法如下&#xff1a; 1、打开window->Preference,弹出Preference面板 2、展开General标签&a…

eclipse 快捷调整字体_eclipse字体大小设置快捷键

原标题:"win10系统如何更改Eclipse字体大小"关于电脑问题教程分享。 - 来源:191路由网 - 编辑:小元。 因为编辑需要,不少朋友都会在windows10系统电脑中安装Eclipse英文版软件,用户对于代码的应用应该是没有问题的,可在英文版Eclipse设置字体小大却是两眼一抹黑,…

Eclipse字体颜色控制

注:以下为转载,觉得写的很全,只为方便自己查看,或他人查看 因为eclipse字体颜色默认的我们看久了会觉得有点眼睛不舒服&#xff0c;特别是在晚上&#xff0c;太亮了&#xff0c;我觉得eclipse的白色背景太刺眼了看着不舒服 此时我们就希望设置一下字体eclipse字体颜色&#xf…

eclipse改变html字体大小,eclipse字体大小设置(eclipse如何调整页面字体大小)

eclipse字体大小设置(eclipse如何调整页面字体大小)每个人在敲代码的时候习惯都不会一样&#xff0c;有的人喜欢字体大一些看起来容易&#xff0c;有的人喜欢字体小一些&#xff0c;看的范围广&#xff0c;看得更全面&#xff0c;这样今天教大家如何调整字体的大小&#xff0c;…

java eclipse字体大小设置_eclipse字体大小如何设置-eclipse字体大小设置方法 - 河东软件园...

Eclipse是一款Java的可扩展开发平台&#xff0c;用户在开发Java项目是都会选择使用Eclipse&#xff0c;而通过Eclipse进行编辑时&#xff0c;经常需要设置字体与大小&#xff0c;但由于许多用户大多下载的是英文版&#xff0c;所以不知道如何进行设置&#xff0c;而今天为用户带…

Eclipse设置字体大小

Eclipse设置字体大小 01、打开Window–>Preferences 02、选择Genneral–>Editors 03、点击Colors and Fonts 04、选择Text Font 05、设置字体大小

Eclipse 修改字体教程

首先选择左上角的 Window&#xff0c;然后选择Preferences 会弹出如下界面 点开General&#xff0c;然后点开Appearance&#xff0c;然后点开Colors and Fonts 出现如下界面 然后选择Java —> Java Editor Text Font —> Edit 就可以在出现的界面调字体了