Mui

技术总结 一、实名认证页面（RealNameAuthentication.html） 1.相机拍照蒙层，前端不易实现解决：用原生代码来解决的。进入拍摄界面，js所调用函数如下（该函数蕴含网络申请） function idCardPut(ruid, okCallback, failCallback, errorCallback) { var success = function(result) { var response = JSON.parse(result); if (response.meta.code === 0 && okCallback) { okCallback(response.meta, response.data) } else if (failCallback) { failCallback(response.meta, response.data) } } var failed = function(msg) { if (errorCallback) errorCallback(msg); } var callbackId = plus.bridge.callbackId(success, failed); plus.bridge.exec('ApiClient', 'idCardPut', [callbackId, '/user/auth/idcard/upload', '', ruid]);}二、人保购险页面（PersonalInsurancePay.html） 1.通过领取链接所关上的页面，若未领取，无奈返回到人保购险页面解决：关上带原生导航栏的页面（点击导航栏的按钮可返回） payWebview = mui.openWindow({ id: 'pay_page', url: 'LoadingPage.html', styles: { titleNView: { style: 'transparent', backgroundColor: '#FFFFFF', titleText: '保单领取', titleColor: '#000000', autoBackButton: true, } } });2.领取接口回调的响应工夫太长（大略一分钟），采纳此办法用户体验很差解决：采纳轮询的形式，设置一个定时器，领取链接页面加载实现后调用该定时器，每隔2s查问一次保单的领取状态（注：页面敞开时进行完最初一次领取状态的查问再敞开定时器） ...

下拉刷新组件的dom构造 <div id="refreshContainer" class="mui-scroll-wrapper"> <div id="refreshBox"> <div class="active" id="tab1"></div> <div id="tab2"></div> <div id="tab3"></div> </div> </div>css 被mui坑的- -。。。 /*因为下拉图标地位设置有效 则应用下拉刷新组件款式*/.mui-pull-top-pocket{ top: 5rem !important;}/*把列表展现在你想要的地位 */#refreshContainer{ height:100vh; padding-top: 2.2rem; padding-bottom: 3rem;}js逻辑 //多tab页切换时function onTabChange(){ $('#refreshBox').css('transform','translate3d(0px, 0px, 0px) translateZ(0px)')//切换时默认滚动到顶部，否则会呈现多个tab同时滚动导致其余列表呈现问题 mui('#refreshContainer').pullRefresh().refresh(true);//重置上拉加载组件}//多个tab共用一个下拉刷新组件 mui.init({ pullRefresh: { container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比方：id、.class等 down: { callback: function () { //列表刷新实现后，须要及时敞开对应的动画，否则会呈现有效的问题 mui("#refreshContainer").pullRefresh().endPulldownToRefresh();//完结动画 }, }, up: { callback: function () { ... mui("#refreshContainer").pullRefresh().endPullupToRefresh(false);//上拉加载时false示意还有数据 }, }, }, });

