博客列表 >mui知识点总结

mui知识点总结

冰魄
冰魄原创
2017年08月11日 17:27:411413浏览
  • https://ke.qq.com/webcourse/index.html#course_id=203400&term_id=100240884&taid=1186441766050440&vid=m141785umya

  • 编辑器是Sublime 他需要和apicloud连接的进行真机测试时话需一个插件,从apicloud官网下载 :app开发平台---开发工具中下载第二个即Sublime APICLoud PLugins,下载解压后把最后三个即api-sublime-  文件复制到编辑器Sublime的Package 文件夹中即可。

  • 如果想在电脑上看效果的话只用按个模拟器即可(我用的是夜神模拟器)。

  • apisloud官网登录后在开发平台上创建新的项目外壳包时 第一个Native是做混合开发app的   ;第二个Web是做web手机端网址打包的app(即直接用网址打包的app)

  • 官网案例在开发者社区--原码(里面有很多已好的案例但是没有交互数据即纯静态)

  • 开发混合式app时需要重点看的知识点是:开发者社区--文档:API对象、界面布局、导航菜单

  • 开发时遇到问题解决方案是去找官网论坛即:开发者社区--在线社区(进入后在搜寻里搜索所要解决的问题)

  • 将在官网创建好的项目外壳下载到本地电脑:  在本地电脑随意盘里新建一个文件夹右击---SVN检出  :连接是官网代码里的那个连接  密码是其后面的获取密码   账号是官网上你用户名下的邮箱

  • icon 即图标尺寸50px~200px包括50和200

  • 启动页 尺寸必须尺寸为1080*1920    更精细的话还需要640*1136   640*960  1536*2048   800*1280  720*1280  400*800

mui.init({

    • 放嵌入页面即创建子页面subpages:[{}],

    • 预加载  preloadPages:[{},{},{}],是个数组【也可放在其对应的点击事件里放在这里的预加载是var  prPage = mui.preload({url:'',id:''})】

    • 上拉加载、下拉加载 pullRefresh : {    //...       },

    • 手势配置    gestureConfig:{    //... },
      侧滑关闭 swipeBack:true, //Boolean(默认false)启用右滑关闭功能
      监听Android手机的back、menu按键 keyEventBind: { backbutton: false,  //Boolean(默认true)关闭back按键监听                      menubutton: false   //Boolean(默认true)关闭menu按键监听 },

    • 处理窗口关闭前的业务 beforeback: function() { //... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看 }, //设置状态栏颜色 statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用 preloadLimit:5//预加载窗口数量                                                                    限制(一旦超出,先进先出)默认不限制 })

        })

  • 嵌入页面 即创建子页面  mui.init -----subpages:[{}]

  • 点击打开新页面(事件监听即打开页面就执行绑定的事件用的是mui.trigger(绑定的id,'tap');)

    1、 绑定onclick时间  function dkym(){

         mui.openWindow({

                       url:,

                       id:,

                        style:{},

                        extras:{要传给打开页面的值即传值}

           });}

    2、mui.plusReady(function(){

      • document.getElementById('sx').addEventListener('tap',function(){

        • mui.openWindow({

        • url:'buycarsx.html',

        • id:'sx'

        • });

      • });

      });

      3、绑定事件完成页面跳转(取消绑定用off也写在mui.plusReady(function(){}))

      mui.plusReady(function(){

          mui('body').on('tap', '.offer_box > li', function() {

               mui.openWindow({

               url:'cardetails.html',

               id:'cardetails.html'

               });

           });

      });

    • 手势事件

      点击   (单击tap    双击  doubletap)  

      长按(longtap 长按屏幕        hold 按住屏幕    release 离开屏幕)

      滑动(swipeleft 向左滑动   swiperight 向右滑动   swipeup向上滑动    swipedown 向下滑动)

      拖动(dragstart 开始拖动    drag 拖动中  dragend 拖动结束)

    • 页面传值(自定义事件)


    • mui.plusReady(function(){

      • //父页面

      • //预加载

      • var prPage =mui.preload({url :"cardclcs.html",id :"cardclcs.html"});

      • //页面传值跳转

      •             mui('body').on('tap','.mui-media-body', function(){

        •             mui.fire(prPage,'news',{'cz':this.innerHTML});//news 和cz都是随意自己定的主要是和传给值的对象那里用的

        •             // mui.fire(prPage,'news',{'id':this.getAttrubute('id')});//news 和id都是随意自己定的主要是和传给值的对象那里用的 第二个id是页面自己的id

        •             mui.openWindow({url :"cardclcs.html",id :"cardclcs.html"})

      •             });


      • })

      • //子页面接值

      • mui.plusReady(function(){

        • window.addEventListener('news',function(e){//news是cardetails.html页面自己随意定的

        • var mmq =mui('#mmq');

        • mmq[0].innerHTML = e.detail.cz;//cz是cardetails.html页面自己随意定的

        • //mmq[0].innerHTML = e.detail.id;//id是cardetails.html页面自己随意定的

        • });

      • })

    • app与服务器之间的交互共四个方法

      • mui.ajax({})   

      • mui.post() 里面不用写url   type  datatyp   data  等可直接把其后的值直接写在里面

      • mui.get()里面不用写url   type  datatyp   data  等可直接把其后的值直接写在里面

      • mui.getJSON()里面不用写url   type  datatyp   data  等可直接把其后的值直接写在里面

         


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议