• 之前,本人在自学webapp的过程中,一直没有找到一份比较完整的开发步骤文档,都是一些零零散散的文档,走了很多弯路,也耽误了很多的时间,其中尝试了多种框架,感觉MUI这种H5+的模式是比较适合的一种WEBAPP开发模式...

    写在前面:之前,本人在自学webapp的过程中,一直没有找到一份比较完整的开发步骤文档,都是一些零零散散的文档,走了很多弯路,也耽误了很多的时间,其中尝试了多种框架,感觉MUI这种H5+的模式是比较适合的一种WEBAPP开发模式,开发难度稍高于纯H5,但应用流畅度接近原生APP(本人和dcloud没有一毛钱关系),是值得推荐的一种混合型APP开发模式。为了让广大WEBAPP初学者少走弯路,大家可以跟着本项目文档走下来,基本上就掌握了WEBAPP开发的很多方面。本项目不涉及服务端,服务端实现较为简单,可以使用任意的语言实现,只需要能根据url返回json数据即可,所以本项目直接使用了网上公开的数据API。

    1    项目简介
    项目功能为加载知乎日报和豆瓣电影信息,可以查看新闻、影评和观看预告片。
    2    项目资源
    https://www.jianshu.com/p/42630373e1bc 
    2.1    知乎日报API
    2.1.1    最新新闻列表:https://news-at.zhihu.com/api/4/news/latest 
    2.1.2    某条新闻内容:https://news-at.zhihu.com/api/4/news/3892357 
    2.2    豆瓣电影API
    2.2.1    在映电影列表:https://douban.uieee.com/v2/movie/in_theaters?city=福州  
    2.2.2    某部电影信息:https://douban.uieee.com/v2/movie/subject/26985127 
    2.3    Json格式工具
    打开http://www.bejson.com/,把获得的json字符串直接粘贴到输入框,然后验证
    2.4    HTML模板工具
    http://www.jq22.com/jquery-info1097 
    JS资源下载
    打开https://github.com/aui/art-template/tree/master/lib ,下载template-web.js
     
    3    开发工具
    3.1    HBuilder
    http://download.dcloud.net.cn/HBuilder.9.1.14.windows.zip 
    3.2    夜神安卓模拟器
    https://res06.bignox.com/full/20180816/b78465a3b8a9457eb47df54e477a1a60.exe?filename=nox_setup_v6.2.2.3_full.exe

    4    开发过程
    4.1    项目创建
    使用Hbuilder新建移动APP项目,把template-web.js拷贝到js目录下; 新建subpages子目录,以后的页面都是放在该目录下。
    4.2    入口页开发
    打开index.html,写上一个页头mHeader和一个页脚导航mTab,修改链接和名称。
     
     效果如下:


    在subpages目录下,新建对应的四个页面,先写上简单的文字标识,后面会进行功能完善。
     
    采用webView的方式来进行Tab切换,代码有点多,可以拷贝官方文档,进行局部修改,其实只要修改subpages即可,主要要和mTab中的设置要一致,否则会报告错误,因为名字错了,就无法找到文件资源,也就无法初始化了。
     
    ※初始化代码要写在plusReady事件中。
    4.3    首页开发
    暂时先留空,因为这个页面的内容是其他模块信息的综合而已,先做其他页面,在来组装本页的内容
    4.4    新闻列表
    打开newslist.html,新建一个mbody,
    引入<script src="../js/template-web.js" type="text/javascript" charset="utf-8"></script>
    在mui.plusReady中编写ajax,获取数据
     
    新建一个mListMedia块,删除多余的li,留下一个,用于制作模板(具体做法请参考art-template),最后模板如下:
     
    ※注意此图与上图的对应关系,script的id=“newlistScript”与template函数的参数名“newlistScript”是对应的。Mui(“#newlist”)是放置当前模板内容的父元素id,要记得给mbody的div加上id=‘newlist’。
    ※在这个过程当中,可以先用浏览器查询下数据,把数据放入www.bejson.com中进行观察,来指导编写代码。

    绑定新闻条目的点击事件:
     
    ※解释:off是为了先把以前绑定的事件解除(一般不做也没有关系),on绑定tap点击事件到当前元素下的所有li元素上;this.getAttribute是获得li上的id属性值;openWindow是当点击某个li后,打开下一个网页,extras是传参;
    页面效果如下:
     
    4.5    新闻详情页
    新建一个mHeader,取名为新闻详情,并带有返回键<
    创建一个mBody,取id为news
    引入template-web.js
    创建mui.plusReady事件,编写代码:
     
    创建一个卡片视图,(奇怪,hbuilder没有卡片的自动生成快捷键?),删除多余的div,留下一个做为模板用,模板最后如下:
     
    页面效果如下:
     
    4.6    豆瓣电影
    打开movielist.html,
    创建一个mbody
    引入template-web.js
    创建mui.plusReady事件,并编写代码
     
    创建自定义模板
     
    绑定tap事件

    5    电影详情页
    创建movie.html,
    创建mHeader,创建mbody,取id为movie
    创建卡片布局(见官网)
    创建mui.plusReady事件,并编写代码
     
    创建模板
    把影片图片放在卡片的头部,把影片信息,预告片信息,影评信息分别放入卡片布局的内容区,具体代码见源代码。
     
     


    ※由于横向滚动条的预告片部分是动态生成的,所以要让它有滚动效果,必须重新初始化
     
    6    首页开发
    6.1    头部滚动条
    滚动条为当前评分较高的电影海报,
    在mui.plusReady中获取电影列表
     
    自定义排序比较函数:降序排序
     
    模板生成
     
    6.2    下部列表
    在mui.plusReady中拉数据
     
    生成模板
     
    7    项目效果预览

    首页:

    新闻列表

    豆瓣电影

    新闻详情页:

    电影详情页:

    预告片播放:

    8. 项目源代码:

    https://download.csdn.net/download/luoshao2000/10618471

     

    展开全文
  • 为什么用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开发webapp项目demo

    2020-07-10 23:31:56
    Mui开发webapp项目demo,找很久很多demo 发现这个demo做的最好一个,现在分享个大家,希望能给大家对学习Mui有所帮助
  • mui开发webapp(1)

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

    mui开发注意事项

    Mui HTML5开发框架

    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-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方法](http://dcloudio.github.io/mui/javascript/#openwindow)打开一个新的webview,mui会自动监听新页面的loaded事件,若加载完毕,再自动显示新页面;扩展阅读:

    hello mui中的无等待窗体切换是如何实现的

    提示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(){  

            //点击响应逻辑  

        });  

    转载于:https://www.cnblogs.com/siwy/p/5045332.html

    展开全文
  • js关键代码片段: /*点击头像触发*/ document.getElementById('headImage').addEventListener('tap', function() { if (mui.os.plus) { var a = [{ ...

    js关键代码片段:

       /*点击头像触发*/ 
                 document.getElementById('headImage').addEventListener('tap', function() { 
                        if (mui.os.plus) { 
                            var a = [{ 
                                title: "拍照" 
                            }, { 
                                title: "从手机相册选择" 
                            }]; 
                            plus.nativeUI.actionSheet({ 
                                title: "修改用户头像", 
                                cancel: "取消", 
                                buttons: a 
                            }, function(b) { /*actionSheet 按钮点击事件*/ 
                                switch (b.index) { 
                                    case 0: 
                                        break; 
                                    case 1: 
                                        getImage(); /*拍照*/ 
                                        break; 
                                    case 2: 
                                        galleryImg();/*打开相册*/ 
                                        break; 
                                    default: 
                                        break; 
                                } 
                            }) 
                        } 
                    }, false); 
    
    
    
        //拍照 
                function getImage() { 
                    var c = plus.camera.getCamera(); 
                    c.captureImage(function(e) { 
                        plus.io.resolveLocalFileSystemURL(e, function(entry) { 
                            var s = entry.toLocalURL() + "?version=" + new Date().getTime(); 
                            uploadHead(s); /*上传图片*/ 
                        }, function(e) { 
                            console.log("读取拍照文件错误:" + e.message); 
                        }); 
                    }, function(s) { 
                        console.log("error" + s); 
                    }, { 
                        filename: "_doc/head.png" 
                    }) 
                } 
    
    
    
    
        //本地相册选择 
                function galleryImg() { 
                    plus.gallery.pick(function(a) { 
                        plus.io.resolveLocalFileSystemURL(a, function(entry) { 
                            plus.io.resolveLocalFileSystemURL("_doc/", function(root) { 
                                root.getFile("head.png", {}, function(file) { 
                                    //文件已存在 
                                    file.remove(function() { 
                                        console.log("file remove success"); 
                                        entry.copyTo(root, 'head.png', function(e) { 
                                                var e = e.fullPath + "?version=" + new Date().getTime(); 
                                                uploadHead(e); /*上传图片*/ 
                                                //变更大图预览的src 
                                                //目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现 
                                            }, 
                                            function(e) { 
                                                console.log('copy image fail:' + e.message); 
                                            }); 
                                    }, function() { 
                                        console.log("delete image fail:" + e.message); 
                                    }); 
                                }, function() { 
                                    //文件不存在 
                                    entry.copyTo(root, 'head.png', function(e) { 
                                            var path = e.fullPath + "?version=" + new Date().getTime(); 
                                            uploadHead(path); /*上传图片*/ 
                                        }, 
                                        function(e) { 
                                            console.log('copy image fail:' + e.message); 
                                        }); 
                                }); 
                            }, function(e) { 
                                console.log("get _www folder fail"); 
                            }) 
                        }, function(e) { 
                            console.log("读取拍照文件错误:" + e.message); 
                        }); 
                    }, function(a) {}, { 
                        filter: "image" 
                    }) 
                }; 
    
    
    
    
        //上传头像图片 
                function uploadHead(imgPath) { 
                	var mainImage = document.getElementById("headImage");
                    console.log("imgPath = " + imgPath); 
                    mainImage.src = imgPath; 
                    mainImage.style.width = "90px"; 
                    mainImage.style.height = "90px"; 
         
                    var image = new Image(); 
                    image.src = imgPath; 
                    image.onload = function() { 
                  var imgData = getBase64Image(image); 
                        /*在这里调用上传接口*/ 
                 var userId=plus.storage.getItem('userId');
    			mui.ajax(httpUrl+'appPath/appPath!ajaxUploadImg?userId='+userId,{
    				data:{imgData:imgData},
    				dataType:'json',//服务器返回json格式数据
    				type:'post',//HTTP请求类型
    				timeout:10000,//超时时间设置为10秒;
    				success:function(data){
    					console.log('上传成功'); 
    				},
    				error:function(xhr,type,errorThrown){
    					mui.toast('网络异常,请稍后再试!'); 
    				}
    			});
                    } 
            } 
                //将图片压缩转成base64 
                function getBase64Image(img) { 
                    var canvas = document.createElement("canvas"); 
                    var width = img.width; 
                    var height = img.height; 
                    // calculate the width and height, constraining the proportions 
                    if (width > height) { 
                        if (width > 100) { 
                            height = Math.round(height *= 100 / width); 
                            width = 100; 
                        } 
                    } else { 
                        if (height > 100) { 
                            width = Math.round(width *= 100 / height); 
                            height = 100; 
                        } 
                    } 
                    canvas.width = width;   /*设置新的图片的宽度*/ 
                    canvas.height = height; /*设置新的图片的长度*/ 
                    var ctx = canvas.getContext("2d"); 
                    ctx.drawImage(img, 0, 0, width, height); /*绘图*/ 
                    var dataURL = canvas.toDataURL("image/png", 0.8); 
                    return dataURL.replace("data:image/png;base64,", ""); 
                }    
    
    		function photoerror(img){
    			img.src="img/mryh.png";
    			img.null;   //控制不要一直跳动
    		}
    
    展开全文
  • mui开发webapp(2)

    2019-09-23 21:58:52
    前端开发APP,从HBuilder开始~ 序 通过HTML5开发移动App时,会发现HTML5很多能力不具备。为弥补HTML5能力的不足,在W3C中国的指导下成立了www.HTML5Plus.org组织,推出HTML5+规范。 HTML5+扩展了JavaScript对象...

    前端开发APP,从HBuilder开始~

    通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plus.org组织,推出HTML5+规范。

     

    HTML5+扩展了JavaScript 对象plus,使得js 可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。

     

    HBuilder 的手机原生能力调用分2 个层面:

     

    a) 跨手机平台的能力调用都在HTML5+ 规范里,比如二维码、语音输入,使用plus.barcode 和plus.speech。编写一次,可跨平台运行。

     

    b) JS Bridge是另一项创新技术,通过js 可以直接调ios 和android 的原生API,这部分就不再跨平台,比如调ios game center,或在android 手机桌面创建快捷方式。

    JSB 的用法是var obj = plus.android.import("android.content.Intent");将一个原生对象android.content.Intent 映射为js 对象obj,然后在js 里操作obj对象的方法属性就可以了。

     

    注:使用 HTML5+开发的移动App 并非mobileweb页面。这是新手最容易混淆的地方。mobileweb 的文件存放在web 服务器上,而移动App 的文件存放在手机本地,编写移动App 的html、js、css文件被打包到ipa或apk等原生安装包,在手机客户端运行。

     

    当然这些移动 App 里某些页面也可以继续从服务器端以网页方式运行。所以mobile web,在HBuilder 里新建项目时,属于web 项目。不要放置到移动App 项目。mobile web 项目也不能真机联调和打包.

    内容简介

    介绍目前前端人员开发app的几种方法,具体介绍hbuilder开发app,一扇赞新的大门~

    无所不能的js

    最开始js仅仅局限于网页上一些效果,操作网页内容等,但是nodejs把js带入了后端,也就是服务器端,从此前端人员可以涉及后端,前后通吃,native.js(以及其他js,稍候介绍)把js带入了移动端,从此前端人员前后移动通吃。

     

    前端涉及app的两种方式

    适应移动端的网页

    大家都很熟悉的bootstrap,和现在刚出来的amazeui就是这种方法的代表,说的简单点就是对移动端做了适配,布局样式组件都适合移动端展示。

     

    缺陷:毕竟不是app,不管怎样也没办法取代app的便捷和功能强大。

     

    js+html+css+打包技术

    比较有名的就是phonegap了,国内的是hbuilder,大概的意思是html负责页面内容,js负责效果以及调用原生app方法,ui框架负责样式,最后打包成apk或者ipa。

     

    hbuilder(http://www.dcloud.io/)

    不谈phonegap,不适用国内国情,是的,你没有看错,这是一个开发的ide,其实就是对eclipse进行了深度定制。

     

    特点是快捷键比较多,支持移动app开发(h5+方式)。

     

    h5+(http://www.html5plus.org/#home)

    可以说nodejs将js带到后端,h5+将js带到移动端。

     

    原理

    上面说过的原理,再次说一遍:

     

    html负责页面,也就是的内容和框架;

     

    js负责调用方法,也就是调用一些移动端原生;

     

    ui负责样式,比较有名的bootstrap,amazeui,jquery mobile,mui

     

    ui比较

    上面说的几个ui,做下简单比较,仅代表个人观点,

     

    Amazeui:功能和bootstrap重复,官方解释是对中文排版做了优化,个人觉得有点多余,bootstrap就很好。

     

    Bootstrap:适合移动端浏览网页适配,移动端浏览效果不错,但是还是网页。

     

    jquery mobile:专门对移动端做定制,看起来就像手机应用一样,js+css,国外的,不推荐,有坑。

     

    Mui:这个是推荐的,比较了jqmobile和mui,显然mui效果样式好点,估计也会有坑,但是支持国产吧。

     

    前端开发app

     

    搭建开发环境

    不需要搭建ios和android的开发环境,只需要下载hbuilder(估计需要java环境支持)。

     

    选定ui

    目前推荐mui,效果不错

     

    写事件

    通过js调用原生方法实现app效果

     

    写业务逻辑

    环境搭建

    前言

    本教程是介绍使用html5+(nativejs)和mui开发移动app(包括android和ios),

     

    感兴趣请继续,不感兴趣请跳过,大部分来自官方api,增加了一些自己的总结。

     

    HBuilder

     

    说明

    用h5+开发app的环境,也是ide,对eclipse做了深度定制,以前使用过eclipse或者myeclipse的童鞋可以直接上手。

     

    官网

    http://www.dcloud.io/

     

    下载

    在官网上点击下载,安装好后可以自己将文件夹压缩成zip,方便以后使用,解压就可以用。

     

    依赖

    估计会需要jre环境,没有试过,如果需要请自行百度搜索jre安装方法。

     

    上手

    打开HBuilder之后默认会有一个项目“HelloHBuilder”,里面有HBuilder使用的介绍。

     

    快捷键

    HBuilder一大亮点是快捷键,但是如果习惯了自己之前的快捷键会很别扭,需要自己在工具——选项——常规——快捷键中修改。

     

    插件

    HBuilder将插件做了下优化,提供了最长用的一些插件,并且使用dcloud网站下载,速度很快,eclipse自带插件安装需要翻墙。

     

    打开工具——插件安装,安装自己需要的插件,例如我安装了如下插件:

     

     

    完成

    环境搭建就完成了,这应该是所有开发环境搭建中最简单的了。

     

     

    原理介绍

    原理

    html5+开发app的原理大概是这样:

     

    html页面负责内容;

     

    ui负责页面样式;

     

    js负责调用原生app方法。

     

    html5

    html5这部分负责页面,也就是app中你看到的东西,大概的架构和内容

     

    ui

    ui负责页面样式,既然要做移动app,那做出的效果就得和移动端靠近,这里并没有局限于用哪种ui,比较常见的适配移动端的ui框架有:

     

    bootstrap

    介绍:Twitter开发的ui框架,特点是可以简介美观,可以适配移动端(例如本站:http://uikoo9.com/

     

    中文官网:http://v3.bootcss.com/

     

    amazeui

    介绍:国人模仿bootstrap做的一个ui框架,个人感觉有点多余,有兴趣的可以看看。

     

    官网:http://amazeui.org/

     

    jquery mobile

    介绍:HBuilder其实是模仿国外的phonegap,通用mui是模仿jquery mobile,但是感觉也不错

     

    官网:http://jquerymobile.com/

     

    mui

    介绍:和HBuilder相搭配的移动ui,也和nativejs相搭配,感觉还不错,模仿的ios7界面风格。

     

    官网:http://dcloudio.github.io/mui/

     

    framework7

    介绍:国外一块模仿ios7的ui框架,赞

     

    官网:http://www.idangero.us/framework7/

     

     

    nativejs

    介绍:一个可以调用android和ios原生方法的js

    入门:http://ask.dcloud.net.cn/article/88

     

    搭配

    选择:目前比较好的搭配是mui+nativejs+hbuilder,你也可以尝试其他的组合,例如jqmobile+nativejs等

     

    mui-demo:http://www.dcloud.io/hellomui/

     

    nativejs-demo:http://www.html5plus.org/#case#/case/id/4.html

     

    mui开发示例

    前言

    看了前面两篇内容是否有点跃跃欲试了?

     

    下面就开始一个简单的例子,以及mui相关内容

     

    mui

    官网:http://dcloudio.github.io/mui/

     

    说明:希望你可以把官网内容通读一遍,这是以后开发的基础

     

    开始

    新建项目

    在首页点击新建移动App,如下:

     

    或者在项目管理器内右键新建,或者快捷键ctrl+n+a

     

    选择模版

    这里选择mui项目,会自动引入mui的js和css,如下:

    文件结构

    默认有以下几个文件夹:css,fonts,js,如下:

     

    简单开发

    header

    打开index.html后在body内输入mh后回车,如下:

     

    body

    同样输入mbo后回车

     

    list

    在mbody中添加一些列表

    最后的代码

    <!DOCTYPE html>  

    <html>  

    <head>  

        <meta charset="utf-8">  

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  

        <title></title>  

        <script src="js/mui.min.js"></script>  

        <link href="css/mui.min.css" rel="stylesheet"/>  

        <script type="text/javascript" charset="utf-8">  

            mui.init();  

        </script>  

    </head>  

    <body>  

        <header class="mui-bar mui-bar-nav">  

            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  

            <h1 class="mui-title">我的标题</h1>  

        </header>  

        <div class="mui-content">  

            <ul class="mui-table-view" id="my_task_list">  

                <li class="mui-table-view-cell">  

                    <div class="mui-slider-right mui-disabled">  

                        <a class="mui-btn mui-btn-red">删除</a>  

                    </div>  

                    <div class="mui-slider-handle">  

                        待办事项1  

                    </div>  

                </li>  

                <li class="mui-table-view-cell">  

                    <div class="mui-slider-right mui-disabled">  

                        <a class="mui-btn mui-btn-red">删除</a>  

                    </div>  

                    <div class="mui-slider-handle">  

                        待办事项2  

                    </div>  

                </li>  

            </ul>  

        </div>  

    </body>  

    </html>  

     

    调试(android为例)

    连接手机

    首先需要连接手机

     

    运行

    选择运行——手机运行——在xx设备上运行

    或者使用快捷键ctrl+r

     

    效果

    现在你就可以在手机上看效果了

     

    注意

    需要开启开发者模式

     

    打包

    dcloud证书打包

    选择发行——App打包——选择android以及dcloud公用证书,如下:

     

    参数配置

    可能有时候会提示参数配置错误,这是你需要打开项目下manifest.json文件,并去掉第三方插件,如下:

     

     

    等待

    返回上一步的发行打包,点击打包后会提示你已经到云端打包,你只需要等待了,

     

    一小会之后就打包好了,这时你就可以把apk拷贝到自己手机使用了,

    mui中几种open页面的区别

    使用hbuilder+mui做app一段时间,期间遇到问题不少,自己摸索,做了个app,详见:http://uikoo9.com/dishi/download

     

    如果您水平比这个高,那就不用看了,直接跳过。

     

    【水平】

     

    由于用hbuilder+mui出于兴趣,也就没有去看源码,停留在使用总结层次,所以有说的不对的地方还请见谅。

     

    【几种打开页面的方式】

     

    1.初始化时创建子页面

     

    2.直接打开新页面

     

    3.预加载页面

     

    【示例】

     

    1.初始化时创建子页面

     

    mui.init({  

        subpages: [{  

            url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址  

            id: your - subpage - id, //子页面标志  

            styles: {  

                top: subpage - top - position, //子页面顶部位置  

                bottom: subpage - bottom - position, //子页面底部位置  

                width: subpage - width, //子页面宽度,默认为100%  

                height: subpage - height, //子页面高度,默认为100%  

                ......  

            },  

            extras: {} //额外扩展参数  

        }]  

    });  

     

    2.直接打开新页面

     

    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: {  

            ..... //自定义扩展参数,可以用来处理页面间传值  

        }  

        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, //等待框背景区域高度,默认根据内容自动计算合适高度  

                ......  

            }  

        }  

    })  

     

    3.预加载页面

     

    // 方式1  

    mui.init({  

        preloadPages: [{  

            url: prelaod - page - url,  

            id: preload - page - id,  

            styles: {}, //窗口参数  

            extras: {}, //自定义扩展参数  

            subpages: [{}, {}] //预加载页面的子页面  

        }]  

    });  

      

    // 方式2  

    var page = mui.preload({  

        url: new - page - url,  

        id: new - page - id, //默认使用当前页面的url作为id  

        styles: {}, //窗口参数  

        extras: {} //自定义扩展参数  

    });  

     

     

     

    【一些区别】

     

    1.子页面和非子页面

     

    以上三种方式中,2,3打开的页面非子页面,

     

    区别是子页面相当于html中的iframe,而非子页面相当于新开了一个浏览器窗口加载了一个html

     

    2.子页面适用于侧滑菜单

     

    子页面有其特点,特别适用与index.html+list.html这种情况,

     

    如果用index.html(主页面)+list.html(子页面)实现的话,当主页面右滑时子页面会自动跟随,

     

    而用index.html(主页面)+list.html(新页面)实现的话,主页面右滑,新页面不右滑,还得单独处理新页面。

     

     

    3.子页面使用频繁切换的情况

     

    如果频繁左滑右滑,在配置较低的手机上会出现list.html遮住index.html的情况,采用子页面模式就不会,采用新页面模式几率很大。

     

    4.子页面适用与下拉刷新和上拉加载

     

    之前做向下拉刷新的时候,采用的是新页面的形式,按照官网教程,怎么搞都不成功,后来看了下源码,发现下拉刷新必须采用子页面的形式,也就是你的list.html必须是index.html的子页面,才可以下拉刷新。

     

    5.新页面适用于新页面

     

    open一个新页面,适用于查看详情之类的,需要打开一个新页面的情况,并且mui自己封装了新页面的back方法,你就不需要去操心了。

     

    6.预加载页面的两种方式

     

    第一种是在初始化的时候预加载,这种情况适合在你这个页面在很久之后才会用,如果你要立即到的页面并使用,那么你会得到null。第二种方式类似与open,个人感觉没有什么太大的区别,唯一的区别是open就直接打开了,preload只是加载,你可以之后选择打开的时机。

     

    7.总结

     

    需要下拉刷新上拉加载请使用子页面,需要打开一个新页面请使用新页面方式,需要加载一个页面但是暂时不使用请使用预加载方式。

    转载于:https://www.cnblogs.com/siwy/p/5045349.html

    展开全文
  • 接下来给大家来详细讲解一下:在上一节中我们已经介绍怎么去做一个开机引导图了[webAPP项目]基于MUI框架webAPP开发功能流程之引导图制作详解01如果不会的,就按照上一篇文章讲解的自己在作一遍.效果图最终我们要实现的...
  • 前言 我们在构建一个APP时,少不了APP运行前的开机引导图,现在来详细介绍一下MUI框架关于这一操作的详细步骤! 原理 如果用户第一次下载使用该软件,就显示引导图;... 参数:是函数在app开发中,若要使用
  • 亲测,好用,分享给大家,基于muiwebapp版本更新方法 基于mui的版本更新方法 :iOS版本热更新、apk安装包下载。
  • MUI之APP开发
  • MUI+HTML5开发webapp技术

    2020-05-30 23:32:41
    MUI+HTML5开发webapp技术
  • mui开发过程遇到的问题和解决方案 最近接触了一个老项目是使用的mui(webapp),一段时间下来的有一些感受,这里大致说一下项目开发过程中的体会 上手非常容易----html5+js+css没问题的话,就等于直接入门了 坑很多----...
  • mui开发的app例子,非常好资源,适合初学者,整套代码,基本上拷贝过来就能用
  • 基于mui开发App

    2019-01-25 10:02:03
    真正彻底的跨平台开发,不是简单的跨iOS和Android。 基于mui,一套HTML5工程,通过前端构建工具(如grunt)条件编译,可同时发行到iOS Appstore、安卓各大应用商店、普通手机浏览器、微信H5和流应用。 ...
  • 前言由于自己平时做项目(自己做或者帮朋友做的移动APP,webAPP,机器学习算法类)比较多,做的东西大多没有整理成文档,现在就把之前做的项目整理成文档分享给大家,好大家以后做相关项目有个参考! 在做HTML5开发时一直在...
  • webapp mui & HTML5+ (三) 之 mui开发注意事项mui框架自身有一些规则,刚接触的同学不很熟悉,以下开发注意事项,有需要的朋友可以参考下。以下来自官方文档DOM结构关于mui页面的dom,你需要知道如下规则。 1. 固定...
  • 需求:如果用户第一次下载使用该软件,就显示引导图;如果非第一次使用,则跳过这一步. 1.mui.plusReady()方法 语法:mui.plusReady(function) 参数:是函数 在app开发中,若要使用...正常使用,mui将该事件封装成了mui.
  • 本项目是基于MUI的一个实际项目,调用知乎新闻和豆瓣电影API,可以阅读新闻、查看目前在映电影信息和影评,还可以在线播放预告片。同时附上整个项目的开发详细步骤,希望对大家学习WEBAPP开发有帮助
  • mui开发实战

    2020-06-14 23:30:08
    mui框架webapp开发实例代码。适合初步开发者学习和熟悉整个mui框架
1 2 3 4 5 ... 20
收藏数 1,211
精华内容 484