前言近年来国内出现了一些可以让前端人员编写移动端App的IDE，Hbuilder X是DCloud推出的一款免费开发工具，最大的亮点是可以开发App，利用html5+技术，结合mui+nativejs可以在云端打包，主要用到的技术就是HTML5、JS、CSS，一套代码，即可生成Android和IOS对应的两种App。最早的App开发只有原生这个概念，Html页面只是用来做一些简单的静态资源展示，但是随着H5的兴盛，大家发现很多功能、逻辑都可用web来实现，然后原生作为容器显示，而且H5展示的页面更炫酷、功能更丰富，在IOS、Andriod中都有很好的支持，这样开发效率更高、成本更低，同时用户体验也不错。 项目已上传github，欢迎大家下载交流。 前端项目地址：https://github.com/Hanxueqing... 在线项目手册：https://hanxueqing.github.io/... 项目技术栈UI框架：MUI（官方推荐的模拟原生App的UI框架） JS框架：VUE API：H5+、Native.js（原生40万API随意调用） 编辑器：HBuilder，在5+ App项目下编写的HTML、js等文件，会被打包到原生的安装包（Android是apk包、iOS是ipa包）。 项目运行# 克隆到本地git clone git@github.com:Hanxueqing/Maoer-App-HBuilder.git# 放到HBuilder环境下运行# 使用数据线连接手机# IOS系统在AppStore下载HBuilder插件# 在HBuilder中输入ctrl+r开启真机演示项目开发环境搭建下载安装HBuilder X在官网地址选择合适的版本下载安装： http://www.dcloud.io/hbuilder... 新建项目打开HBuilder，在菜单栏中选择文件——新建——项目，选择5+App，创建一个mui项目，填写文件名称、保存位置，点击创建，会给你生成一个包含mui的js、css、字体资源的项目模版。 文件结构新建完成后，会在左侧的项目管理器中出现如下目录结构，跟我们平时做前端开发的项目类似。mainifest.json文件中存储的是app相关的配置。 真机调试使用数据线连接手机和电脑，在Android设备会自动安装并启动HBuilder调试基座，IOS系统的同学请下载一个名字叫HBuilder的调试插件，点击窗口上方的播放键小图标或者使用快捷键command+r在手机上运行。 真机运行有3个特点： 真实。虽然PC端HBuilder右侧的内置浏览器也可以看大致的页面，但真实的布局效果以及手机上的特殊能力调用，还是必须在真机测试。边改边看。在HBuilder更改页面并保存后，可立即同步在真机上看到保存后的显示效果。比开发原生应用还方便。检查错误和log。手机运行HTML等文件时如果发生错误以及打印的console.log，都可以在真机运行时从手机端反馈回到HBuilder的控制台，在控制台直接查看。注意只有移动App项目才可以真机联调。如果你真机失败，注意看控制台的提示，或点HBuilder菜单-运行里的故障排查指南。注意：真机联调App时，提供的是一个测试环境，并不真实发生打包，调试基座App的名字、图标、启动封面图片、是否可旋转这些只有打包才能更改的属性不会因为开发者修改manifest文件而变化。只有修改manifest且点击菜单发行-打包后，上述4个设置才能更改。 运行后，HBuilder中修改页面代码，保存后会自动同步到手机中，如果手机当前展示着被修改的页面，则会刷新页面。尝试在js中在plus ready之后编写console.log，或者改写错误的js，可以直接在HBuilder的控制台看到结果。如果真机运行遇到各种故障，请点击运行菜单里的真机运行常见故障指南。 底部Tab选项卡页面初始化mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。 //mui初始化 mui.init();编写三个tab选项：首页、好玩、设置，在href中填写展示页面的id。 <nav class="mui-bar mui-bar-tab"> <!-- href写id --> <a id="defaultTab" class="mui-tab-item mui-active" href="home.html"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> </a> <a class="mui-tab-item" href="play.html"> <span class="mui-icon mui-icon-paperplane"></span> <span class="mui-tab-label">好玩</span> </a> <a class="mui-tab-item" href="mine.html"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </nav>配置子页面先通过var self = plus.webview.currentWebview();创建一个主窗口self，然后内部通过循环拿到三个子窗口，通过H5+方法 Webview——create创建新的Webview窗口，判断i是否大于0来判断当前窗口是否是第2、3窗口，如果是则隐藏，如果不是则说明为第一个子窗口，就追加到self主窗口中，并且通过subpage_style样式规定它在主窗口的展示位置。 H5 + create方法 ...

