mui

mui开发APP过程中学习使用滑动切换底部选项卡时遇到一个问题，底部选项卡和头部是在父页面，其中有四个子页面是底部选项卡对应的四个窗口页面，但是在子页面打开一个新webview页面时发现打不开，甚至还出现即使打开了，父页面还在，毕竟是在子页面操作的，所以父页面存在也合理，所以就需要在子页面来操作父页面。 当然，发现 在子窗口页面中打开新页面的方式 最简单的就是就是top方式，这样新的webview页面就会沾满整个窗口，父页面被遮住。 top.mui.openWindow(url) 如果想在子页面来操作父页面，又该用什么方法呢？那就是evalJS，需要配合一个触发事件比如点击才能执行。 直接用下面的代码演示，都是亲自测试过完全可以用的，案例中使用了hcoder的h.js，也可以不用， h.js最大的好处就是简化了对dome页面的操作，可以说是小型的jQuery吧，我是特别喜欢用的。 案例中是子页面在执行完向左滑动后，修改父窗口页面的底部选项卡的状态和头部的title文字内容。 <script src="js/mui.min.js"></script> <script src="js/libs/h.js"></script> <script> mui.init({ preloadPages:[{ url: 'parcar-search.html', id : 'parcar

http://dev.dcloud.net.cn/mui/这个网站是MUI的官网,点开网站右侧是一个手机标识,上面有所有的MUI框架的前端控件. 学习的方法就是点开你所需要的控件,然后右键-->查看框架源码,即可看到你所需要的控件的源码 下面我把一些重要的代码标出来解释一下 1.折叠面板(包括表单/图片轮播/文字排版) (1)表单输入群组使用Form,提交的时候也可以以表单的方式提交 <form class="mui-input-group"> //格式统一多个表单中的空间 <div class="mui-input-row">//确保该div里面的汉字和空间在同一行 <label>输入:</label> <input type="text" placeholder="请输入姓名"> </div> 2. <div class="mui-input-row mui-plus-hidden"> <label>Input</label> <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">//定义语音输入类型和输入清除 </div> 3.图片轮播 <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --> <div class="mui-slider-item mui

mui(‘选择器’).on(‘事件名’, ‘目标选择器(子选择器)’, function(){})事件绑定坑 使用mui获取元素用on绑定事件的时候，如果目标选择器和mui选择器，即是两者都是当前元素，绑定失败。 mui的绑定仅支持事件委托，不支持当前元素绑定，当前元素绑定请直接使用addEventListener,removeEventListener 案例 <li id="areaArrowDwon"> <span class="location">地点</span> <span class="mui-icon mui-icon-arrowdown"></span> </li> //此处使用事件委托，才能生效 mui('#areaArrowDwon').on('tap', 'span', function() { console.log('被点击了'); }); mui(‘选择器’)获取dom 如果直接使用mui(‘选择器’)获取dom需要转换。 mui('#areaArrowDwon')[0].innerHTML mui(‘选择器’)获取dom必须先使用mui(‘选择器’)[0]转换为dom mui本地存储 设置本地存储命令：plus.storage.setItem(存储名,存储参数); 读取本地存储命令：plus.storage.getltem(存储名); 删除本地存储命令

最近用mui做app网页的开发，踩了一些小坑，在这总结一下： 1.单一网页 加入有一个网页需要在app上显示，这时候我们不需要全部的mui，在mui中找到需要的例子，复制其js、css引入即可。 2.底部+顶部选项卡时，点击顶部选项卡，被点的选项卡没有被选中 具体的场景是这样的：底部3个tab，其中有一个tab的页面顶部有3个tab，解决方法：在css中重写如下： . mui -control -content { background -color : white; min -height : 520 px; } . l { min -height : 768 px; } . mui -control -content . mui -loading { margin -top : 50 px; } . mui -segmented -control . mui -segmented -control -inverted . mui -control -item . mui -active { border -bottom : 2 px solid #007 aff; } . mui -segmented -control . mui -segmented -control -inverted ~ . mui -slider -progress -bar { background

最近在学习mui开发APP，可以说是混合APP的开发。其中涉及到HTML5+的规范，非常值得学习。本人在学习过程中用到了hcoder的h.js 也通过hcoder网站的教学视频学习到很多非常有用的基础的mui的功能，在此也非常感谢@深海老师以及群友能在群里及时为我提供思路和解决方案。 APP开发过程中，窗口页面之间传递参数是非常重要的环节，传递方式也是非常多的，我目前能够掌握到的和用到的也就是三四种方式,以下的案例引入了mui.js和hcoder的h.js： 第一种方式就是通过mui.openWindow里面的拓展参数： 1、要传递参数的页面A，注意，这里不仅能传递固定的参数，还能把获取的input的value值传递过去（包括输入的密码），其实只要是你想传递的参数，都可以做到。 优势：适合小型数据传递，不需要触发事件，简单快速。 <div class="mui-content"> <h3 id="op2">this is wenview 1 </h3> <div class="mui-input-group"> <div class="mui-input-row"> <input type="text" class="mui-input-clear" id="name" placeholder="请输入用户名"> </div> <div class="mui-input-row">

1。mui是干什么的： mui是用js来开发原生IOS或Android应用的一种技术，基于html5+（html5的增强，即在h5的基础上对访问手机原生API的扩展技术）实现的，具体方式是用脚本native.js来映射调用原生API（如地理位置，通讯录，拍照等） 2。mui的学习资源： （1） http://dev.dcloud.net.cn/mui/ （2） http://www.html5plus.org/doc/ 来源： CSDN 作者： ElvisSuS 链接： https://blog.csdn.net/sujinchang939024/article/details/78270643

mui是一个高性能的HTML5开发框架，从UI到效率，都在极力追求原生体验；这个框架自身有一些规则，刚接触的同学不很熟悉，特总结本文；想了解mui更详细的信息，请访问 mui官网 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

最近做的一个项目，是关于房产的一个app；由于只会前端的一点东西，也没有任何的开发经验，所以所做的一切都是百度找的，最后找到了MUI这个框架，说是最接近原生APP的一个框架，反正我啥也不会，就这么用吧； 总结一点问题 一， 关于固定定位的问题 其实在IOS下固定定位并不稳定，特别是在用户输入内容的时候，固定定位就会出问题，其实我是比较想用绝对定位来模拟固定定位的，但是因为很多东西不是很熟悉，加上MUI框架都是这么用固定定位的，所以这种小bug我也就没管了 二， 沉浸式导航的问题 在我们做沉浸式导航的时候，是需要在配置文件manifest.json里的plus的节点下的statusbar对象里设置”immersed”: true，这样确实是设置好了沉浸式，但是这样你会发现你的头部完全都跑到状态上去了，所以我们的做法就是会给头部加一个padding值，然后因为不同的手机的状态栏高度是不一样的，所以我们需要动态去计算出状态栏的高度，然后给相应的padding-top值；当然MUI框架的头部都设置了box-size:border-box;所以我们还需要设置高度，这个都只是CSS的问题而已，这样做也不是什么问题；一切都没什么问题，不过个人感觉这样做不太好，因为状态栏的颜色什么的不好设置；感觉不要给头部设置什么高度或者padding，其实直接在打开页面的时候就设置状态栏的颜色，这样会靠谱一些

　　前言 　　uni-app 　　uni-app是DCloud推出的终极跨平台解决方案，是一个使用Vue.js开发所有前端应用的框架，官网： https://uniapp.dcloud.io/ 　　mui 　　号称最接近原生APP体验的高性能前端框架，官网： https://dev.dcloud.net.cn/mui/ 　　个人觉得，mui除了页面设计很接近原生App之外，还有一个特点就是能方便的使用App扩展规范Html5 Plus（ http://www.html5plus.org/doc/h5p.html ），我们能在它的源码中看到比较多的地方都有使用到 　　开发工具 　　使用HBuilderX开发工具写uni-app的代码，以及打包App等工作，主要的业务功能依旧是使用我们熟悉的idea开发，不过页面从webPC端风格改成了移动端风格 　　整体我们采用uni-app + mui的方式，使用的是官方推荐的uni-app原生标题栏跟导航栏+嵌入webview远程服务的页面，也就是说除了头部、尾部，中间的内容都是类似iframe嵌入进去 　　 　　为方便以后查阅，特此记录 　　uni-app部分 　　我在App.vue中对uni对象进行全局赋值，这样在每个页面都调用到，这样做的目的是为了方便全局修改 　　设置进度条颜色、监听webview的url变化判断是否需要导航栏按钮等操作