MUI框架-02-注意事项-适用场景-实现页面间传值

秒速五厘米 2022-05-10 00:22 166阅读 0赞

## MUI框架-02-注意事项-适用场景-实现页面间传值 ##

*  关于开发，我拷贝太多也没什么意义，就请查阅：官方文档：[http://dev.dcloud.net.cn/mui/ui/][http_dev.dcloud.net.cn_mui_ui]

### 快速入门 - 注意事项 ###

*  有些可能看不懂，这样排是为了可以做 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-content {
            padding-bottom: 50px;
        }

*  你当然可以通过自定义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事件，若加载完毕，再自动显示新页面；
     *  **扩展阅读：**（当然也很重要，可以先了解）
        
         *  [hello mui中的无等待窗体切换是如何实现的][hello mui]
         *  [提示HTML5的性能体验系列之一 避免切页白屏][HTML5_]
 *  **页面关闭：勿重复监听 backbutton**
    
     *  mui框架自动封装了页面关闭逻辑，若希望自定义返回逻辑（例如编辑页面的返回，需用户确认放弃草稿后再执行返回逻辑），则需要重写mui.back方法，切勿简单通过addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序，mui默认封装的监听执行逻辑依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。
 *  **手势操作**
    
     *  点击：忘记click  
        快速响应是mobile App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延迟，及300毫秒的来龙去脉，请自行谷百），mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作，统统使用如下代码：

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

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

## 适用场景 ##

*  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均不受影响。
 *  若通过PC端chrome模拟手机浏览器访问hello mui，只能看到首页标题栏，看不到列表，因为列表是作为子webview页面加载到首页的，如无法显示

### 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;

2、页面已创建，通过自定义事件传值  
参考mui官网中[自定义事件][Link 1]的介绍

### 更多文章链接：[MUI 框架][MUI] ###

--------------------

\- 本笔记不允许任何个人和组织转载

[http_dev.dcloud.net.cn_mui_ui]: http://dev.dcloud.net.cn/mui/ui/
[hello mui]: http://ask.dcloud.net.cn/article/106
[HTML5_]: http://ask.dcloud.net.cn/article/25
[Link 1]: http://dev.dcloud.net.cn/mui/event/#customevent
[MUI]: https://blog.csdn.net/qq_40147863/article/category/8079041