picker 添加年插件问题总结 取消按钮点击事件无法获取可以获取到取消按钮标签和确定按钮标签 但是只能获取去顶按钮事件,取消点击事件无法获取 通过判断picker的display状态也不能确认此事件 lable标签无法绑定事件这时需要添加一个单独全选按钮时 可以在herder内添加一个按钮 调用同一picker会保存一部分数据不清除可以在picker.dispose()结束时判断第一个picker是否已经调用， 如果第一个picker调用了 判断函数内重新生成新的picker ， 存储新的数据 ，这时就可以 最后清除这个picker 4.setData后 在show()调用前重新赋值添加新的元素只能添加值 没有对应的html片段 可以在setData前把data存储到一个变量内 进行修改后再传入setData5.单页时由于下拉刷新只能在页面内使用一次 再次使用会造成冲突 两者均不可用 只在首页面使用 或者像mui库示例一样 跳转到新页面 双webview6.picker蒙层点击禁止事件无法绑定 可以获取到此蒙层点击事件，但是无法阻止默认事件可通过点击后删除此蒙层，再次调出此picker display = block生成一个自定义蒙层 判断点击事件是否在蒙层上 添加私有class生成前先判断是否有此class蒙层 有则先移除removeChild减少在页面新生的元素 每当点击到蒙层就先删除原私有蒙层再创建新私有蒙层 以此模拟禁止蒙层点击事件7.模拟禁止蒙层会同时影响其他蒙层效果 如折叠框蒙层 重新给折叠框蒙层添加事件 先判断其display 值 none 或者 null;首次点击可能已经被模拟禁止清除 此时为空值剩下的根据display状态修改即可8.360浏览器兼容模式模拟IE浏览时JQ的AJAX请求GET类型不能正常执行，使用POST请求。 9.IE EDGE下Iframe标签渲染问题可以使用META调整至IE低版本渲染模式。 10.mui返回按钮不支持通过window.open打开的页面 可以使用window.location.href打开新页面，能够直接使用。 11.onbeforeunload事件，除IE完全支持至修改返回内容外 ，其余浏览器均不支持。查到相关内容大致原因如下： 此机制避免某些开发者通过监听此事件，阻止用户离开页面，做些不一道德的事情。仅对想要在用户关闭页面时还执行各种操作阻止用户关闭操作的PM表示，咳咳咳。。。 mui返回按钮返回mui可滑动单页面套用时需要严格按照demo模板静态HTML层进行修改 不需要的内容可以通过z-index覆盖隐藏。mui遮罩在手机端容易出现不能正常显示的问题，使用原生js和html生成遮罩效果。JS拼接HTML片段时 闭合标签需要不换行拼接，或者换行使用转义符进行拼接。对页面功能进行调整后，功能函数耦合度要同时尽可能降低耦合度，减少页面功能修改时其他受影响函数的修改。

最近项目中需要使用MUI做一个视频播放的小功能。我就花时间研究了一下MUI。MUI是一个使用JavaScript开发Android和IOS应用的前端框架。这篇文章将以知识树的形式对MUI的使用做一个总结，一些官方文档中的东西我都只大致提一下，如果需要详细了解可以进入官方文档了解详情。UI组件组件部分不多说，详情可以看官方文档。小技巧：Dialog 组件正常情况下是无法解析HTML内容的，如果需要对Dialog 组件的内容进行定制可以将Dialog 的最后一个参数type设置为’div’。MUI选择器MUI的选择器类似Jquery，主要有#id选择器、.class选择器 标签选择器，组合选择器。mui(’#id’)mui(’.class’)mui(‘input’)mui(‘p.class’)和Jquery一样，如果想从mui选择器选中的元素中取出原生的DOM元素，只需取出mui(’#id’)[0]即可。MUI的常用方法MUI并没有像Jquery一样丰富的方法，常用的方法并不多。事件相关的方法MUI对象方法on(event, selector, handler) 批量绑定事件one(event, selector, handler) 批量绑定事件但是只生效一次off([event][, selector]) 删除事件MUI静态方法trigger(element, event, data) 触发事件fire(target, event, data) 触发自定义事件原生事件监听方法addEventListener(event, handler) 单个DOM节点绑定事件手势事件页面相关方法init(options)页面初始化设置。目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。openWindow(options)打开新页面back()关闭当前页面其他工具方法此部分官方文档都写得非常详细，如果哪个方法不懂可以直接点击连接跳转至官方文档详细查看。MUI对象方法each(handler)遍历MUI静态方法each(obj, handler)遍历[extend([deep, ]target, obj1[,objN])](http://dev.dcloud.net.cn/mui/…合并多个对象later(func,delay)setTimeOut封装scrollTo(ypos[,duration)](http://dev.dcloud.net.cn/mui/…滚动窗口屏幕到指定位置，该方法是对window.scrollTo()方法在手机端的增强实现，可设定滚动动画时间及滚动结束后的回调函数;鉴于手机屏幕大小，该方法仅可实现屏幕纵向滚动。os我们经常会有通过navigator.userAgent判断当前运行环境的需求,mui对此进行了封装,通过调用mui.os.XXX即可plus(可以访问的参数为:).plus：返回是否在 5+ App(包括流应用)运行.stream：返回是否为流应用Android(可以访问的参数为:).android：返回是否为安卓手机.version：安卓版本号.isBadAndroid：android非Chrome环境iOS(可以访问的参数为:).ios：返回是否为苹果设备.version：返回手机版本号.iphone：返回是否为苹果手机.ipad：返回是否为ipadWechat(可以访问的参数为:).wechat：返回是否在微信中运行AJAX方法类似JQuery主要由ajax(options)、post(url,params,callback)、get(url,params,callback),详情可参考官方文档。MUI插件方法示例1：跳转到图片轮播的第二张图片mui(’.mui-slider’).slider().gotoItem(1);示例2：重新开启上拉加载mui(’#pullup-container’).pullRefresh().refresh(true);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，就可以解决如上两个问题。除上述列出的功能点，其它mui功能，均可以在其它手机浏览器及PC服务端使用，所有CSS均不受影响。

