首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

跨平台移动APP开发进阶(一):mui开发注意事项

mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验;这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文;想了解mui更详细的信息,请访问mui官网。...)、底部工具条(.mui-bar-footer)、底部选项卡(.mui-bar-tab);这些元素使用时需遵循一个规则:放在mui-content元素之前,即使是底部工具条和底部选项卡,也要放在.mui-content...窗口管理 页面初始化:必须执行mui.init方法 mui在页面初始化时,初始化了很多参数配置,比如:按键监听、手势监听等,因此mui页面都必须调用一次mui.init()方法; 页面跳转:抛弃href...方法](http://dcloudio.github.io/mui/javascript/#openwindow)打开一个新的webview,mui自动监听新页面的loaded事件,若加载完毕,再自动显示新页面...;扩展阅读: hello mui中的无等待窗体切换是如何实现的 提示HTML5的性能体验系列之一 避免切页白屏 页面关闭:勿重复监听backbutton mui框架自动封装了页面关闭逻辑,若希望自定义返回逻辑

1.4K20
您找到你想要的搜索结果了吗?
是的
没有找到

教你在五分钟构建一个App页面

怀着忐忑的心情上度娘”app怎么开发“,发现常用的语言有java,html5,css3,javascript等等。博主是学PHP的且对安卓,java一窍不通。...) -- mText_Search(搜索框) mBody(主体) -- mGallery(图片轮播) -- mGrid(九宫格) -- mListMedia(图文列表图片居左) mTab(底部选项卡...) 需要说明的是,mui只是简单构建一个app页面,如果你要实现界面交互,还得学习HTML5plus的相关内容,如tab切换,调用手机硬件等等。...首先将手机与电脑usb连接,可借助第三方软件连接手机如,360手机助手 在连接手机之前需要打开手机的开发者模式,并在打开usb调试 对于不同的手机开发者模式打开不同,大家自行百度 连接成功图示 完成上述步骤后...,我们在编辑器菜单栏选择“运行” 点击运行到设置 底部控制台打印信息如下 第一次会在你的手机上面安装Hbuilder,然后手动或自动启动Bulilder即可在手机上运行 如下: 到此完成

1.4K20

跨平台移动APP开发进阶(三):hbuilder+mui mobile app 开发心酸路

解决措施:将获取组件id的js脚本在定义组件id之后完成。 3.问题描述:页面是由主页面加内容页面组合而成。在主页面做弹出菜单时,弹出菜单无法显示。 问题根源:内容页面遮挡了弹出菜单,致其无法显示。...并获取其id 解决措施: //on中参数的含义依次为事件、选择器、参数、方法,其中选择器与参数为可选项 mui(‘.mui-content’).on(‘tap’,‘body’,function(){...5.问题描述:由于index页面的顶部导航栏与分类页面的头顶部导航栏相同,header和content在不同的webview中。...Mui能够做到吗? 解决措施:使用webview模式选项卡。何谓webview模式?...其实就是每个选项卡内容都是一个独立的webview,彼此之间互相独立、互不影响; 对于较为复杂的业务系统,推荐使用该模式。另外,基于webview模式的选项卡,支持原生加速的下拉刷新。

3.1K30

超强H5视频播放器!!!

今天给大家介绍一款强大的HTML5视频播放插件。...现在在网页中插入视频的需求越来越多了,自己写的话则需要考虑以下问题: 各个浏览器播放样式的差别 ui 扩展之间以及状态处理容易产生冲突的问题 不同客户端(pc、ios、安卓)针对html5可以触发的时机也不太相同...概述 MuiPlayer是一款H5视频播放插件,默认配置了精美可配置的播放控件,包括了常用的播放场景,例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。...MuiPlayer 除了默认的简单配置,还具有丰富的参数可以自定义播放器实例,通过轻松的配置即可完成自定义场景的视频播放。...当然MuiPlayer还可以进行其他的一些配置,例如: 自动播放:autoplay 默认为false,如果设置为true则会自动进行播放 循环播放:loop 默认false,如果设置为true则会循环播放

1.7K20

中国移动完成首次在雄安的5G远程自动驾驶行驶测试 | 热点

近日,中国移动完成在雄安新区的首次5G-V2X自动驾驶远程启动及行驶测试,实现了通过5G网络远程控制20公里以外的车辆,并完成启动、加速、减速、转向等操作。...本次5G远程自动驾驶测试中,测试人员在5G核心网侧连接车辆模拟控制器,下发操纵指令,通过5G新空口与相应的传输专线,将转向、加速等指令传输给远程车辆。车内的模块接收信号并指挥车辆完成相应动作。...中国移动远程自动驾驶项目负责人表示,这次测试项目的成功,验证了5G大宽带、低延迟的网络能力,这将为智能网联汽车的发展奠定良好的基础。...由于5G网络的低延迟、大宽带性能是实现远程高精度控制和高可靠性自动驾驶的重要保障,因此中国移动将持续推进基于5G-V2X的远程自动驾驶项目演进。...并逐步实现封闭测试场、规则化测试道路、开放性测试道路等三个阶段的验证,为远程自动驾驶商业化提供技术支持。

