• 接下来给大家来详细讲解一下:在上一节中我们已经介绍怎么去做一个开机引导图了[webAPP项目]基于MUI框架webAPP开发功能流程之引导图制作详解01如果不会的,就按照上一篇文章讲解的自己在作一遍.效果图最终我们要实现的...

    前言

    一个完整的APP少不了,要有头部导航跟底部导航,那么我们在用MUI框架来开发APP时,在制作头部导航很底部选项卡时我们应该要注意哪些呢?

    接下来给大家来详细讲解一下:

    在上一节中我们已经介绍怎么去做一个开机引导图了[webAPP项目]基于MUI框架webAPP开发功能流程之引导图制作详解01如果不会的,就按照上一篇文章讲解的自己在作一遍.

    效果图

    最终我们要实现的效果如下:
    这里写图片描述

    具体实现

    1.首先创建4个底部选项卡页面

    home1.html;
    home2.html
    home3.html
    home4.html

    2.index.html代码实现

    创建完之后,我们返回程序加载的入口index.html去写相关的代码:
    首先床架四个底部选项卡:

    <nav class="mui-bar mui-bar-tab">
          <a id="defaultTab" class="mui-tab-item mui-active" href="templete/home1.html">
                    <span class="mui-icon mui-icon-home"></span>
                    <span class="mui-tab-label">首页01</span>
           </a>
          <a class="mui-tab-item" href="templete/home2.html">
                    <span class="mui-icon mui-icon-home"></span>
                    <span class="mui-tab-label">首页02</span>
           </a>
          <a class="mui-tab-item" href="templete/home3.html">
                    <span class="mui-icon mui-icon-home"></span>
                    <span class="mui-tab-label">首页03</span>
           </a>
          <a  class="mui-tab-item" href="templete/home4.html">
                    <span class="mui-icon mui-icon-home"></span>
                    <span class="mui-tab-label">首页04</span>
           </a>       
    
    
        </nav>

    开始写JS代码:

    function jumpPage(){
            //跳转页面
            var subpages = ['templete/home1.html','templete/home2.html', 'templete/home3.html', 'templete/home4.html'];
            var subpage_style = {
                top: '0px',
                bottom: '51px'
            };
    
            var aniShow = {};//动画显示
    
    
    
            //首次启动切滑效果
            mui.plusReady(function(){
                launchScreen();
    
                var self = plus.webview.currentWebview();
                    for (var i = 0; i < 4; i++) {
                        var temp = {}; 
                        //http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create
                        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];
                var title = document.getElementById("title");
                 //选项卡点击事件
                mui('.mui-bar-tab').on('tap', 'a', function(e) {
                    var targetTab = this.getAttribute('href');
                    if (targetTab == activeTab) {
                        return;
                    }
                    //更换标题
    //              title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
                    //显示目标选项卡
                    //若为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');
                    }
    
        });
    
            }
    

    这样就实现了,点击各个页面,可以自由切换了

    3.实现下面的选项卡与头部的导航的标题对应

    现在去刚才创建的html中去分别加入这几行代码:

    home1.html

    <header class="mui-bar mui-bar-nav">
                <h1 class="mui-title">home1</h1> 
            </header>

    home2.html

    <header class="mui-bar mui-bar-nav">
                <h1 class="mui-title">home1</h1> 
            </header>

    home3.html

    <header class="mui-bar mui-bar-nav">
                <h1 class="mui-title">home1</h1> 
            </header>

    home4.html

    <header class="mui-bar mui-bar-nav">
                <h1 class="mui-title">home1</h1> 
            </header>

    这个一个底部选项卡跟头部导航就做完啦,在做的的过程中大家要明白几个函数的意思,下面就我们使用的几个函数给大家解释一下:

    函数解释

    mui.extend()

    这里写图片描述

    示例

    var target = {
      company:"dcloud",
      product:{
        mui:"小巧、高效"
      }
    } 
    var obj1 = {
      city:"beijing",
      product:{
        HBuilder:"飞一样的编码"
      }
    }
    mui.extend(target,obj1);
    //输出:{"company":"dcloud","product":{"HBuilder":"飞一样的编码"},"city":"beijing"}
    console.log(JSON.stringify(target));

    从如上输出可以看到,product节点下的mui被替换成了HBuilder,因为默认仅合并对象根节点下的key、value;如果想深度合并,则可以传入deep参数,如下:

    
    var target = {
      company:"dcloud",
      product:{
        mui:"小巧、高效"
      }
    } 
    var obj1 = {
      city:"beijing",
      product:{
        HBuilder:"飞一样的编码"
      }
    }
    //支持深度合并
    mui.extend(true,target,obj1);
    //输出:{"company":"dcloud","product":{"mui":"小巧、高效","HBuilder":"飞一样的编码"},"city":"beijing"}
    console.log(JSON.stringify(target));

    plus.webview.create创建新的

    WebviewObject plus.webview.create( url, id, styles, extras );
    

    说明:

    创建Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后需要调用show方法才能将Webview窗口显示出来。
    

    参数:

    url: ( String ) 可选 新窗口加载的HTML页面地址
    新打开Webview窗口要加载的HTML页面地址,可支持本地地址和网络地址。
    id: ( String ) 可选 新窗口的标识
    窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口,为了保持窗口标识的唯一性,应该避免使用相同的标识来创建多个Webview窗口。 如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。
    styles: ( WebviewStyles ) 可选 创建Webview窗口的样式(如窗口宽、高、位置等信息)
    extras: ( JSON ) 可选 创建Webview窗口的额外扩展参数
    值为JSON类型,设置扩展参数后可以直接通过Webview的点(“.”)操作符获取扩展参数属性值,如: var w=plus.webview.create(‘url.html’,’id’,{},{preload:”preload webview”}); // 可直接通过以下方法获取preload值 console.log(w.preload); // 输出值为“preload webview”

    返回值

          WebviewObject : Webview窗口对象
    

    示例:

    
    <!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8">
        <title>Webview Example</title>
        <script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
        plusReady();
    }else{
        document.addEventListener("plusready",plusReady,false);
    }
    
    // 创建并显示新窗口
    function create(){
        var w = plus.webview.create( "http://weibo.com/dhnetwork" );
        w.show(); // 显示窗口
    }
        </script>
        </head>
        <body>
            创建新的Webview窗口<br/>
            <button onclick="create()">Create</button>
        </body>
    </html>

    currentWebview

    获取当前窗口的WebviewObject对象
    

    WebviewObject plus.webview.currentWebview();

    说明:

    获取当前页面所属的Webview窗口对象。
    

    参数

    返回值:

    WebviewObject : Webview窗口对象
    

    结束

    差不多就这几个函数比较难懂,这样一个简单的底部选项卡与头部导航就做完了,接下来会给大家讲解,数据解析的几种方式,包括数据展示应该注意什么,请关注下一节:

    [webAPP项目]基于MUI框架webAPP开发功能流程之轮播图制作详解03

    我的公众号:
    注公众号:
    这里写图片描述

    展开全文
  • 前言由于自己平时做项目(自己做或者帮朋友做的移动APP,webAPP,机器学习算法类)比较多,做的东西大多没有整理成文档,现在就把之前做的项目整理成文档分享给大家,好大家以后做相关项目有个参考! 在做HTML5开发时一直在...

    前言

    由于自己平时做项目(自己做或者帮朋友做的移动APP,webAPP,机器学习算法类)比较多,做的东西大多没有整理成文档,现在就把之前做的项目整理成文档分享给大家,好大家以后做相关项目有个参考!

    在做HTML5开发时一直在使用Hbuilder进行代码的编辑,发现Hbuilder写代码的速度非常的快,同时它也有自己的一套开发web APP 的框架MUI,今天有时间给大家介绍一下,怎么完整的去开发一套商城类APP整个流程.这里着重给大家介绍功能点的集成和开发,如果这个掌握了,其他框架开发的APP功能的集成都是一模一样的了!

    之后也会给大家介绍利用ionic框架,React Native框架,vue框架开发一款APP.

    目录

    1.[webAPP项目]基于MUI框架webAPP开发功能流程之引导图制作详解01

    2.[webAPP项目]基于MUI框架webAPP开发功能流程之头部导航与底部导航制作详解02

    3.[webAPP项目]基于MUI框架webAPP开发功能流程之轮播图制作详解03

    4.[webAPP项目]基于MUI框架webAPP开发功能流程之接口解析及数组展示详解04

    5.[webAPP项目]基于MUI框架webAPP开发功能流程之页面传值详解05

    6.[webAPP项目]基于MUI框架webAPP开发功能流程之购物车制作详解06

    7.[webAPP项目]基于MUI框架webAPP开发功能流程之第三方登录集成详解07

    8.[webAPP项目]基于MUI框架webAPP开发功能流程之第三方分享集成详解08

    9.[webAPP项目]基于MUI框架webAPP开发功能流程之支付宝支付集成详解09

    10.[webAPP项目]基于MUI框架webAPP开发功能流程之微信支付集成详解10

    11.[webAPP项目]基于MUI框架webAPP开发功能流程之即时通讯集成详解11

    12.[webAPP项目]基于MUI框架webAPP开发功能流程之第三方地图集成详解12

    目前列了大纲,还没更新,之后会持续更新,发布!

    展开全文
  • Mui开发webapp项目demo

    2020-07-14 23:31:06
    Mui开发webapp项目demo,找很久很多demo 发现这个demo做的最好一个,现在分享个大家,希望能给大家对学习Mui有所帮助
  • 为什么用mui开发webAPP只用HTML5做app带来的问题HTML5plus RuntimeNative.js 只用HTML5做app带来的问题 HTML5过去被称为有“性工能”障碍,即性能不如原生,工具不如原生、功能不如原生。 HTML5plus Runtime ...

    只用HTML5做app带来的问题

    HTML5过去被称为有“性工能”障碍,即性能不如原生,工具不如原生、功能不如原生。
    在这里插入图片描述

    HTML5plus Runtime

    HTML5plus Runtime,简称5+ Runtime,是运行于手机端的强化web引擎,除了支持标准HTML5外,还支持更多扩展的js api,使得js的能力不输于原生。5+ Runtime内置于HBuilder,在真机运行、打包时自动挂载

    在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,否则可能会报“plus is not defined”的错误; mui为简化开发,将plusReady事件封装成了mui.plusReady()方法,凡涉及到HTML5+的api,建议都写在mui.plusReady方法中
    在这里插入图片描述

    Native.js

    原生API在iOS和Android上各自有40多万,有些API并不常用,而且不具有跨平台特性,比如ios的game center api。太多的API封装到HTML5plus里,会过多增加runtime的体积,但若有需求要使用这些api又很麻烦。

    一种把40w原生API映射为JS API的技术

    Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术

    展开全文
  • MUI之APP开发

    前言

    我们在构建一个APP时,少不了APP运行前的开机引导图,现在来详细介绍一下MUI框架关于这一操作的详细步骤!


    原理

    如果用户第一次下载使用该软件,就显示引导图;如果非第一次使用,则跳过这一步.

    效果

    640?wx_fmt=gif
    在正式介绍之前首先要明白几个概念

    概念1 页面初始化

    1.mui.plusReady()方法

    语法:mui.plusReady(function); 
    参数:是函数

    在app开发中,若要使用[HTML5+扩展api](http://www.html5plus.org/doc/h5p.html),必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中.

    例如,获取当前网页的URL:

    mui.plusReady(function(){
         console.log("当前页面URL:"+plus.webview.currentWebview().getURL());});

    2.mui.init()

    ui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可 
    所以每次在每一个页面都调用一下mui.init()这个方法.

    3.mui.ready()

    当DOM准备就绪时,指定一个函数来执行

    4.HTML5+与MUI 的区别

    HTML5+项目 是用的原生的HTML5+的API做的。
    
    mui项目是封装了原生的HTML5+的API的一个框架,方便开发者迅速开发应用。含mui.css(提供了很多页面样式)和mui.js(封装了原生HTML5+API)。
    
    举个例子。你在做web前端开发的时候,用原生的js就相当于这里的原生HTML5+,用jquery就相当于这里的mui。

    5. mui.plusReady()与mui.ready()那个先执行

    一般情况是ready先,plusReady后; 
    ready代表DomcontentLoaded,plusReady代表plus基座ok

    好明白了这些概念之后,我们就开始我们的代码:

    页面A

    //引导图函数
     function launchScreen() {
            //读取本地存储,检查是否为首次启动
            var showGuide = plus.storage.getItem("lauchFlag");        if(showGuide){ 
                //有值,说明已经显示过了,无需显示;
                //关闭splash页面;
                plus.navigator.closeSplashscreen();
                plus.navigator.setFullscreen(false);
            }else{            //显示启动导航
                mui.openWindow({
                    id:'guid',//子页面的ID
                    url:'templete/guid.html',//子页面
                    show:{
                        aniShow:'none'
                    },
                    waiting:{
                        autoShow:false
                    }
                });
            }
        }

    子B页面:

                mui.plusReady(function() {
                    plus.navigator.setFullscreen(true);
                    plus.navigator.closeSplashscreen();
                });            //立即体验按钮点击事件
                document.getElementById("close").addEventListener('tap', function(event) {
                    plus.storage.setItem("lauchFlag", "true"); 
                    plus.navigator.setFullscreen(false);
                    plus.webview.currentWebview().close();
                }, false);

    在A页面进行调用

     mui.plusReady(function(){
            launchScreen();
            mui.init();
        });

    这面还要明白几个概念

    打开新页面

    这里有我就引用官方文档给大家解释一下:

      做web app,一个无法避开的问题就是转场动画;web是基于链接构建的,从一个页面点击链接跳转到另一个页面,如果通过有刷新的打开方式,用户要面对一个空白的页面等待;如果通过无刷新的方式,用Javascript移入DOM节点(常见的SPA解决方案),会碰到很高的性能挑战:DOM节点繁多,页面太大,转场动画不流畅甚至导致浏览器崩溃; mui的解决思路是:单webview只承载单个页面的dom,减少dom层级及页面大小;页面切换使用原生动画,将最耗性能的部分交给原生实现.

    原理:

    mui.openWindow({
        url:new-page-url,
        id:new-page-id,
        styles:{
          top:newpage-top-position,//新页面顶部位置
          bottom:newage-bottom-position,//新页面底部位置
          width:newpage-width,//新页面宽度,默认为100%
          height:newpage-height,//新页面高度,默认为100%
          ......
        },
        extras:{      .....//自定义扩展参数,可以用来处理页面间传值
        },
        createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
        show:{
          autoShow:true,//页面loaded事件发生后自动显示,默认为true
          aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
          duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
        },
        waiting:{
          autoShow:true,//自动显示等待框,默认为true
          title:'正在加载...',//等待对话框上显示的提示内容
          options:{
            width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
            height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
            ......
          }
        }
    })

    参数解释:

    1.styles

    窗口参数,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况;left、right同理。

    2.extras

    新窗口的额外扩展参数,可用来处理页面间传值;例如:
    var webview = mui.openWindow({
        url:'info.html',
        extras:{
            name:'mui'  //扩展参数
        }
    });
    console.log(webview.name);//输出mui字符串
    注意:扩展参数仅在打开新窗口时有效,若目标窗口为预加载页面,则通过mui.openWindow方法打开时传递的extras参数无效。

    3.createNew

    是否重复创建相同id的webview;

    为优化性能、避免app中重复创建webview,mui v1.7.0开始增加createNew参数,默认为false;判断逻辑如下:

    createNew参数为为true,则不判断重复,每次都新建webview;

    createNew参数为为fasle,则先查找当前App中是否已存在同样id的

    webview,若存在则直接显示;否则新创建并根据show参数执行显示逻辑; 
    注意:plusReady事件仅在webview首次创建时触发,使用mui.openWindow方法多次打开已存在的同样id的webview时,是不会重复触发plusReady事件的; 因此若业务写在plusReady事件中,可能会出现执行结果和预期不一致的情况;此时可通过自定义事件触发; 案例参考:mui.plusReady有时会失效;

    4.show

    窗口显示控制参数,具体参数如下:

    autoShow:目标窗口loaded事件发生后,是否自动显示,默认为true;若为false,则仅创建但不显示webview;若目标页面为预加载页面,则该参数无效;

    aniShow表示页面显示动画,比如从右侧划入、从下侧划入等,具体可参考5+规范中的AnimationTypeShow

    duration:显示Webview窗口动画的持续时间,单位为ms 
    waiting

    5.系统等待框参数

    mui框架在打开新页面时等待框的处理逻辑为:

    显示等待框–>创建目标页面webview–>目标页面loaded事件发生–>关闭等待框;

    因此,只有当新页面为新创建页面(webview)时,会显示等待框,否则若为预加载好的页面,则直接显示目标页面,不会显示等待框。waiting中的具体参数:

    autoShow:是否自动显示等待框,默认为true;若为false,则不显示等待框;注意:若waiting框的autoShow为true,但目标页面不自动显示,则需在目标页面中通过如下代码关闭等待框:plus.nativeUI.closeWaiting();

    title:等待框上的提示文字

    options表示等待框显示参数,比如宽高、背景色、提示文字颜色等.

    涉及到的知识点差不多就讲完了,请看下面介绍

    [webAPP项目]基于MUI框架webAPP开发功能流程之头部导航与底部导航制作详解02]

    明天给大家更新!





    展开全文
  • 前言 我们在构建一个APP时,少不了APP运行前的开机引导图,现在来详细介绍一下MUI框架关于这一操作的详细步骤! 原理 如果用户第一次下载使用该软件,就显示引导图;... 参数:是函数在app开发中,若要使用

    前言

    我们在构建一个APP时,少不了APP运行前的开机引导图,现在来详细介绍一下MUI框架关于这一操作的详细步骤!

    原理

    如果用户第一次下载使用该软件,就显示引导图;如果非第一次使用,则跳过这一步.

    效果

    这里写图片描述
    在正式介绍之前首先要明白几个概念

    概念1 页面初始化

    1.mui.plusReady()方法

    语法:mui.plusReady(function);
    参数:是函数

    在app开发中,若要使用[HTML5+扩展api](http://www.html5plus.org/doc/h5p.html),必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中.
    

    例如,获取当前网页的URL:

    mui.plusReady(function(){
         console.log("当前页面URL:"+plus.webview.currentWebview().getURL());
    });

    2.mui.init()

    ui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可
    所以每次在每一个页面都调用一下mui.init()这个方法.

    3.mui.ready()

    当DOM准备就绪时,指定一个函数来执行
    

    4.HTML5+与MUI 的区别

    HTML5+项目 是用的原生的HTML5+的API做的。
    
    mui项目是封装了原生的HTML5+的API的一个框架,方便开发者迅速开发应用。含mui.css(提供了很多页面样式)和mui.js(封装了原生HTML5+API)。
    
    举个例子。你在做web前端开发的时候,用原生的js就相当于这里的原生HTML5+,用jquery就相当于这里的mui。
    

    5. mui.plusReady()与mui.ready()那个先执行

    一般情况是ready先,plusReady后;
    ready代表DomcontentLoaded,plusReady代表plus基座ok

    好明白了这些概念之后,我们就开始我们的代码:

    页面A

    //引导图函数
     function launchScreen() {
            //读取本地存储,检查是否为首次启动
            var showGuide = plus.storage.getItem("lauchFlag");
            if(showGuide){ 
                //有值,说明已经显示过了,无需显示;
                //关闭splash页面;
                plus.navigator.closeSplashscreen();
                plus.navigator.setFullscreen(false);
            }else{
                //显示启动导航
                mui.openWindow({
                    id:'guid',//子页面的ID
                    url:'templete/guid.html',//子页面
                    show:{
                        aniShow:'none'
                    },
                    waiting:{
                        autoShow:false
                    }
                });
            }
        }

    子B页面:

                mui.plusReady(function() {
                    plus.navigator.setFullscreen(true);
                    plus.navigator.closeSplashscreen();
                });
                //立即体验按钮点击事件
                document.getElementById("close").addEventListener('tap', function(event) {
                    plus.storage.setItem("lauchFlag", "true"); 
                    plus.navigator.setFullscreen(false);
                    plus.webview.currentWebview().close();
                }, false);

    在A页面进行调用

     mui.plusReady(function(){
            launchScreen();
            mui.init();
        });

    这面还要明白几个概念

    打开新页面

    这里有我就引用官方文档给大家解释一下:

      做web app,一个无法避开的问题就是转场动画;web是基于链接构建的,从一个页面点击链接跳转到另一个页面,如果通过有刷新的打开方式,用户要面对一个空白的页面等待;如果通过无刷新的方式,用Javascript移入DOM节点(常见的SPA解决方案),会碰到很高的性能挑战:DOM节点繁多,页面太大,转场动画不流畅甚至导致浏览器崩溃; mui的解决思路是:单webview只承载单个页面的dom,减少dom层级及页面大小;页面切换使用原生动画,将最耗性能的部分交给原生实现.
    

    原理:

    mui.openWindow({
        url:new-page-url,
        id:new-page-id,
        styles:{
          top:newpage-top-position,//新页面顶部位置
          bottom:newage-bottom-position,//新页面底部位置
          width:newpage-width,//新页面宽度,默认为100%
          height:newpage-height,//新页面高度,默认为100%
          ......
        },
        extras:{
          .....//自定义扩展参数,可以用来处理页面间传值
        },
        createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示
        show:{
          autoShow:true,//页面loaded事件发生后自动显示,默认为true
          aniShow:animationType,//页面显示动画,默认为”slide-in-right“;
          duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
        },
        waiting:{
          autoShow:true,//自动显示等待框,默认为true
          title:'正在加载...',//等待对话框上显示的提示内容
          options:{
            width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度
            height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度
            ......
          }
        }
    })

    参数解释:

    1.styles

    窗口参数,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况;left、right同理。
    

    2.extras

    新窗口的额外扩展参数,可用来处理页面间传值;例如:
    
    var webview = mui.openWindow({
        url:'info.html',
        extras:{
            name:'mui'  //扩展参数
        }
    });
    console.log(webview.name);//输出mui字符串
    注意:扩展参数仅在打开新窗口时有效,若目标窗口为预加载页面,则通过mui.openWindow方法打开时传递的extras参数无效。
    

    3.createNew

    是否重复创建相同id的webview;

    为优化性能、避免app中重复创建webview,mui v1.7.0开始增加createNew参数,默认为false;判断逻辑如下:

    createNew参数为为true,则不判断重复,每次都新建webview;

    createNew参数为为fasle,则先查找当前App中是否已存在同样id的

    webview,若存在则直接显示;否则新创建并根据show参数执行显示逻辑;
    注意:plusReady事件仅在webview首次创建时触发,使用mui.openWindow方法多次打开已存在的同样id的webview时,是不会重复触发plusReady事件的; 因此若业务写在plusReady事件中,可能会出现执行结果和预期不一致的情况;此时可通过自定义事件触发; 案例参考:mui.plusReady有时会失效;

    4.show

    窗口显示控制参数,具体参数如下:

    autoShow:目标窗口loaded事件发生后,是否自动显示,默认为true;若为false,则仅创建但不显示webview;若目标页面为预加载页面,则该参数无效;

    aniShow表示页面显示动画,比如从右侧划入、从下侧划入等,具体可参考5+规范中的AnimationTypeShow

    duration:显示Webview窗口动画的持续时间,单位为ms
    waiting

    5.系统等待框参数

    mui框架在打开新页面时等待框的处理逻辑为:

    显示等待框–>创建目标页面webview–>目标页面loaded事件发生–>关闭等待框;

    因此,只有当新页面为新创建页面(webview)时,会显示等待框,否则若为预加载好的页面,则直接显示目标页面,不会显示等待框。waiting中的具体参数:

    autoShow:是否自动显示等待框,默认为true;若为false,则不显示等待框;注意:若waiting框的autoShow为true,但目标页面不自动显示,则需在目标页面中通过如下代码关闭等待框:plus.nativeUI.closeWaiting();

    title:等待框上的提示文字

    options表示等待框显示参数,比如宽高、背景色、提示文字颜色等.

    涉及到的知识点差不多就讲完了,请看下面介绍

    [webAPP项目]基于MUI框架webAPP开发功能流程之头部导航与底部导航制作详解02]

    明天给大家更新!

    注公众号:
    这里写图片描述

    展开全文
  • 项目是基于MUI的一个实际项目,调用知乎新闻和豆瓣电影API,可以阅读新闻、查看目前在映电影信息和影评,还可以在线播放预告片。同时附上整个项目开发详细步骤,希望对大家学习WEBAPP开发有帮助
  • 之前,本人在自学webapp的过程中,一直没有找到一份比较完整的开发步骤文档,都是一些零零散散的文档,走了很多弯路,也耽误了很多的时间,其中尝试了多种框架,感觉MUI这种H5+的模式是比较适合的一种WEBAPP开发模式...
  • 亲测,好用,分享给大家,基于muiwebapp版本更新方法 基于mui的版本更新方法 :iOS版本热更新、apk安装包下载。
  • mui开发webapp(1)

    2019-09-23 21:57:06
    mui开发注意事项 Mui HTML5开发框架 mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验;这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文;想了解mui更详细的信息,请访问mui官网。 ...
  • MUI+HTML5开发webapp技术

    2020-05-30 23:32:41
    MUI+HTML5开发webapp技术
  • js关键代码片段: /*点击头像触发*/ document.getElementById('headImage').addEventListener('tap', function() { if (mui.os.plus) { var a = [{ ...
  • mui开发过程遇到的问题和解决方案 最近接触了一个老项目是使用的mui(webapp),一段时间下来的有一些感受,这里大致说一下项目开发过程中的体会 上手非常容易----html5+js+css没问题的话,就等于直接入门了 坑很多----...
  • mui开发的app例子,非常好资源,适合初学者,整套代码,基本上拷贝过来就能用
  • mui开发实战

    2020-06-14 23:30:08
    mui框架webapp开发实例代码。适合初步开发者学习和熟悉整个mui框架
  • mui开发webapp(2)

    2019-09-23 21:58:52
    前端开发APP,从HBuilder开始~ 序 通过HTML5开发移动App时,会发现HTML5很多能力不具备。为弥补HTML5能力的不足,在W3C中国的指导下成立了www.HTML5Plus.org组织,推出HTML5+规范。 HTML5+扩展了JavaScript对象...
  • GitHub上的mui是3.6版本,如下的是github项目地址,大家可以下载 https://github.com/dcloudio/mui 总体感觉各种动画效果很流畅,demo很丰富,api也很详细,提供的组件也很全 但是由于主要针对的是native,所以在...
1 2 3 4 5 ... 20
收藏数 1,209
精华内容 483
关键字:

mui开发webapp项目