因项目的需要，采用了MUI的滚动事件（scroll），遇到了不少的问题，做个记录，方便以后查询。问题一：引入MUI顶部滑动样式后，顶部滑动条全屏显示<div id=“slider” class=“mui-slider mui-fullscreen”> <div id=“sliderSegmentedControl” class=“mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted”> <div class=“mui-scroll”> <a class=“mui-control-item mui-active” href="#item1mobile" data-wid=“tab-top-subpage-1.html”> 全部 </a> <a class=“mui-control-item” href="#item2mobile" data-wid=“tab-top-subpage-2.html”> 家居生活 </a> <a class=“mui-control-item” href="#item3mobile" data-wid=“tab-top-subpage-3.html”> 北京 </a> <a class=“mui-control-item” href="#item4mobile" data-wid=“tab-top-subpage-4.html”> 社会 </a> <a class=“mui-control-item” href="#item5mobile" data-wid=“tab-top-subpage-5.html”> 娱乐 </a> </div> </div></div>解决方案：查看官方文档，文档说明：区域滚动组件默认为absolute定位，全屏显示。所以你需要手动删掉全屏这个类，即 mui-fullscreen问题二：没有滚动效果解决方案：根据官方文档：若使用区域滚动组件，需手动初始化scroll控件，因此，在需要用到该滚动效果的组件中，引入mui.js文件，并初始化import mui from ‘../../lib/mui/js/mui.js’; // 建了lib文件夹，存放mui相关文件mui(’.mui-scroll-wrapper’).scroll({deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006});问题三：初始化之后报错控制台错误消息为：caller’, ‘callee’, and ‘arguments’ properties may not be accessed on strict mode functions or the arguments objects for calls to them。原因：webpack启用了严格模式，而MUI没有，所以两者冲突了。 解决方案：在.babelrc文件中加上：“ignore”: ["./src/lib/mui/js/.js" // 建了lib文件夹，存放mui相关文件]另一种解决方法：该方法试过，出现另一种报错：export ‘default’ (imported as ‘mui’) was not found in ‘../../lib/mui/js/mui.js’。不知道是不是因人而异呢==，有朋友成功了而我的不行23331. 安装babel-plugin-transform-remove-strict-modecnpm i babel-plugin-transform-remove-strict-mode -D2. 在.babelrc文件的plugins节点中配置：“transform-remove-strict-mode"问题四：终于可以滑动了，点击滑动报错：控制台错误消息为：Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080解决方法： {touch-action: pan-y;}2016年Google I/O上提出的概念，目的是用来提升页面滑动的流畅度。问题五：顶部可以滑动之后，底部Tab不能切换控制台错误消息为：Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080原因： Tab样式（也是MUI的）与MUI的JS文件冲突，具体什么冲突不清楚，有兴趣可以看源码，我还晕乎乎的 解决方法： 找到Tab栏mui-tab-item的所有样式，复制一份，重新赋予新的样式类名，如mui-tab-item-my问题六：刚进入页面无法滑动，要刷新之后方可滑动原因：滑动时机不对，如前面代码显示的那样，在导入mui后就初始化滑动控件，此时，当重新进入页面时，组件的DOM结构还未渲染好，就初始化，自然不会有效果。 解决方法：放到mounted钩子函数中，在这个生命周期函数中，DOM结构已被渲染好，可以初始化滑动控件mounted(){ // 初始化滑动控件 mui(’.mui-scroll-wrapper’).scroll({ deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006 });} ...