45340

跨平台移动APP开发进阶(二):HTML5+、mui开发移动app教程

序 通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plus.org组织,推出HTML5+规范。...注:使用 HTML5+开发的移动App 并非mobileweb页面。这是新手最容易混淆的地方。...特点是快捷键比较多,支持移动app开发(h5+方式)。 可以说nodejs将js带到后端,h5+将js带到移动端。...选择模版 这里选择mui项目,会自动引入mui的js和css,如下: 文件结构 默认有以下几个文件夹:css,fonts,js,如下: 简单开发 header 打开index.html后在body内输入...5.新页面适用于新页面 open一个新页面,适用于查看详情之类的,需要打开一个新页面的情况,并且mui自己封装了新页面的back方法,你就不需要去操心了。

4.3K21

mui.init()与mui.plusReady()区别和关系

首先我们来看下mui.init()与mui.plusReady()的区别: mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在...开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady...个人认为: 1.每个用到mui的页面都调用下mui.init。 2.如果需要使用大H5+对象,就写到plusReady中,如plus对象。...理论上只是在html5+加载完之后执行其中的代码罢了,是不会影响性能,只会晚一点执行(延迟并不会感受到) 关于mui plusReady的注意点: mui.plusReady()中的代码不执行 可能1:...的一些参数配置 如果要使用h5+的一些对象、方法,就要使用mui.plusReady,比如mui.plus对象。

1.9K10

现代 React 开发必备的 13 个神库,路由、UI 组件库、拖拽、虚拟列表都齐了

这些功能包括自动缓存、自动重新 Fetch、滚动恢复、Render-as-you-fetch 等。 2. Redux Redux是 JavaScript 中的一个开源状态管理库。...(来源: Base UI) MUI System: MUI System 是一组 CSS 实用程序的集合,用于使用 MUI 组件库快速布局自定义设计。...5. React DND 现代 React 应用程序很少简单。几乎所有的工业级应用程序都有某种形式的拖放功能。 React DND是一个帮助你构建基于拖放功能的 React 应用程序的库。...为此,它使用了HTML5 拖放 API。 这个库使用起来相当简单,在实际应用中有许多有趣和创新的用例。...它不是一个 React 库,而是一个 CSS 样式框架,在 React 开发者中用于样式化应用程序的最受欢迎选项之一。

1.8K30

Gatsby还是Next.js,微言码道官网折腾事记

5•生产打包添加gzip支持,优化网站请求大小 技术构建背景 微言码道的官网是基于Gatsby + Cockpit CMS + MUI构建而成。...在最初的技术选型时,有考虑过hexo以及Wordpress两个选项。...因此,在2020年底了解了Jamstack理念以及基于React的Gatsby技术后,决定基于Gatsby完全开发一个网站,这个在2021年元旦用了三天假期完成。...升级Material UI至最新的MUI 5 微言码道官网的UI是选择的Material UI,一个非常好的React UI框架,与antd design相比,它更适合TO C互联网及移动设备,而antd...Material UI最近升级到了MUI,一个重新品牌命名的全新版本。同样为了后续持续更新官网的考量,本次更新升级到了最新的MUI

2.2K30

Mui Webview下来刷新上拉加载实现

今天使用mui 的webview实现了一个H5页面的上拉加载下拉刷新的效果,拿出来和大家一起分享一下,希望各位博友有用,当然啦有的时候坑会很多,但是只要我们学会用思考的方式去找问题,不管是什么问题我们都是可以解决的...--mui-scroll是否允许滑动--> <ul class="<em>mui</em>-table-view <em>mui</em>-table-view-chevron...触发下拉刷新拖动距离, auto:false,//可选,默认false.<em>自动</em>上拉加载一次 callback: function () {//必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据...; //<em>5</em>毫秒显示 window.setTimeout(function () { //向下刷新重新赋值 page = 1; size = 3; //调用获取数据的方法 DtGetData(size,

90220

混合应用开发框架Cordova源码学习总结

开发框架,旨在让开发者使用HTML、JavaScript、CSS等Web API开发跨平台的移动平台应用程序;主要提供了用JavaScripte访问移动平台API的能力;Ionic则是可以使用HTML5构建混合移动应用的用户界面框架...MUI MUI框架是一个基于HTML5+规范的前端UI框架,利用HTML5+扩展的原生能力,解决常用UI控件的性能和跨平台问题。...使用MUI框架,可以简单方便的开发出高性能的APP,同时MUI也可以自动适应没有HTML5+环境的普通浏览器,降低为普通WEB APP。...从MUI提供的SDK来看,前端控件非常全,能满足常用行业应用的开发;但需要依托HTML5+规范的能力,否则会降低为普通的WEB APP; 缺点:MUI Android SDK的lib库中只有jar包,对于不支持...HTML5+环境的WEBVIEW, Android NATIVE层代码不可定制修改。

86210
领券