mui_mui 案例 - CSDN
mui 订阅
MUI主要有三种含义:一、一种单独发行的计算机操作系统Windows的多语种版本;二、世界上最权威的Halal认证的官方机构;三、在移动通讯技术中的专有名词。 展开全文
MUI主要有三种含义:一、一种单独发行的计算机操作系统Windows的多语种版本;二、世界上最权威的Halal认证的官方机构;三、在移动通讯技术中的专有名词。
信息
含义1
单独发行的计算机操作系统
外文名
MUI
含义3
在移动通讯技术中的专有名词
含义2
权威的Halal认证的官方机构
MUI多语种版
MUI是一种单独发行的Windows版本的代号。它的正式名字叫Windows多语种版(Windows Multilanguage Version)。在这个版本的Windows中,用户可以自己设定Windows界面中使用的语言。这样,大型公司只需要一种安装操作就可以在全世界范围内部署Windows。用户界面的语种可以由本地用户自己选择,或者可以按照组织单元的组策略进行统一设定。使用不同语言的用户可以实现对同一台工作站的共享;一位用户可以选择日文来显示系统菜单、对话框和其他文字,而另一位用户登录进同一个系统时,他看到的文字可以全部是法文。MUI是一个面向对象的图形用户界面来创建和维护系统。程序员节省大量的工作,并受益于MUI强大的对象集合,用户得到的可能性,看看根据自己的个人口味定制的应用程序几乎每一个像素。在过去的几年中,MUI已经确立了自己作为一个标准的图形用户界面在Amiga上。自1993年首次发布,很多有经验的程序员的成功释放数以百计的基于MUI的应用作出贡献。MUI的主要目标是提供您的Amiga系统具有灵活性和可配置任何其他的计算机平台所无法比拟的。MUI不是Windows地方语种版的替代品。不是Windows的所有版本都可以使用前面提到的多语言技术,只有在Windows多语种版中才包含这种技术。MUI并不是在诸如字处理这样的应用程序里输入其他语言。这种语言输入能力在各个单独语种版本的Windows中都有,而不仅仅是在Windows单个版本中。就功能而言,有一点区别。MUI系统看上去很象本地版本的Windows,但是它里面的一些东西并没有被本地化(仍然使用系统的"主"语言),包括:所有的16位模式,位图,注册表的键和键值,文件夹和文件的名字,以及INF文件。 另外,MUI系统需要的磁盘空间要比本地版Windows多,每安装一种语言,MUI就需要大约30MB的额外磁盘空间,这些空间用来容纳该语种的资源文件和帮助。制作MUI版的主要目的在于减少大公司的TCO。下面是3个例子,可以演示跨国公司如何通过使用MUI版Windows节省费用(按重要性排列):1. 单一版本的全球部署:跨国公司可以简单地实现Windows多语种版在世界各地的部署,而不必购买不同语种的版本。本地用户可以选择用户界面语种,也可以通过管理员指定语种的组策略。公司同时还可以得到hot fix和Service Pack,并可以同步进行全球部署。2. 更易于维护和管理:对于Windows专业技术支持或其它技术支持人员而言,他们可以将工作站用户界面的语种设为英语(或其它语言)以便于自己发现问题。在解决问题之后,工作站的用户界面还可以重新设回其它语言。许多顾客在世界各地都使用英文服务器软件。通过Windows Server你也可以在世界各地使用英文软件产品,而且网络管理员可以使用他们自己的语言对服务器进行管理。3. 共享工作站:包括运行终端服务程序的不同用户和服务器对单独工作站进行的共享,比如在某个办公室中,几个兼职职员共享同一台计算机。在这个问题中,最重要的方面在于终端服务程序。通过在服务器上安装MUI,每个用户可以指定自己的参数来得到不同的界面语种。
收起全文
精华内容
参与话题
  • MUI框架-01-介绍-创建项目-简单页面

    万次阅读 2018-09-25 18:15:36
    MUI框架-01-介绍-准备-创建项目 从0开始快速高效学习 MUI 框架 (1)MUI 介绍 MUI 是什么,解决了什么问题? MUI 官方号称最接近原生APP体验的高性能前端框架 简单的说就是webapp的以个开发框架 webapp...

    MUI框架-01-介绍-准备-创建项目

    (1)MUI 介绍

    • MUI 是什么,解决了什么问题?
    • MUI 官方号称最接近原生APP体验的高性能前端框架
    • 简单的说就是webapp的以个开发框架
    • webapp和原生app性能及体验的差距,一直是移动app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有(如果开发者需要解决这些问题,需要处理很多兼容性问题,需要花费大把的时间和精力);
    • 浏览器默认控件样式(prompt、alert)又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。
    • 此时,出现了正义的 MUI
    • mui框架:一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。有些控件就是原生态的效果,mui起到了桥梁的作用。
    • MUI是国产的,北京数字天堂。和它配套的有开发工具 HBuilder,5+runtime
      5+runtime:可以将H5打包成native app,原理:利用原生态的webview去承载HTML5

    (2)MUI 的特点

    • 轻量
      追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征;
      MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K
      可以根据自个的需要,自定义去下载对应的模块。和我们接触的zepto.js类似
    • 原生UI
      鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标
      MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件;
    • 容易上手
    • 不需要其他框架基础:语法上和我们之前 学到用到 的写法是一样的。
    • 其他框架:ionic(Angular.js), react(native),vue(发音:view)
      vue、react、Angular.js是并列关系。
      前端是:vue和react的天下

    (3)MUI 存在的问题

    (1)名气不是很大,国产,不像react、Angular.js那样,世界范围都在使用。目前国内MUI使用的公司还是很多的
    (2)框架本身存在一些bug还有一些待解决的问题
    (3)总的来说,用着还是很不错了

    (4)开发工具

    • HBuilder 下载地址:http://www.dcloud.io/
    • mui 有个开发文档预览式 app,下载Hello mui App
      点击下载 已打包好的Hello mui 手机app,直接在手机上体验mui的控件UI及能力展示

    (5)创建 MUI 项目

    • 选择新建“移动APP”,并选择“Hello MUI”工程模板,创建工程;然后通过数据线将手机连接上电脑,点击运行,就可以在手机上体验MUI的各项能力
    • 快速构建页面:
    • 1.新建含mui的HTML文件
      • 在Hbuilder中,新建HTML文件,选择”含mui的HTML“模板,可以快速生成mui页面模板,该模板默认处理了mui的js、css资源引用
    • 2.输入mheader
      • 顶部标题栏是每个页面都必需的内容,在Hbuilder中输入mheader,可以快速生成顶部导航栏
    • 3.输入mbody
      • 除顶部导航、底部选项卡两个控件之外,其它控件都建议放在.mui-content控件内,在Hbuilder中输入mbody,可快速生成包含.mui-content的代码块
    • 4.更多开发后面介绍,今天先介绍一些注意事项
    • 5.官方文档:http://dev.dcloud.net.cn/mui/ui/

    (6)简单页面

    • 创建项目
    • 打开 HBuilder 新建移动 app 项目,选择 mui 项目模板
    • 新建 html 文件,选择 mui 模板
    • 也可以选择下面预制的模板

    (7)HTML 文件

    • 打开新建的 html 文件
    • 会看到一些预制的设置,meta 标签,css 文件,js 文件
    • 然后我们主要的是在 body 中进行一些操作
    • 先输入一个: m
    • 可以看到触发了关键词,有很多代码块,这也是最常用的方法,我们就可以快速的开发
    • 例1:
    • 比如我们输入: mh
    • 选中 header,然后回车
    • 输入标题:MUI 入门
    • 很快吧,用 mui 做这种的话就是这么快
    • 例2:
    • 比如我们输入: ml
    • 选中第 2 个图文列表,回车
      在这里插入图片描述
    • 这时候就会有问题了,顶部重叠了,为什么会有这个问题呢,就是因为没有把内容放到主体里面,然后人家还以为你是 header 呢
    • 之所以这样,故意遇到这个问题,是因为:
    • 除了固定栏之外,其它内容都要包裹在.mui-content 中,否则就有可能被固定栏遮罩,原因:固定栏基于Fixed定位,不受流式布局限制,普通内容依然会从 top:0 的位置开始布局,这样就会被固定栏遮罩,像这样的注意事项还有挺多,我会单独整理一下
    • 解决办法:
    • 删掉刚才的列表,输入 mbo 找到 body 回车
    • 然后在 body 里面输入 ml 图文列表,预览:
      在这里插入图片描述
    • 例3:
    • 然后我们在 主体的外面,就是 mui-content 的div的外面
    • 我们输入:mt 选择底部栏,回车在这里插入图片描述
    • 这时候简单的搭建页面,是不是就已经可以掌握了
    • 这时候是不是已经感觉 mui 有时候还是很强大的
    • 好,后面我们在继续学习

    关于开发

    展开全文
  • mui入门

    千次阅读 2018-09-26 18:57:54
    最近在做手机版网站,对比了jQuery Mobile,zepto,mui,最后选定mui。 官方文档位置:http://dev.dcloud.net.cn/mui/ui/ 12 注意事项: 1. DOM结构 关于mui页面的dom,你需要知道如下规则。 固定栏靠前 所谓的固定...
    最近在做手机版网站,对比了jQuery Mobile,zepto,mui,最后选定mui。
    官方文档位置:http://dev.dcloud.net.cn/mui/ui/
    12
    

    注意事项:

    1. DOM结构

    关于mui页面的dom,你需要知道如下规则。

    固定栏靠前

    所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元素;常见组件包括:顶部导航栏(.mui-bar-nav)、底部工具条(.mui-bar-footer)、底部选项卡(.mui-bar-tab);这些元素使用时需遵循一个规则:放在.mui-content元素之前,即使是底部工具条和底部选项卡,也要放在.mui-content之前,否则固定栏会遮住部分主内容;

    一切内容都要包裹在mui-content中

    除了固定栏之外,其它内容都要包裹在.mui-content中,否则就有可能被固定栏遮罩,原因:固定栏基于Fixed定位,不受流式布局限制,普通内容依然会从top:0的位置开始布局,这样就会被固定栏遮罩,mui为了解决这个问题,定义了如下css代码:

    .mui-bar-nav ~ .mui-content {
        padding-top: 44px;
    }
    .mui-bar-footer ~ .mui-content {
        padding-bottom: 44px;
    }
    .mui-bar-tab ~ .mui-content {
        padding-bottom: 50px;
    }
    123456789
    

    你当然可以通过自定义CSS的方式实现如上类似效果,但为了使用简便,建议将除固定栏之外的所有内容,全部放在.mui-content中。

    始终为button按钮添加type属性

    若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。

    窗口管理

    页面初始化:必须执行mui.init方法

    mui在页面初始化时,初始化了很多参数配置,比如:按键监听、手势监听等,因此mui页面都必须调用一次mui.init()方法;

    页面跳转:抛弃href跳转

    当浏览器加载一个新页面时,若页面DOM尚未渲染完毕,页面会先显示空白,然后等DOM渲染完毕后,再显示具体内容,这是WEB浏览器技术无法逾越的体验障碍;为解决这个问题,建议使用mui.openWindow方法打开一个新的webview,mui会自动监听新页面的loaded事件,若加载完毕,再自动显示新页面;

    页面关闭:勿重复监听backbutton

    mui框架自动封装了页面关闭逻辑,若希望自定义返回逻辑(例如编辑页面的返回,需用户确认放弃草稿后再执行返回逻辑),则需要重写mui.back方法,切勿简单通过addEventListener添加backbutton监听,因为addEventListener只会增加新的执行程序,mui默认封装的监听执行逻辑依然会继续执行,因此若仅addEventListener添加用户确认框,则用户即使选择了取消,也会继续关闭窗口。

    手势操作

    点击:忘记click

    快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去脉,请自行谷百),mui为了解决这个问题,封装了tap事件,因此在任何点击的时候,请忘记click及onclick操作,统统使用如下代码:

    element.addEventListener('tap',function(){
        //点击响应逻辑
    });
    123
    

    常见错误

    Uncaught ReferenceError: plus is not defined

    在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,否则可能会报“plus is not defined”的错误;
    mui为简化开发,将plusReady事件封装成了mui.plusReady()方法,凡涉及到HTML5+的api,建议都写在mui.plusReady方法中;

    2.mui适用场景说明

    为解决HTML5在低端Android机上的性能缺陷,mui引入了原生加速,其中最关键的就是webview控件,因此mui若要发挥其全部能力,需和5+ App配合适用,若脱离5+ App,mui功能会受限,主要涉及三个部分:

    webview窗口相关

    涉及webview的,除了5+App,其它所有手机浏览器及PC浏览器均无法使用,涉及功能点包括:

    • webview模式窗体动画
    • 创建子窗口(除了为解决区域滚动的常见双webview场景,还涉及webview模式的选项卡等多webview场景)
    • webview模式的侧滑菜单(也有div方式侧滑菜单)
    • webview模式的tab选项卡(也有div方式选项卡)
    • nativeUI,如原生的警告框、确认框、popover、actionsheet、toast。这些也有HTML5的实现。
    • 预加载
    • 自定义事件

    第三方扩展插件

    涉及webview的,除了5+App,其它所有手机浏览器及PC浏览器均无法使用,目前主要包括:语音输入;

    Touch事件相关(注意pc浏览器没有touch事件)

    Touch事件相关的,手机端浏览器均可使用、pc端chrome模拟手机浏览器也可以正常使用。
    但普通PC端浏览器因为没有touch事件,可以显示控件但滑动操作功能会受限;涉及功能点包括:

    • 手势事件
    • mui封装的tap相关处理业务:折叠面板、二级列表、二级选项卡;
    • mui封装的swipe、drag相关处理业务:图片轮播、可左右滑动的图文表格、可左右滑动的9宫格、滑动触发列表项菜单、可拖动式侧滑菜单、下拉刷新和上拉加载、可拖动式选项卡
      【备注】:在PC端,大家将tap替换成click,将HTML5默认的Drag事件替换mui 的swipe和drag,就可以解决如上两个问题。

    3.mui框架如何实现页面间传值

    在App开发中,页面间传值是很常见的开发需求,mui框架根据业务场景不同,提供了两种传值模式。

    1、页面初始化时,通过扩展参数传值;

    mui在初始化页面时,提供了extras配置参数,通过该参数可以设置页面参数,从而实现页面间传值;
    mui框架在如下几种场景下,会执行页面初始化操作:
    - 通过mui.openWindow()打开新页面(若目标页面为已预加载成功的页面,则在openWindow方法中传递的extras参数无效);
    - 通过mui.init()方法创建子页面;
    - 通过mui.init()方法预加载页面;
    - 通过mui.preload()方法预加载页面

    示例,假设我们有如下需求:
    在首页中打开关于页面时,传递当前产品名称及版本号,然后在关于页面中读取这两个参数并显示出来;

    首页实现代码:

    mui.openWindow({
        url:'info.html',
        id:'info.html',
        extras:{
            name:'mui',
            version:'0.5.8'
        }
    });
    关于页面实现代码:
    
    var self = plus.webview.currentWebview();
    var name = self.name;
    var version = self.version;
    12345678910111213
    

    2、页面已创建,通过自定义事件传值

    参考mui官网中自定义事件的介绍

    4.mui如何增加自定义icon图标

    mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标;其次,mui中的图标并不是图片,而是字体,至于为什么使用字体图标而不是图片,相信web开发者多少都有所了解,简单列举几条:

    • 多个图标字体合成一个字体文件,避免每张图片都需要联网请求;
    • 字体可任意缩放,而图片放大会失真、缩小则浪费像素;
    • 可通过css任意改变颜色、设置阴影及透明效果;

    在实际项目中,开发者难免会需要自定义图标,此时该如何操作呢?本文以阿里巴巴矢量图标库为例(同样的网站有很多,比如icomoon,欢迎热心用户分享其它平台的使用方法),介绍一种用户自定义图标的方法,假设我们要做一个电商项目,需要补充男装、女装、购物车三个图标,如下为分步实现操作;

    登录

    浏览器访问阿里巴巴矢量图标库官网,选择登录方式,可直接使用新浪微博账号登录;

    搜索图标

    在右上角搜索“男装”,会列出当前网站上的所有男装图标,如下:
    image
    选择自己喜欢的图标,点击,会添加到右上角的购物车中,如下:
    image
    同样的方式分别搜索选择女装、购物车图标,结果如下:
    image
    之后点击“存储为项目”,输入项目名字,例如“mui-icon-custom”,点击“存储”按钮后,会跳转到项目管理页面,如下图所示:
    image

    下载字体

    点击“下载到本地”按钮,会将合并后的字体文件及自动生成的css全部下载,如下:
    image

    修改css

    默认的css代码如下:

    @font-face {font-family: "iconfont";
      src: url('iconfont.eot'); /* IE9*/
      src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('iconfont.woff') format('woff'), /* chrome、firefox */
      url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
    }
    
    .iconfont {
      font-family:"iconfont" !important;
      font-size:16px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -webkit-text-stroke-width: 0.2px;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-nanzhuang:before { content: "\e600"; }
    
    .icon-nvzhuang:before { content: "\e601"; }
    
    .icon-gouwuche:before { content: "\e602"; }
    12345678910111213141516171819202122
    

    我们可稍作如下修改:

    为保证和mui目录结构统一,建议将字体文件放在fonts目录下,这样我们需要修改@font-face下得url属性;

    只兼容iOS和Android版本的话,我们仅需要ttf格式的字体即可,其它字体可以删除;同时,我们也仅需保留-webkit前缀语法,-moz前缀部分可以删除;

    修改后的css代码如下:

    @font-face {font-family: "iconfont";
        src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    }
    
    .iconfont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
    }
    
    .icon-nanzhuang:before { content: "\e600"; }
    
    .icon-nvzhuang:before { content: "\e601"; }
    
    .icon-gouwuche:before { content: "\e602"; }
    1234567891011121314151617
    

    集成mui

    将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下,然后即可在mui中引用刚生成的字体图标,我们以选项卡为例,代码如下:

    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon iconfont icon-nanzhuang"></span>
            <span class="mui-tab-label">男装</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-nvzhuang"></span>
            <span class="mui-tab-label">女装</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon iconfont icon-gouwuche"></span>
            <span class="mui-tab-label">购物车</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>
    123456789101112131415161718
    

    主要代码:将mui默认的icon(如mui-icon-home)替换成iconfont icon-nanzhuang,修改后预览效果如下:

    img

    --------------------- 本文来自 kikajack 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/kikajack/article/details/54091251?utm_source=copy

    展开全文
  • mui最全案例展示

    2020-05-29 23:31:53
    mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最...
  • MUI框架-09-MUI 与后台数据交互

    万次阅读 多人点赞 2018-09-26 21:35:14
    MUI框架-09-MUI 与后台数据交互 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现 我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们要清楚,怎么发,发给谁,返回的数据是...

    MUI框架-09-MUI 与后台数据交互

    • 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现
    • 我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们要清楚,怎么发,发给谁,返回的数据是什么内容,格式
    • 先放一张图,给大家学习的动力:
    • 然后今天呢,介绍的是调用 API,API 是什么呢,就是一个接口,比如知乎日报的API ,我们可以通过这个 API 获取到知乎上最新的消息,并且是 json 格式,我们就不用再去找数据了,其他类型 API 还有 百度语音识别,就是百度给我们一个接口,我们可以想这个接口发送 语音,然后返回给我们识别的结果,我们就没必要就了解具体是怎么识别的
    • 【注意】:我这里收集了大量的 API ,赠送给大家:
    • 链接地址:中国国内 - 可用API合集

    API 分析

    Ajax

    • MUI Ajax 官方文档
    • 参数呢,大家自己在官网看就可以,下面开始实战
    • 这里我们先一起看一下,官网给出的代码示例:如下为通过post方式向某服务器发送鉴权登录的代码片段:
    mui.ajax('http://server-name/login.php',{
    	data:{
    		username:'username',
    		password:'password'
    	},
    	dataType:'json',//服务器返回json格式数据
    	type:'post',//HTTP请求类型
    	timeout:10000,//超时时间设置为10秒;
    	headers:{'Content-Type':'application/json'},	              
    	success:function(data){
    		//服务器返回响应,根据响应结果,分析是否登录成功;
    		...
    	},
    	error:function(xhr,type,errorThrown){
    		//异常处理;
    		console.log(type);
    	}
    });
    
    • 上面这段代码就是说,ajax请求,设置一个目标地址,逗号,大括号后面是传入的参数信息
    • 大家记住一句话 大括号开始 大括号结束就是 json 格式
    • 然后我们就根据这个做一个实例,准备呢,大家请先根据这篇创建一个简单的页面:MUI框架-08-窗口管理-创建子页面
    • 然后打开我们的自己建的 html 目录下的那个子页面 html文件
    • 我们用下面代码替换 init() 的 script 标签,具体步骤写在注释:
    
    <script type="text/javascript">
    			mui.init()
    
    			//plusReady,用来定义加载dom后的操作
    			mui.plusReady(function() {
    				
    				//发起 ajax请求,地址使用知乎日报 api 
    				mui.ajax('https://news-at.zhihu.com/api/4/theme/11', {
    					/* data 是参数,我们这里不需要,我们只是从 api获取数据
    					data: {
    						username: 'username',
    						password: 'password'
    					},
    					*/
    					dataType: 'json', //服务器返回json格式数据
    					type: 'get', //HTTP请求类型
    					timeout: 10000, //超时时间设置为10秒;
    					headers: {
    						'Content-Type': 'application/json'
    					},
    					success: function(data) {
    						//服务器返回响应,根据响应结果,分析是否登录成功;
    						
    						//我们现在控制台打印一下请求结果
    				        console.log(data)
    				
    						//然后获取json数据中的具体值
    						console.log(data.stories[0].title)
    					},
    					error: function(xhr, type, errorThrown) {
    						//异常处理;
    						console.log(type);
    					}
    				});
    
    			})
    		</script>
    

    把返回的 json 数据放在页面 -

    使用 art-template - JavaScript 模板引擎

    • 返回的数据不能就展示在控制台吧,怎么把数据放在页面是不是也很关键
    • 这里要介绍另一位主角:art-template,它是高性能 JavaScript 模板引擎
    • art-template 官网: http://aui.github.io/art-template/zh-cn/index.html
    • 1.下载的话可以从官网下载
    • 2.可以直接下载我的 template -web.js:https://download.csdn.net/download/qq_40147863/10689407
    • 3.如果你会用 npm 包管理器,那么建议新建一个文件夹,因为我们只需要一个 template -web.js 文件,我们有很多都不需要

    npm install art-template --save

    • 然后找到 art-template/template -web.js 文件
    • 然后我们拷贝到项目 js 目录的下面:
    • 打开需要使用的 html 文件,在 head 标签里加入:
    <script src="../js/template-web.js"></script>
    
    • 然后我们看一下 art-template 官网
    • 也就是说们要使用这个 art-template,语句使用就要放在 这种 script 标签里,做对数据的渲染
    • 第一步:把页面上 ul 标签里的内容都删掉,给ul 标签加一个id为zhihu截图:
    <ul class="mui-table-view" id="zhihu"></ul>
    
    • 第2步把页面里 init 函数的那个 script 标签删掉,步骤,写在注释里了,粘贴下面这段代码:
    <!-- 引入template-web.js -->
    		<script src="../js/template-web.js" type="text/javascript" charset="UTF-8"></script>
    		<!-- 使用<script id="list" type="text/html"> 拼接 html -->
    		<script id="list" type="text/html">
    			    <!-- 循环语法 -->
    			    {{each stories as list}}
    				<li class="mui-table-view-cell mui-media">
    					<a href="javascript:;">
    						<img class="mui-media-object mui-pull-left" src="{{list.images[0]}}">
    						<div class="mui-media-body">
    							<!-- 获取 title -->
    							{{list.title}}
    						</div>
    					</a>
    				</li>
    				{{/each}}
    			</script>
    		<script type="text/javascript">
    			mui.init()
    
    			//plusReady,用来定义加载dom后的操作
    			mui.plusReady(function() {
    				
    				//发起 ajax请求,地址使用知乎日报 api 
    				mui.ajax('https://news-at.zhihu.com/api/4/theme/11', {
    					/* data 是参数,我们这里不需要,我们只是从 api获取数据
    					data: {
    						username: 'username',
    						password: 'password'
    					},
    					*/
    					dataType: 'json', //服务器返回json格式数据
    					type: 'get', //HTTP请求类型
    					timeout: 10000, //超时时间设置为10秒;
    					headers: {
    						'Content-Type': 'application/json'
    					},
    					success: function(data) {
    						//服务器返回响应,根据响应结果,分析是否登录成功;
    						
    						//我们现在控制台打印一下请求结果
    				        console.log(data)
    				        
    						//然后获取json数据中的具体值
    				        //console.log(data.stories[0].title)
    				        
    				        //list 对应上面的 id,就是得到 拼接的 html
    				        var html = template('list', data);
    				        //把得到的 html 放到id为 zhihu 的 ul 标签里
    				        document.getElementById("zhihu").innerHTML = html;
    				        console.log(html);
    
    					},
    					error: function(xhr, type, errorThrown) {
    						//异常处理;
    						console.log(type);
    					}
    				});
    
    			})
    		</script>
    

    真机运行

    更多文章链接:MUI 框架


    - 本笔记不允许任何个人和组织转载
    展开全文
  • MUI框架-05-用MUI做简单App界面

    万次阅读 多人点赞 2018-09-25 08:06:48
    MUI框架-00-基础入门 本篇写给从未使用过 MUI 开发的人 快速入门 - 注意事项 有些可能看不懂,这样排是为了可以做 MUI 开发的时候,养成良好的习惯,避免不必要的错误 DOM 结构: 关于 mui 页面的 dom...

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

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

    (1)MUI 组件

    (2)组件

    (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 文件修改如下:
    • 预览:

    总结

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

    关于开发

    展开全文
  • MUI快速入门!简单易上手教程!!

    千次阅读 2019-01-02 23:14:16
    MUI快速入门 喜欢简单直接粗暴的博客文看这就对了,超级简单的教程,保证一看就明白! 什么是MUI MUI就是以iOS平台UI为基础,补充部分Android平台特有的UI控件。(写的是移动端)说白了就是样子跟ios一样,白 简单 ...
  • HTML5+MUI+HBuilder 之初探情人

    万次阅读 多人点赞 2020-07-13 17:42:33
    MUI(Mobile User Interface)是国内DCloud的最新成果。它遵循了W3C最新的H5+规范,旨在提供一个高效的,跨平台的,H5前端开发框架。本文分享了作者对这项新技术的感受和想法。刚接触这项技术是令人振奋和激动的!...
  • MUI框架详解-全面讲解MUI框架使用

    千次阅读 2018-11-10 19:24:59
    01MUI 介绍、新项目创建、 基础布局.mp4 02MUI - accordion(折叠面板)、button.mp4 03MUI - actionsheet(操作表)、badge.mp4 04MUI - 复选框、单选框、使用js获取选择值.mp4 05MUI - datepicker(时间选择器)....
  • mui消息框(alert,confirm,prompt,toast)的使用 在开发mui的过程中,我们最经常用到的就是消息框,例如警告框、确认框、对话框、消息提示框等等一系列的弹出消息框。mui没有让我们失望,这些都做好了封装 alert...
  • MUI框架入门

    万次阅读 2017-01-05 11:28:47
    最近在做手机版网站,对比了jQuery Mobile,zepto,mui,最后选定mui。 官方文档位置:http://dev.dcloud.net.cn/mui/ui/ 注意事项:1. DOM结构关于mui页面的dom,你需要知道如下规则。固定栏靠前所谓的固定栏,也...
  • HTML5+开发移动app教程3-mui开发示例

    万次阅读 多人点赞 2015-02-04 14:29:29
    下面就开始一个简答的例子,以及mui相关内容 mui 官网:http://dcloudio.github.io/mui/ 说明:希望你可以把官网内容通读一遍,这是以后开发的基础 开始 新建项目 在首页点击新建移动App,如下: ...
  • MUI布局简介

    万次阅读 2016-07-25 10:48:41
    使用过BootStrap之类的应该看了马上就能懂了。MUI里面也是使用的十二...mui-col-xs-1 mui-col-xs-2 mui-col-xs-3 mui-col-xs-4  mui-col-xs-5 mui-col-xs-6 mui-col-xs-7 mui-col-xs-8  mui-col-xs-9 mui-col-xs-10 m
  • MUI-按钮的基本使用

    万次阅读 2015-10-26 13:11:21
    对于MUI框架更是不例外,接下来我们来看看MUI框架的button按钮的用法。 mui默认按钮为灰色,另外还提供了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮,五种色系对应五种场景...
  • MUI-LIST列表的基本使用

    万次阅读 2015-11-05 09:16:05
    列表是常用的UI控件,mui封装的列表组件比较简单,只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可,如下为示例代码 class="mui-table-view"> class="mui-table-view-cell">...
  • MUI 元素隐藏和显示

    万次阅读 2016-11-04 14:56:14
    隐藏元素mui(".mui-collapse-content").classList.add("mui-hidden");显示元素mui(".mui-collapse-content").classList.remove("mui-hidden");之前看到网上的资料说显示用mui-visibility,结果测试发现根本用不了,...
  • mui结合vue使用

    万次阅读 多人点赞 2017-05-15 15:16:46
    vue加载完加载mui,当用到plus时先加载完plus基座再初始化muivar t=new Vue({ el:'#app', data:{ tabledata:[], countdata:[], nowtime:'', }, mounted (){ //mui ...
  • mui框架 页面无法滚动解决方法

    万次阅读 热门讨论 2018-08-05 15:56:25
    只需要初始化一下就可以了 mui.init();(function($){ $(".mui-scroll-wrapper").scroll({ //bounce: false,//滚动条是否有弹力默认是true //indicators: false, //是否显示滚动条,默认是true }); })...
  • mui 底部导航菜单功能(原创)

    万次阅读 热门讨论 2020-07-27 23:38:40
    复制下来就能用 不能用就加下我的前端交流QQ群问下 简单版 底部导航菜单切换 首页 9 ... mui.init({ subpages:[//先加载首页 { ur
  • mui back 返回刷新页面方法

    万次阅读 2020-07-27 23:32:19
    2个页面 模拟 1.html ... mui.init() mui.plusReady(function(){ alert('1') // var self=plus.webview.currentWebview(); // console.log(JSON.stringify(self))
  • mui.fire()用法

    万次阅读 2015-07-30 10:55:37
    作用:通过mui.fire()方法可以触发目标窗口的自定义事件 mui.fire(目标窗口的webview,'自定义事件名',{参数列表}); 目标窗口监听这个自定义事件 window.addEventListener('自定义事件名', function() { XXXXX }...
1 2 3 4 5 ... 20
收藏数 22,638
精华内容 9,055
关键字:

mui