丁汤汤_最前端

一起进阶前端大牛

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框架教程-界面

  • 首页
    首页
  • 便签列表
    便签列表
    • 便签内容
      便签内容
    • 添加文件夹
      添加文件夹
阅读更多
版权声明:博主坐标帝都西二旗(码农圣地),从事偏webapp、h5的前端开发渣渣一枚,业余做站长研究技术营销,F7问题交流请加微信 【dingdingnoname】或QQ群【438409063】,直接说不用问在不在。 https://blog.csdn.net/u010035608/article/details/52329668
个人分类: MUI webapp/hybrid app
想对作者说点什么? 我来说一句

mui框架实例代码

2017年07月11日 4.37MB 下载

MuiDemo(MUI例子)

2017年10月25日 381KB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