MUI框架教程 基于localStorage的便签APP开发源码实例

本APP利用MUI框架，基于html5的本地存储localStorage开发，最后使用HBuilder进行打包。

MUI框架教程-页面结构

页面 描述 index.html 显示固定导航，以及【清空】、【添加文件夹】按钮； indexlist.html list.html就是index.html的子页面，显示文件夹列表内容，长按可重命名，在列表项左滑触发显示删除按钮，下拉可刷新，双击顶部标题栏可返回。列表项的滚动在indexlist.html所在webview中使用原生滚动，主要为了区域滚动卡顿的问题。 list.html 便签列表页面，点击列表项可进入详情查看或编辑，点击右上角可添加便签，在列表项左滑可触发显示删除按钮。 detail.html 便签内容页面

MUI框架教程-主要技术点

加载子页面

mui.init({    subpages: [{        url: 'list.html', //子页面HTML地址，支持本地地址和网络地址        id: 'list.html', //子页面标志，id也可写为list,唯一即可        styles: {            top: '45px', //子页面顶部位置，mui标题栏默认高度为45px；            bottom: subpage - bottom - position, //子页面底部位置，默认为0px，可不定义；            width: subpage - width, //子页面宽度，默认为100%            height: subpage - height, //子页面高度，默认为100%        },        extras: {} //额外扩展参数    }]});  

打开新页面

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

页面间传值

 * 新窗口的额外扩展参数，可用来处理页面间传值；例如：

var webview = mui.openWindow({    url:'info.html',    extras:{        name:'mui'  //扩展参数    }});console.log(webview.name);//输出mui字符串  

自定义事件传值

var detailPage = null;//添加列表项的点击事件mui('.mui-content').on('tap', 'a', function(e) {  var id = this.getAttribute('id');  //获得详情页面  if(!detailPage){    detailPage = plus.webview.getWebviewById('detail.html');  }  //触发详情页面的newsId事件  mui.fire(detailPage,'newsId',{    id:id  });//打开详情页面            mui.openWindow({    id:'detail.html'  });});  

//添加newId自定义事件监听window.addEventListener('newsId',function(event){  //获得事件参数  var id = event.detail.id;  //根据id向服务器请求新闻详情  .....});  

手势事件

分类 参数 描述 点击 tap 单击屏幕 doubletap 双击屏幕 长按 longtap 长按屏幕 hold 按住屏幕 release 离开屏幕 滑动 swipeleft 向左滑动 swiperight 向右滑动 swipeup 向上滑动 swipedown 向下滑动 拖动 dragstart 开始拖动 drag 拖动中 dragend 拖动结束

手势事件配置

mui.init({    gestureConfig: {        tap: true, //默认为true        doubletap: true, //默认为false        longtap: true, //默认为false        swipe: true, //默认为true        drag: true, //默认为true        hold: false, //默认为false，不监听        release: false //默认为false，不监听    }});  

MUI框架教程-数据结构

一开始为了数据结构清晰明了，将便笺数据放进了文件夹数据的子项，后来在数据操作中需要用到循环嵌套，对性能方面会产生影响，感兴趣的童鞋可以尝试分开存储两项数据，以Key为标识，来进行相关开发。

MUI框架教程-下载链接：

APP下载链接 （只打包了安卓版）

MUI框架教程-界面

• 首页
  
• 便签列表
  
  
  • 便签内容
    
  • 添加文件夹