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-23 14:09:07
    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框架-05-用MUI做简单App界面

    万次阅读 多人点赞 2018-09-24 21:37:04
    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最全案例展示

    2017-09-08 09:53:08
    mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示mui最全案例展示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 h5+文档最详版

    千次阅读 2018-12-10 23:00:09
    mui h5+文档最详版界面初始化H5plus初始化创建子页面打开界面参数传递控制页面load显示关闭界面底部导航切换界面自定义事件页面预加载消息框原生模式ActionSheet下拉刷新上拉加载上拉下拉整合手势遮罩滑动导航选择...

    界面初始化

    初始化就是把一切程序设为默认状态,把没准备的准备好。
    mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载。

    H5plus初始化

    在我们APP的开发中,如果我们用到了H5+的一些API或者接口,我们需要初始化另外一个函数,类属于 JS 中的window.onload 或者 window.ready

    Mui.plusReady(); 所有涉及到H5+的东西,建议写到这个里面

    mui.plusReady(function(){		
    			
        var  w = plus.webview.currentWebview();
        console.log(w);		
    			
    });
    

    创建子页面

    为防止APP运行过程中内容滚动出现卡顿的现象,所以部分页面我们采用头部和内容分离的形式进行实现,比如头部导航和底部导航

     mui.init({
      subpages:[{
      url:your-subpage-url,//子页面HTML地址,支持本地地址和网络地址
      id:your-subpage-id,//子页面标志
      styles:{
        top:subpage-top-position,//子页面顶部位置
        bottom:subpage-bottom-position,//子页面底部位置
        width:subpage-width,//子页面宽度,默认为100%
        height:subpage-height,//子页面高度,默认为100%
        ......
      },
         extras:{
    	name:'zxd学院'//子页面通过plus.webview.currentWebview().name能拿到这个值
    		}//额外扩展参数
        }]
      });
    

    打开界面

    //打开新窗口
    mui.openWindow({ 
    	url:'target.html', //需要打开页面的url地址 
    	id:'target',  //需要打开页面的url页面id
    	styles:{ 
    		top:'0px',//新页面顶部位置 
    		bottom:'0px',//新页面底部位置 
    //					width:newpage-width,//新页面宽度,默认为100% 
    //					height:newpage-height,//新页面高度,默认为100% ...... 
    	}, 
    	extras:{ 
    		name:'aries',
    		age:'18',
    //					.....//自定义扩展参数,可以用来处理页面间传值 
    	},show:{ //控制打开页面的类型
    		autoShow:true,
    //					//页面loaded事件发生后自动显示,默认为true 
    		aniShow:'zoom-fade-out',//页面显示动画,默认为”slide-in-right“;  页面出现的方式 左右上下
    		duration:'1000'//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒; 
    	}, waiting:{ // 控制 弹出转圈框的信息
    		autoShow:true,//自动显示等待框,默认为true 
    		title:'东翌学院...',//等待对话框上显示的提示内容 
    		options:{ 
    			width:'300px',//等待框背景区域宽度,默认根据内容自动计算合适宽度 
    			height:'300px',//等待框背景区域高度,默认根据内容自动计算合适高度 ...... 
    		} 
    	}
    });
    

    参数传递

    mui.plusReady(function(){
    	var self = plus.webview.currentWebview(); //获得当前页面的对象
    	var name = self.name; //name 和 age 为传递的参数的键
    	var age = self.age;
    	
    	console.log(name);
    	console.log(age);
    	
    	// 获得首页  专用的
    	var index = plus.webview.getLaunchWebview();
    	
    	// 获得指定页面的对象 注意,要确保你的这个页面是存在的, 就是打开过的
    	var target = plus.webview.getWebviewById('目标页面的id');
    	
    });
    

    控制页面load显示

    show:{  // openwindow 函数内设置
        autoShow:false 
    } 
     
    // 目标页面
    //从服务器获取数据 ....   
    这里是业务逻辑
    //业务数据获取完毕,并已插入当前页面DOM; 
    //注意:若为ajax请求,则需将如下代码放在处理完ajax响应数据之后;
    mui.plusReady(function(){ 
        //关闭等待框               
        plus.nativeUI.closeWaiting();
         
        //显示当前页面          
        mui.currentWebview.show(); 
    });
    

    关闭界面

    1,点击包含.mui-action-back类的控件

    2,在页面上,向右快速滑动

    3, Android手机按下back按键

    mui框架封装的页面右滑关闭功能,默认未启用,若要使用右滑关闭功能,需要在mui.init();方法中设置swipeBack参数,如下:

    mui.init({
     	swipeBack:true //启用右滑关闭功能
    });
    

    mui框架默认会监听Android手机的back按键,然后执行页面关闭逻辑; 若不希望mui自动处理back按键,可通过如下方式关闭mui的back按键监听:

    mui.init({
    	keyEventBind: {
    	 	backbutton: false //关闭back按键监听 
    	}
    });
    

    底部导航切换界面

    HTML部分:

    <nav class="mui-bar mui-bar-tab">
    	    <a id="defaultTab" class="mui-tab-item mui-active" href="a.html">
    	        <span class="mui-icon mui-icon-videocam"></span>
    	        <span class="mui-tab-label">社区</span>
    	    </a>
    	    <a class="mui-tab-item" href="b.html">
    	        <span class="mui-icon mui-icon-chatboxes"><span style="display: none;" class="mui-badge">1</span></span>
    	        <span class="mui-tab-label">群组</span>
    	    </a>
    	    <a class="mui-tab-item" href="c.html">
    	        <span class="mui-icon mui-icon-home"></span>
    	        <span class="mui-tab-label">我的</span>
    	    </a>
    </nav>
    

    JavaScript部分:

    //mui初始化
    mui.init();
    var subpages = ['a.html', 'b.html', 'c.html'];
    var subpage_style = {
    	top:'0px',
    	bottom: '51px'
    };	
    var aniShow = {};	
     //创建子页面,首个选项卡页面显示,其它均隐藏;
    mui.plusReady(function() {
    	var self = plus.webview.currentWebview();
    	for (var i = 0; i < subpages.length; i++) {
    		var temp = {};
    		var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
    		if (i > 0) {
    			sub.hide();
    		}else{
    			temp[subpages[i]] = "true";
    			mui.extend(aniShow,temp);
    		}
    		self.append(sub);
    	}
    });
     //当前激活选项
    var activeTab = subpages[0];
    
     //选项卡点击事件
    mui('.mui-bar-tab').on('tap', 'a', function(e) {
    	var targetTab = this.getAttribute('href');
    	if (targetTab == activeTab) {
    		return;
    	}
    	//显示目标选项卡
    	//若为iOS平台或非首次显示,则直接显示
    	if(mui.os.ios||aniShow[targetTab]){
    		plus.webview.show(targetTab);
    	}else{
    		//否则,使用fade-in动画,且保存变量
    		var temp = {};
    		temp[targetTab] = "true";
    		mui.extend(aniShow,temp);
    		plus.webview.show(targetTab,"fade-in",300);
    	}
    	//隐藏当前;
    	plus.webview.hide(activeTab);
    	//更改当前活跃的选项卡
    	activeTab = targetTab;
    });
     //自定义事件,模拟点击“首页选项卡”
    document.addEventListener('gohome', function() {
    	var defaultTab = document.getElementById("defaultTab");
    	//模拟首页点击
    	mui.trigger(defaultTab, 'tap');
    	//切换选项卡高亮
    	var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
    	if (defaultTab !== current) {
    		current.classList.remove('mui-active');
    		defaultTab.classList.add('mui-active');
    	}
    });
    

    自定义事件

    监听自定义事件 - 目标页

    window.addEventListener('shijian',function(event){
      //通过event.detail可获得传递过来的参数内容
      ....
      var name = event.detail.namel
      console.log(name);
      shijian();    
    })
    

    触发自定义事件 - 本页

    //首先获得目标页面的对象
    var targetPage = plus.webview.getWebviewById('目标页面id'); 
    
    mui.fire(targetPage,'shijian',{
      //自定义事件参数
      name:'dongyixueyuan'
    });
    

    页面预加载

    所谓的预加载技术就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升app使用体验。mui提供两种方式实现页面预加载。

    方式一:通过mui.init方法中的preloadPages参数进行配置

    mui.init({  // 可同时加载一个或者多个界面
    	preloadPages:[ //加载一个界面
    	{ 
    		url:'a.html', 
    		id:'a', 
    		styles:{},//窗口参数 
    		extras:{},//自定义扩展参数
    		subpages:[{},{}]//预加载页面的子页面 
    	},{ // 可加载另外一个界面,不需要可直接删除
    		url:'b.html', 
    		id:'b', 
    		styles:{},//窗口参数 
    		extras:{},//自定义扩展参数
    		subpages:[{},{}]//预加载页面的子页面 
    	}
    	]
    });
    

    方式二:通过mui.preload方法预加载,一次只能预加载一个页面,若需加载多个webview,则需多次调用mui.preload()方法;

    mui.plusReady(function(){
        var productView = mui.preload({
            url: 'list.html',
            id: 'list',
        });
        console.log(productView); //获得预加载界面的对象
    });
    

    消息框

    警告消息框

    mui.alert('欢迎使用Hello 东翌学院','东翌学院',function(){
    	alert('你刚关闭了警告框');
    });
    

    消息提示框

    var btnArray = ['是','否'];
    	mui.confirm('东翌学院是专业跨平台APP培训学院,赞?','Hello 东翌学院',btnArray,function(e){
    	if(e.index==0){
    		alert('点击了- 是');
    		//自己的逻辑	 	 			 	 	
    	}else{
    		alert('点击了- 否');
    	}
    });
    

    输入对话框

    var btnArray = ['确定','取消'];
    	mui.prompt('请输入你对东翌学院的评语:','内容好','东翌学院',btnArray,function(e){
    		if(e.index==0){
    			alert('点击了 - 确认');
    			var  value = e.value; // value 为输入的内容
    
    		}else{
    			alert('点击了 - 取消');
    		}
    });
    

    自动消息对话框

    mui.toast('显示内容');
    

    日期选择框

    //js里的月份 是从0月开始的,也就是说,js中的0月是我们1月
    			
    var dDate=new Date(); //默认显示的时间
    dDate.setFullYear(2015,5,30);
    var minDate=new Date(); //可选择的最小时间
    minDate.setFullYear(2010,0,1);
    var maxDate=new Date(); //课选择的最大的时间
    maxDate.setFullYear(2016,11,31); 
    				
    				
    plus.nativeUI.pickDate( function(e) {
    	
    		var d=e.date;
    		alert('您选择的日期是:'+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+ d.getDate());
    	
    	},function(e){
    		
    		alert('您没有选择日期');
    		
    },{title:"请选择日期",date:dDate,minDate:minDate,maxDate:maxDate});
    

    时间选择框

    var dTime=new Date();
    dTime.setHours(20,0); //设置默认时间
    plus.nativeUI.pickTime(function(e){
    		
    		var d=e.date;
    		alert("您选择的时间是:"+d.getHours()+":"+d.getMinutes());
    		
    	},function (e){
    		
    		alert('您没有选择时间');
    		
    },{title:"请选择时间",is24Hour:true,time:dTime});
    

    原生模式ActionSheet

    var btnArray = [{title:"分享到微信"},{title:"分享到新浪微博"},{title:"分享到搜狐微博"}]; //选择按钮  1 2 3
    plus.nativeUI.actionSheet( {
    	title:"分享到",
    	cancel:"取消", // 0
    	buttons:btnArray
    	}, 
    	function(e){
    		var index = e.index; // 
    		alert(index);
    		switch (index){
    			case 1:
    				//写自己的逻辑
    			
    			break;
    			case 2:
    			break;
    		}
    } );
    

    下拉刷新

    为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况); 通过双webview解决这个DIV的拖动流畅度问题;拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画;在iOS平台,H5的动画已经比较流畅,故依然使用H5方案。两个平台实现虽有差异,但经过封装,可使用一套代码实现下拉刷新。

    第一步: 创建子页面,因为拖动的其实是个子页面的整体

    mui.init({ 
    	subpages:[{ 
    	url:pullrefresh-subpage-url,//下拉刷新内容页面地址 
    	id:pullrefresh-subpage-id,//内容页面标志
    	 styles:{ top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算,若使用标准mui导航,顶部默认为48px; .....//其它参数定义 
    	 } 
    	}] 
    });
    

    第二步:内容页面需按照如下DOM结构构建

    <!--下拉刷新容器-->
     <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
         <div class="mui-scroll">
             <!--数据列表-->
             <ul class="mui-table-view mui-table-view-chevron">
                 <li class="mui-table-view-cell">1</li>
             </ul>
         </div>
     </div> 
    第三步:通过mui.init方法中pullRefresh参数配置下拉刷新各项参数
    
    mui.init({ 
       	pullRefresh : { 
       		container:"#pullrefresh",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等 	
       		down : {
       			contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容 
       			contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容 
       			contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容 
       			callback : fn //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
       		 } } 
        });
    

    第四步:设置执行函数

    function fn() {
    	 //业务逻辑代码,比如通过ajax从服务器获取新数据; ...... //注意,加载完新数据后,必须执行如下代码,注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后 	
    	 
    	 mui('#pullrefresh').pullRefresh().endPulldownToRefresh();  //这行代码会隐藏掉 正在加载... 容器
    	 
    }
    

    上拉加载

    第一步,第二步 和下拉刷新的一样

    第三步:通过mui.init方法中pullRefresh参数配置下拉刷新各项参数

    mui.init({ 
        pullRefresh : { 
            container:"#pullrefresh",//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等 
            up : { 
                contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容 
                contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容; 
                callback : fn //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据; 
            } 
        } 
    });
    

    第四步:设置执行函数

    function fn() { 
        //业务逻辑代码,比如通过ajax从服务器获取新数据; ...... //注意,加载完新数据后,必须执行如下代码,true表示没有更多数据了,
        两个注意事项: //1、若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后 //
        2、注意this的作用域,若存在匿名函数,需将this复制后使用
         
        var _this = this;
          
        _this.endPullupToRefresh(true|false); 
    }
    

    上拉下拉整合

    第一步,第二步和下拉刷新一样

    第三步:在mui.init()内同时设置上拉加载和下拉刷新

    mui.init({
    	pullRefresh: {
    		container: '#pullrefresh',
    		down: {
    			contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
    		    contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
    		    contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容
    			callback: downFn // 下拉执行函数
    		},
    		up: {
    			contentrefresh: '正在加载...',
    			callback: upFn // 上拉执行函数
    		}
    	}
    });
    

    注意: 给获取元素加onclick点击事件不行,需要加addEventListener自定义事件

    手势

    在开发移动端的应用时,会用到很多的手势操作,比如滑动、长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,目前支持的手势事件见如下列表:

    分类 参数描述

    点击 tap 单击屏幕

    doubletap 双击屏幕

    长按 longtap 长按屏幕

     hold            按住屏幕       
    
      release           离开屏幕
    

    滑动 swipeleft 向左滑动

    swiperight 向右滑动

    swipeup 向上滑动

    swipedown 向下滑动

    拖动 dragstart 开始拖动

    drag 拖动中

    dragend 拖动结束

    mui.init({ 
    	gestureConfig:{
    		tap: true, //默认为true 
    		doubletap: true, //默认为false 
    		longtap: true, //默认为false 
    		swipe: true, //默认为true 
    		drag: true, //默认为true 
    		hold:false,//默认为false,不监听 
    		release:false//默认为false,不监听 
    	} 
    });
    

    注意:dragstart、drag、dragend共用drag开关,swipeleft、swiperight、swipeup、swipedown共用swipe开关

    你要监听的对象.addEventListener("swipeleft",function(){ 
    	console.log("你正在向左滑动"); 
    });
    

    遮罩

    在popover、侧滑菜单等界面,经常会用到蒙版遮罩;比如popover弹出后,除popover控件外的其它区域都会遮罩一层蒙版,用户点击蒙版不会触发蒙版下方的逻辑,而会关闭popover同时关闭蒙版;再比如侧滑菜单界面,菜单划出后,除侧滑菜单之外的其它区域都会遮罩一层蒙版,用户点击蒙版会关闭侧滑菜单同时关闭蒙版。

    遮罩蒙版常用的操作包括:创建、显示、关闭,如下代码:

    var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调; 
    mask.show();//显示遮罩
    mask.close();//关闭遮罩
    
    遮罩css样式:   .mui-backdrop
    

    滑动导航选择

    mui提供了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格组件,这些组件都用到了mui框架的slide插件,有较多共同点。首先,Dom内容构造基本相同,都必须有一个.mui-slider的父容器;其次,当拖动切换显示内容时,均会触发slide事件(可拖动式选项卡在点击选项卡标题时,也会触发slide事件),通过该事件的detail.slideNumber参数可以获得当前显示项的索引(第一项索引为0,第二项为1,以此类推),利用该事件,可在显示内容切换时,动态处理一些业务逻辑。

    HTML部分:

    <div class="mui-slider">
    	<!--选项卡标题区-->
    	<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
    	  <a class="mui-control-item" href="#item1">待办公文</a>
    	  <a class="mui-control-item" href="#item2">已办公文</a>
    	  <a class="mui-control-item" href="#item3">全部公文</a>
    	</div>
    	<div class="mui-slider-progress-bar mui-col-xs-4"></div>
    	<div class="mui-slider-group">
    	  <!--第一个选项卡内容区-->
    	  <div id="item1" class="mui-slider-item mui-control-content mui-active">
    	    <ul class="mui-table-view">
    	      <li class="mui-table-view-cell">待办公文1</li>
    	      <li class="mui-table-view-cell">待办公文2</li>
    	      <li class="mui-table-view-cell">待办公文3</li>
    	    </ul>
    	  </div>
    	  <!--第二个选项卡内容区,页面加载时为空-->
    	  <div id="item2" class="mui-slider-item mui-control-content"><ul class="mui-table-view">
    	      <li class="mui-table-view-cell">待办公文1</li>
    	      <li class="mui-table-view-cell">待办公文2</li>
    	      <li class="mui-table-view-cell">待办公文3</li>
    	    </ul></div>
    	  <!--第三个选项卡内容区,页面加载时为空-->
    	  <div id="item3" class="mui-slider-item mui-control-content"></div>
    	</div>
    </div>
    

    JavaScript部分:

    var item2Show = false,item3Show = false;//子选项卡是否显示标志
    document.querySelector('.mui-slider').addEventListener('slide', function(event) {
      if (event.detail.slideNumber === 1&&!item2Show) {
        //切换到第二个选项卡
        //根据具体业务,动态获得第二个选项卡内容;
        var content = 'er';
        //显示内容
        document.getElementById("item2").innerHTML = content;
        //改变标志位,下次直接显示
        item2Show = true;
      } else if (event.detail.slideNumber === 2&&!item3Show) {
        //切换到第三个选项卡
        //根据具体业务,动态获得第三个选项卡内容;
        var content = 'san';
        //显示内容
        document.getElementById("item3").innerHTML = content;
        //改变标志位,下次直接显示
        item3Show = true;
      }
    });
    

    图片轮播

    1, 支持循环

    HTML部分:

    <div class="mui-slider">
      <div class="mui-slider-group mui-slider-loop">
        <!--支持循环,需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/2.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="images/0.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="images/1.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="images/2.jpg" /></a></div>
        <!--支持循环,需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/0.jpg" /></a></div>
      </div>
    </div>
    

    2, 不支持循环 和循环不同的是没有再第一条和最后一条后面加入内容

    HTML部分:

    <div class="mui-slider">
      <div class="mui-slider-group">
        <div class="mui-slider-item"><a href="#"><img src="images/0.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="images/1.jpg" /></a></div>
        <div class="mui-slider-item"><a href="#"><img src="images/2.jpg" /></a></div>
        <!--<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>-->
      </div>
    </div>
    

    JavaScript部分相同:

    //获得slider插件对象
    var gallery = mui('.mui-slider');
    gallery.slider({
      interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
    });
    
    document.querySelector('.mui-slider').addEventListener('slide', function(event) {
      //注意slideNumber是从0开始的;
      alert("你正在看第"+(event.detail.slideNumber+1)+"张图片");
    });
    

    注意:如果ajax获得图片后,需要在写入图片以后,需要从新调用一下

    gallery.slider();
    

    自定义导航

    第一步: 将一下代码写在header(mHeader) 和 content(mBody) 之间

    首页	        
    科技	        
    娱乐	        
    财经        
    北京        
    军事	        
    社会	        
    汽车	        
    视频        
    美女
    

    第二步: 引入dongyi_nav.css 和dongyi_nav.js

    第三步: 执行函数

    dongyi_nav(function(index,data){ // index 为点击索引 data为点击导航的文本内容
    
    	console.log(index);
    	console.log(data);	
    
    });
    

    Ajax-get请求

    // get测试请求地址 http://test.dongyixueyuan.com/link_app/get?state=index&num=0
    
    mui.get('接口地址',{ //请求接口地址
    	state:'index'   // 参数  键 :值
    	num:'0'
    	},function(data){ // data为服务器端返回数据
    	//获得服务器响应 ... 
    
    		console.log(data);
    	
    	},'json' 
    );
    

    Ajax-post请求

    // post测试请求地址 http://test.dongyixueyuan.com/link_app/post
    mui.post('接口地址',{  //请求接口地址
    	   state:'index', // 参数  键 :值
    	   num:'0' 
    	},
    	function(data){ //data为服务器端返回数据
    		
    		//自己的逻辑
    	
    	},'json'
    );
    

    照相机

    var cmr = plus.camera.getCamera();
    cmr.captureImage( function ( p ) {
    		//成功
    		plus.io.resolveLocalFileSystemURL( p, function ( entry ) {
    	
    		    var img_name = entry.name;//获得图片名称
    		    var img_path = entry.toLocalURL();//获得图片路径
    		
    		}, function ( e ) {
    			console.log( "读取拍照文件错误:"+e.message );
    		} );
    		
    	}, function ( e ) {
    		console.log( "失败:"+e.message );
    }, {filename:'_doc/camera/',index:1} ); //  “_doc/camera/“  为保存文件名
    

    访问相册

    plus.gallery.pick( function(path){
        
        img.src = path;//获得图片路径
        
    }, function ( e ) {
        console.log( "取消选择图片" );
    }, {filter:"image"} );
    

    蜂鸣提示音

    switch ( plus.os.name ) { //判断设备类型
        case "iOS":
    	    if ( plus.device.model.indexOf("iPhone") >= 0 ) { //判断是否为iPhone
    	        plus.device.beep();
    	        console.log = "设备蜂鸣中...";
    	    } else {
    	        console.log = "此设备不支持蜂鸣";
    	    }
        break;
        default:
    	    plus.device.beep();
    	    console.log = "设备蜂鸣中...";
        break;
    }
    

    手机震动

    switch ( plus.os.name ) { //判断设备类型
        case "iOS":
                if ( plus.device.model.indexOf("iPhone") >= 0 ) { //判断是否为iPhone
                    plus.device.vibrate();
                    console.log("设备振动中...");
                } else {
                    console.log("此设备不支持振动");
                }
        break;
        default:
        	plus.device.vibrate();
                console.log("设备振动中...");
        break;
    }
    

    弹出菜单

    弹出菜单的原理主要是通过锚点进行的,如果需要多个弹出菜单,可以在a标签内设置锚点,对应相应的div的id即可

    <a href="#popover">打开弹出菜单</a> // href 定义锚点
    <div id="popover" class="mui-popover"> //id 对应锚点
      <ul class="mui-table-view">
        <li class="mui-table-view-cell"><a href="#">Item1</a></li>
        <li class="mui-table-view-cell"><a href="#">Item2</a></li>
        <li class="mui-table-view-cell"><a href="#">Item3</a></li>
        <li class="mui-table-view-cell"><a href="#">Item4</a></li>
        <li class="mui-table-view-cell"><a href="#">Item5</a></li>
      </ul>
    </div>
    

    设备信息

    plus.device.model  //设备型号
    plus.device.vendor  //设备的生产厂商
    plus.device.imei  // IMEI 设备的国际移动设备身份码
    plus.device.uuid  // UUID 设备的唯一标识
    // IMSI 设备的国际移动用户识别码
    var str = '';
    for ( i=0; i<plus.device.imsi.length; i++ ) {
         str += plus.device.imsi[i];
    }
    plus.screen.resolutionWidth*plus.screen.scale + " x " + plus.screen.resolutionHeight*plus.screen.scale ; 
    //屏幕分辨率
    plus.screen.dpiX + " x " + plus.screen.dpiY; //DPI每英寸像素数
    

    手机信息

    plus.os.name //名称
    plus.os.version //版本
    plus.os.language //语言
    plus.os.vendor //厂商
    //网络类型
    var types = {};
    types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
    types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
    types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
    types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
    types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
    types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
    types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
    var network = types[plus.networkinfo.getCurrentType()];
    

    发送短信

    <a href=“sms:10086">发送短信
    
    var msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS);
    msg.to = ['13800138000', '13800138001'];
    msg.body = '东翌学院http://www.dongyixueyuan.com';
    plus.messaging.sendMessage( msg );
    

    拨打电话

    <a href="tel:10086">拨打电话</a>
    

    发送邮件

    <a href="mailto:dongyixueyuan@qq.com">发送邮件到东翌学院</a>
    

    本地存储

    //设置
    plus.storage.setItem('键','值'); -> plus.storage.setItem('name','dongyixueyuan');    
    //查询
    plus.storage.getItem('键'); -> var name = plus.storage.getItem('name');    
    //删除
    plus.storage.removeItem('键'); -> plus.storage.removeItem('name');    
    //全部清除
    plus.storage.clear();    
    
    //HTML5自带 - 设置
    localStorage.setItem('键','值'); -> localStorage.setItem('name','dongyixueyuan');    
    //HTML5自带 - 查询
    localStorage.getItem('键'); -> var name = localStorage.setItem('name');
    
    //HTML5自带 - 删除
    localStorage.removeItem('键'); -> localStorage.removeItem('name');
    

    图片上传

    //初始上传地址  
    var server="http://tongle.dongyixueyuan.com/upload_file.php";  // 学员测试使用
    var files=[]; //图片存放的数组 可以上传一个,或者多个图片     		
    //上传图片
    function upload_img(p){
    	//又初始化了一下文件数组 为了支持我的单个上传,如果你要一次上传多个,就不要在写这一行了
    	//注意 
    	files=[];
    	var n=p.substr(p.lastIndexOf('/')+1);
    	files.push({name:"uploadkey",path:p});    	
    	//开始上传
    	start_upload();    		
    }    		
    //开始上传
    function start_upload(){
    	if(files.length<=0){
    		plus.nativeUI.alert("没有添加上传文件!");
    		return;
    	}
    	//原生的转圈等待框
    	var wt=plus.nativeUI.showWaiting();
    			
    	var task=plus.uploader.createUpload(server,
    		{method:"POST"},
    		function(t,status){ //上传完成
    			alert(status);
    			if(status==200){    						
    				//资源
    				var responseText = t.responseText;    						
    				//转换成json
    				var json = eval('(' + responseText + ')');    					
    				//上传文件的信息
    				var files = json.files;    				
    				//上传成功以后的保存路径
    				var img_url = files.uploadkey.url;   						
    				//ajax 写入数据库   						
    						
    				//关闭转圈等待框
    				wt.close();
    			}else{
    				console.log("上传失败:"+status);
    				//关闭原生的转圈等待框
    				wt.close();
    			}
    		});    			
    	task.addData("client","");
    	task.addData("uid",getUid());
    	for(var i=0;i<files.length;i++){
    		var f=files[i];
    		task.addFile(f.path,{key:f.name});
    	}
    	task.start();    		
    }    		
    // 产生一个随机数
    function getUid(){
    	return Math.floor(Math.random()*100000000+10000000).toString();
    }
    

    地理位置

    //直接获取地理位置

    plus.geolocation.getCurrentPosition( geoInfo, function ( e ) {
    		alert( "获取位置信息失败:"+e.message );
    } );
    

    //监听地理位置

     var watchId; //开关 函数外层定义		
        if ( watchId ) {
        	return;
        }
        watchId = plus.geolocation.watchPosition( function ( p ) {
        	alert( "监听位置变化信息:" );    
        	geoInfo( p );    			
        }, function ( e ) {
        	alert( "监听位置变化信息失败:"+e.message );
        });
    

    //停止监听地理位置

     if ( watchId ) {
        	alert( "停止监听位置变化信息" );    				
        	plus.geolocation.clearWatch( watchId );
        	watchId = null;
        }
    //获得具体地理位置
    //获取设备位置信息
        function geoInfo(position){    
        	var timeflag = position.timestamp;//获取到地理位置信息的时间戳;一个毫秒数;    
    	var codns = position.coords;//获取地理坐标信息;    	
    	var lat = codns.latitude;//获取到当前位置的纬度;    
    	var longt = codns.longitude;//获取到当前位置的经度    
    	var alt = codns.altitude;//获取到当前位置的海拔信息;    
    	var accu = codns.accuracy;//地理坐标信息精确度信息;    
    	var altAcc = codns.altitudeAccuracy;//获取海拔信息的精确度;    
    	var head = codns.heading;//获取设备的移动方向;    
    	var sped = codns.speed;//获取设备的移动速度;   			
    	//百度地图申请地址
    //	http://lbsyun.baidu.com/apiconsole/key
    //	http://api.map.baidu.com/geocoder/v2/?output=json&ak=你从百度申请到的Key&location=纬度(Latitude),经度(Longitude)
    //	http://api.map.baidu.com/geocoder/v2/?output=json&ak=BFd9490df8a776482552006c538d6b27&location=40.065639,116.419413    
            //详细地址
           //http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&pois=1&location=40.065639,116.419413    			
    			
    	var baidu_map = "http://api.map.baidu.com/geocoder/v2/?output=json&ak=BFd9490df8a776482552006c538d6b27&location="+lat+','+longt;
    	mui.get(baidu_map,{  //请求的地址
    	},
    	function(data){ //服务器返回响应,根据响应结果,分析是否登录成功; ... 
    
    		var result = data['result'].addressComponent;	
    					
    		// 国家
    		var country = result['country'];    		
    		//城市
    		var city = result['city'];;    		
    		//地址
    		var address = result['province'] + result['district'] + result['street'];    		
    		//data 有很多信息,大家如果需要可以for in出来看下    	
    		},'json'
    	);    			
    }
    

    设置IOS状态栏

    mui.plusReady(function(){
    	if(mui.os.ios){
    		//UIStatusBarStyleDefault //字体深色 
    		//UIStatusBarStyleBlackOpaque //字体浅色
    		plus.navigator.setStatusBarStyle('UIStatusBarStyleBlackOpaque');
    		plus.navigator.setStatusBarBackground("#007aff"); //背景颜色
    	}
    			
    })
    

    手机通讯录

    mui.plusReady(function(){	
    	//访问手机通讯录  plus.contacts.ADDRESSBOOK_PHONE
    	//访问SIM卡通讯录  plus.contacts.ADDRESSBOOK_SIM	
    	plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE,function(addressbook){
    		addressbook.find(null,function (contacts){		
    			for(var a in contacts){			
    			        //这里是安卓手机端的获取方式 ios的不太一样,如果需要这块代码可以联系老师获得
    				var user = contacts[a].displayName; //联系人
    				var phone = contacts[a].phoneNumbers[0].value; //手机号码							
    			}				
    		},function ( e ) {alert( "Find contact error: " +e.message );},{multi:true});
    	});			
    });
    

    启动页设置

    设置手动关闭启动页:

    manifest.json -> plus -> autoclose 改为 false
    关闭启动页:

    plus.navigator.closeSplashscreen();
    

    PHP后台搭建

    在开发工具内下载 AppServ 和 ThinkPHP,
    AppServ是本地服务器,ThinkPHP是后台框架

    ThinkPHP采用单入口模式 index -> 控制器 -> 方法
    
    index.php 内书写如下:
    
    define("APP_NAME",'WEB'); //站点名称
    define("APP_PATH",'./WEB/'); //站点路径
    define("APP_DEBUG",true);//开启调试模式
    
    require("./ThinkPHP/ThinkPHP.php");// 引入框架文件
    

    JSON转换

    JSON.parse()和JSON.stringify()
    1.parse 用于从一个字符串中解析出json 对象。例如
     
    var str='{"name":"zxd学院","age":"23"}'
     
    经 JSON.parse(str) 得到:
     
    Object: age:"23" 
            name:"zxd学院"
     
    ps:单引号写在{}外,每个属性都必须双引号,否则会抛出异常 
    2.stringify用于从一个对象解析出字符串,例如 
    var a={a:1,b:2} 
    经 JSON.stringify(a)得到: 
    '{"a":1,"b":2}'
    

    隐藏本页面中滚动条

    var self = plus.webview.currentWebview();
    
    self.setStyle({
        bounce: 'none', //禁止弹动
        scrollIndicator: 'none' //隐藏滚动条
    });	
    

    首次启动欢迎页

    首先引入dongyi_welcome.css 和 dongyi_welcome.js 文件

    <div id="slider" class="mui-slider" >
    	<div class="mui-slider-group">
    		<!-- 第一张 -->
    		<div class="mui-slider-item">
    			<img src="img/shuijiao.jpg">
    		</div>
    		<!-- 第二张 -->
    		<div class="mui-slider-item">
    				<img src="img/muwu.jpg">
    		</div>
    		<!-- 第三张 -->
    		<div class="mui-slider-item">
    				<img src="img/cbd.jpg">
    		</div>
    		<!-- 第四张 -->
    		<div class="mui-slider-item">
    			<img src="img/yuantiao.jpg">
    			<button id="dy_enter">立即进入</button>
    		</div>
    	</div>
    	<div class="mui-slider-indicator">
    		<div class="mui-indicator mui-active"></div>
    		<div class="mui-indicator"></div>
    		<div class="mui-indicator"></div>
    		<div class="mui-indicator"></div>
    	</div>
    </div>	
    

    ,

    dongyi_welcome({
    	preLoadUrl:'main.html',//预加载页面url
    	preLoadId:'main',//预加载页面id
    });
    

    数据库增删改查和接口

    Class UserAction extends Action {
    		/**
    		 * 添加数据
    		 */
    		public function add(){
    			$data['phone'] = '1380013800';
    			$data['name'] = 'yidong';
    			// M = model M('你要操作的数据表')->方法
    			$re = M('user')->add($data);
    			//输出
    			echo $re;
    			// 添加数据返回值 是数据的id
    		}
    		/**
    		 * 修改数据
    		 */
    		public function mod(){
    			$data['phone'] = '130013000';
    			$id = 1;
    			$re = M('user')->where("`id`='$id'")->save($data);
    			echo $re;
    			//修改数据 返回值为1是成功 0为失败
    		}
    		/**
    		 * 删除数据
    		 */
    		public function del(){
    			$id = '2';
    			$re = M('user')->where("`id`='$id'")->delete();
    			echo $re;
    			// 删除 返回值为1也是成功 0 为失败
    		}
    		/**
    		 * 查询数据
    		 */
    		public function select(){
    			//单条带条件查询
    			$id = '1';
    			$arr1 = M('user')->where("`id`='$id'")->find();
    			// dump($arr1);
    			// 多条不带条件查询  查询数据库内所有的数据 不建议使用
    			$arr2 = M('user')->select();
    			// dump($arr2);
    			// 多条带条件查询 
    			$phone = '1380013800';
    			$arr3 = M('user')->where("`phone`='$phone'")->select();
    			// dump($arr3);
    			// 排序
    			// asc 正序
    			// desc 倒序
    			$arr4 = M('user')->where("`phone`='$phone'")->order("id desc")->select();
    			// dump($arr4);
    			// 分页 limit
    			// limit(参数1); 一个参数的情况下 拿多少条数据
    			// limit(参数1,参数2); 二个参数的情况下 第一个参数是从多少条开始拿,第二个参数还是拿多少条
    			// $arr5 = M('user')->order("id desc")->limit(2)->select();
    			// dump($arr5);
    			$arr6 = M('user')->order("id desc")->limit(2,2)->select();
    			// dump($arr6);
    			//返回json数据 给我们APP
    			echo json_encode($arr6);
    			// 接口地址
    			// http://127.0.0.1/www/xianshang14/index.php/User/select
    		}
    }
    

    推送

    • 注册个推,获得APPKEY,APPID,MASTERSECRET*

    • 推送信息必须打包安装手机后才能使用,主要是通过client_id来进行对每个用户进行推送,首先我们需要在数据库的用户表内添加一个client_id 的字段(在用户注册的时候或者在每次登录的时候存入用户的新client_id,保证推送的有效性),为存放我们用户的client_id,比如这里是个商城,你购买完商品,系统会推送一条信息给你,你只需要告诉程序,你要推送人的手机号码,标题,内容即可(如需要点击信息到达订单页面,需要用透传来实现),服务器获得手机号码以后会在数据库内查找,并获得该用户的client_id,然后实现推送。这里要根据自己的情况来写逻辑,比如东翌课堂的分类,前端,后端,数据库等分类,如果我有一个课程上线,我可以推送给这些对某一类感兴趣的学员。当然更多的逻辑需要你自己来写,群发我们可以理解成,循环发送多个单条的(*单条发送已经测试没问题,群发没测试,大家可以自己测试一下,有问题随时反馈过来)。

    • 由于推送信息的多样性,本次封装仅对本APP注册用户进行推送,如需要全员推送,可直接使用个推官网创建信息的方式直接推送。

    推送步骤:

    1, 右上角下载 推送包

    2,single.php (推送单个普通推送/可透传,点击信息可打开APP,*透传可写逻辑,透传需要) (透传格式:{“path”:“course”,id:“2”}

    openPath.php (推送打开页面信息,点击信息可在浏览器打开你传入的URL)

    download.php (推送下载信息,点击信息可下载你传入URL的文件)

    3,简单粗暴的设置一下这3个文件内的14行APPKEY,15行APPID,16行MASTERSECRET为你在个推得到的APPKEY,APPID,MASTERSECRET

    如下我只写了一个实例,单条普通信息推送

    PHP端代码:

    在PHP Action文件夹内建立了一个 PushAction.class.php 的文件

    Class PushAction extends Action {
    	//单个信息推送 透传
    	public function single(){		
    		$title = $_GET['title_data'];
    		$content = $_GET['content_data'];
    		$phone = $_GET['phone_data'];
    		$pass = $_GET['pass_data'];		
    		if($title == '' || $content == '' || $phone == ''){
    			exit;
    		}
    		$user = M('user')->where("`phone`='$phone'")->find();
    		$cid = $user['client_id'];
    		$url = 'http://' .$_SERVER['HTTP_HOST'] .  . '/Push/single?title='.$title.'&content='.$content.'&cid='.$cid.'&pass='.$pass;
    		$html = file_get_contents($url);  
    		echo $html;  
    	}
    }
    

    //APP端代码 我在index文件中

    // 监听在线消息事件
    plus.push.addEventListener( "receive", function( msg ) {
        if ( msg.aps ) {  // Apple APNS message
    //		            alert( "接收到在线APNS消息:" );
        } else {
    //		            alert( "接收到在线透传消息:" );
        }    
    	var login_phone = localStorage.getItem('你存入的登录信息');    
    
        var content = msg.content;        
        var json = eval('('+content+')');
        var path = json.path;
        var id = json.id;
        //订单
        if(path == 'order'){	
        	if(login_phone){
    			dui.jump('./Home/order.html','order');
        	}        	
        }else if(path == 'course'){
        	localStorage.setItem('dongyikecheng_cid',id);
    			dui.jump('./Course/course_detail.html','course_detail');
        }else if(path == 'message'){
        	if(login_phone){
    			if(id == 'system'){
            		dui.jump('./Message/system_message.html','system_message');
            	}else{
            		dui.jump('./Message/chat_message.html','chat_message');
            	}
    		}        	
        }    
    }, false );
    

    以上PHP代码可以配合后台,给特定人群推送,逻辑需要大家实现了,因为每个APP的逻辑都不一样

    浏览器打开新页面

    plus.runtime.openURL( url );
    

    PDF浏览

    IOS端内可以直接打开
    安卓端方式:
    1,调用本地第三方浏览器打开

      mui.plusReady(function(){        
        	plus.runtime.openFile( "./file/node_js.pdf" );
        });
    

    2,引入第三方js类打开

    自定义下拉刷新

    // 双webview 写到父页面里面

    .mui-pull-top-pocket{
    	top:100px !important;
    	position: absolute;
    }
    .mui-pull-caption {
          background: red;;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            width: 144px;
            height: 31px;
            font-size: 0px;
    }
    /*下拉刷新圆形进度条的大小和样式*/
    
    .mui-spinner {
        width: 32px;
        height: 32px;
    }
    .mui-spinner:after {
       background: red;
    }
    /*下拉刷新的箭头颜色*/
    
    .mui-icon-pulldown {
        color: #FF058B;
    }
    

    即时聊天

    //即时聊天采用野狗无后端模式,野狗: https://www.wilddog.com/

    //引入文件

    <script src = "https://cdn.wilddog.com/js/client/current/wilddog.js" ></script>
    

    //写入数据

    // new Wilddog   message 为自己定义的一个表或者空间,用于放我们的聊天记录
    var wd = new Wilddog('https://dongyixueyuan.wilddogio.com/message');
    
    
    btn.addEventListener('tap',function(){
    	var content = text.value;
    	//记录发布时间戳
    	var date = new Date();
    	var time = date.getTime();
    	
    	//插入数据
    	//第一个参数单独的一个空间,比如两个人聊天,他们就是在单独的一个空间聊天, message 里面可以有很多个独立的空间,比如 张三和李四 是一个空间  王五和赵六又是一个空间
    	//第二个参数是你发布信息的时间,我们以时间作为信息的依据,通过时间的排序我们的聊天记录
    	//第三个参数是一个json,为我们的聊天信息,比如 昵称,头像,内容,表情,时间
    	wd.child('1').child(time).set({
    		'name':'dongyixueyuan',
    		'content':content,
    		'time':time
    //				...更多
    	});
    })
    

    //获得数据

    // 监听聊天内容变化
    var listen = "https://dongyixueyuan.wilddogio.com/message/1";
    var listen_wd = new Wilddog(listen);
    listen_wd.on('child_added',function(data){
    	
    	list.innerHTML += ''
    						+'	'+data.val().name+' '+data.val().time+''
    						+'	'+data.val().content+''
    						+'';
    	console.log(data.val().name);
    })
    

    //删除

    //1为空间名,1442293959023为某一条信息
    var ref = new Wilddog("https://dongyixueyuan.wilddogio.com/message/1/1442293959023");
    
    ref.remove()
    

    //时间转换函数

    function getLocalTime(nS) {     
    	var mydate = new Date(nS);
    	var today = '';
    //			today += mydate.getFullYear() + '年';   //返回年份
    //			today += mydate.getMonth()+1 + '月';    //返回月份,因为返回值是0开始,表示1月,所以做+1处理
    //			today += mydate.getDate() + '日';	//返回日期
    	today += mydate.getHours() + ':';
    	
    	if(mydate.getMinutes() < 10){
    		var min = '0'+mydate.getMinutes();
    	}else{
    		var min = mydate.getMinutes();
    	}
    	
    	today += min + ':';
    	today += mydate.getSeconds();
    	return today;
    }
    

    //设置滚动条高度

    document.body.scrollTop = document.body.offsetHeight;
    

    双击安卓返回键退出

    //监听安卓返回键
    var first = null;
    mui.back = function() {
        if (!first) {
            first = new Date().getTime();
            mui.toast('再按一次退出应用');
            setTimeout(function() {
                first = null;
            }, 1000);
        } else {
            if (new Date().getTime() - first < 1000) {
                plus.runtime.quit();
            }
        }
    }
    

    QQ登录

    //申请各个开发平台的开发者

    微信: https://open.weixin.qq.com/

    QQ: http://open.qq.com/

    微博: http://open.weibo.com/

    //设置 manifest.json -> SDK配置

    //初始化QQ登录,微信登录,微博登录

    var auths={};
    mui.plusReady(function(){
    	// 获取登录认证通道
    	plus.oauth.getServices(function(services){
    		for(var i in services){
    			var service=services[i];
    			auths[service.id]=service;
    		}
    	},function(e){
    		outLine("获取登录认证失败:"+e.message);
    	});
    });
    

    //调用认证事件

    // id 为 qq,weixin,weibo 
    function login(id){
    	console.log("----- 登录认证 -----");
    	var auth=auths[id];
    	if(auth){
    		var w=plus.nativeUI.showWaiting();
    		document.addEventListener("pause",function(){
    			setTimeout(function(){
    				w&&w.close();w=null;
    			},2000);
    		}, false );
    		auth.login(function(){
    			w&&w.close();w=null;
    			console.log("登录认证成功:");
    			console.log(JSON.stringify(auth.authResult));
    			userinfo(auth);
    		},function(e){
    			w&&w.close();w=null;
    			console.log("登录认证失败:");
    			console.log("["+e.code+"]:"+e.message);
    			plus.nativeUI.alert("详情错误信息请参考授权登录(OAuth)规范文档:http://www.html5plus.org/#specification#/specification/OAuth.html",null,"登录失败["+e.code+"]:"+e.message);
    		});
    	}else{
    		console.log("无效的登录认证通道!");
    		plus.nativeUI.alert("无效的登录认证通道!",null,"登录");
    	}
    }
    // 获取用户信息
    function userinfo(a){
    	console.log("----- 获取用户信息 -----");
    	a.getUserInfo(function(){
    		console.log("获取用户信息成功:");
    		console.log(JSON.stringify(a.userInfo));
    		var nickname=a.userInfo.nickname||a.userInfo.name;
    		plus.nativeUI.alert("欢迎“"+nickname+"”登录!");
    	},function(e){
    		console.log("获取用户信息失败:");
    		console.log("["+e.code+"]:"+e.message);
    		plus.nativeUI.alert("获取用户信息失败!",null,"登录");
    	});
    }
    // 注销登录
    function logoutAll(){
    	console.log("----- 注销登录认证 -----");
    	for(var i in auths){
    		logout(auths[i]);
    	}
    }
    function logout(auth){
    	auth.logout(function(){
    		outLine("注销\""+auth.description+"\"成功");
    	},function(e){
    		outLine("注销\""+auth.description+"\"失败:"+e.message);
    	});
    }
    
    展开全文
  • MUI简介

    2020-06-26 11:47:22
    MUI文档 三演示Demo项目 四夜神模拟器和HBuildx连接 五手机启动开发者模式 一官网地址 https://www.dcloud.io/mui.html 二MUI文档 https://dev.dcloud.net.cn/mui/ui/ 三演示Demo项目 1新建项目 2新建...
  • MUI快速入门!简单易上手教程!!

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

    2018-08-01 10:27:36
    基于mui,一套HTML5工程,通过前端构建工具(如grunt)条件编译,可同时发行到iOS Appstore、安卓各大应用商店、普通手机浏览器、微信App和流应用。 并且在每个平台上,都能调用该平台的专有API达到原生体验。
  • mui消息框(alert,confirm,prompt,toast)的使用 在开发mui的过程中,我们最经常用到的就是消息框,例如警告框、确认框、对话框、消息提示框等等一系列的弹出消息框。mui没有让我们失望,这些都做好了封装 alert...
  • mui在vue_cli上使用

    千次阅读 2018-07-10 14:06:45
    import mui from './assets/js/mui.js' 如果不添加下面会显示mui is not defined 报错 Vue.prototype.mui = mui 添加成功后就可以使用mui 了? 结果发现在vue里会使用严格模式,而mui不支持严格模式上使用,...
  • MUI框架入门

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

    千次阅读 2019-08-16 15:21:46
    无法用npm安装,只能上GitHub上下载包,手动载入 https://github.com/dcloudio/mui 只用将dist文件导入就好 在src目录下创建一个lib文件夹,然后把...import './lib/mui/css/mui.min.css' mui不一定要用vue ...
  • HTML5+MUI+HBuilder 之初探情人

    万次阅读 多人点赞 2014-12-22 18:19:24
    MUI(Mobile User Interface)是国内DCloud的最新成果。它遵循了W3C最新的H5+规范,旨在提供一个高效的,跨平台的,H5前端开发框架。本文分享了作者对这项新技术的感受和想法。刚接触这项技术是令人振奋和激动的!...
  • 基于MUI框架的使用HTML5+实现的二维码扫描功能

    万次阅读 多人点赞 2017-02-09 09:24:17
    Barcode的一个实现案例 一、简介 Barcode模块管理条码扫描,提供常见的条码(二维码及一维码)的扫描识别功能,可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。...
  • mui框架

    万次阅读 2017-10-16 10:29:06
    1 MUI介绍 =======1.1 MUI是什么,解决了什么问题。(1)性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,...
  • MUI utils

    千次阅读 2016-07-12 19:03:17
     mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面、关闭页面、手势事件配置、预加载、下拉刷新...
  • MUI框架

    千次阅读 2018-05-28 18:37:21
    MUI 有以下两大亮点:一、轻量追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征;MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K二、原生UI鉴于之前的很多前端框架(特别是响应式...
  • MUI Ajax

    千次阅读 2016-07-12 19:06:09
    mui框架基于htm5plus的XMLHttpRequest,封装了常用的... 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。 1、mui.ajax
  • mui中分页功能

    千次阅读 2018-11-30 14:38:48
    这写有完整的JS代码,只要定义好一下几个参数就可以自动生成分页的导航栏 //定义有关分页的全局变量 pageNum:当前页 pageSize:每页显示的数据 pages:总页数 total:总数据数 navigatepageSize:分页导航显示的...
  • MUI框架-10-MUI 跳转详情页面 上一篇介绍了如何实现数据交互,给别人的 API 发送 ajax 请求,我们得到数据,再使用 art-template 模板引擎拼接 HTML,最终实现实现数据交互,如果还没有接触,请先学习:MUI框架-...

空空如也

1 2 3 4 5 ... 20
收藏数 23,652
精华内容 9,460
关键字:

mui