请选择 进入手机版 | 继续访问电脑版

极客蜗牛

查看: 215|回复: 2

MUI学习笔记-最接近原生APP体验的高性能前端框架

[复制链接]

82

主题

99

帖子

655

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
655
QQ
发表于 2017-11-11 11:40:05 | 显示全部楼层 |阅读模式
[#] [#]
MUI 号称是最接近原生APP体验的高性能前端框架。

所以如果开发混合式APP 那用它再好不过了。

MUI 跟Hbuilder是同一家公司,所以使用MUI 貌似只能用Hbuilder。

但Hbuilder确实是一款非常友好,非常强大的编辑。最重要的 是国产的 国产的 国产的!!!



接下来开始创建项目  文件>新建>移动APP


系统会自动将所有需要的资源引入。并创建好目录。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.     <title></title>
  7.     <script src="js/mui.min.js"></script>
  8.     <link href="css/mui.min.css" rel="stylesheet"/>
  9.     <script type="text/javascript" charset="utf-8">
  10.               mui.init();
  11.     </script>
  12. </head>
  13. <body>
  14.         
  15. </body>
  16. </html>
复制代码

1、所有的内容都放在 mui-content中。
  1. <div class="mui-content">

  2.                 </div>
复制代码
2、先放header和底部nav 再放mui-content。因为前两者的定位是固定定位。所以不会因为前后顺序显示错误。
3、忘记click  全部改用  mui 封装好的tap 事件。
  1. element.addEventListener('tap',function(){
  2.         //点击响应逻辑
  3.     });
复制代码
4、把所有方法写在 mui.plusReady()里。





回复

使用道具 举报

82

主题

99

帖子

655

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
655
QQ
 楼主| 发表于 2017-11-16 11:10:20 | 显示全部楼层
UI组件
1、基本组建详见 http://dev.dcloud.net.cn/mui/ui/

2、底部固定菜单
  1. <nav class="mui-bar mui-bar-tab " id="a1">  
  2.             <a class="mui-tab-item mui-active" id="a1">  
  3.                 <span class="mui-icon mui-icon-home"></span>  
  4.                 <span class="mui-tab-label">首页</span>  
  5.             </a>  
  6.             <a class="mui-tab-item " id="a2">  
  7.                 <span class="mui-icon iconfont icon-leimupinleifenleileibie"></span>  
  8.                 <span class="mui-tab-label">分类</span>  
  9.             </a>  
  10.             <a class="mui-tab-item " id="a3">  
  11.                 <span class="mui-icon iconfont icon-zhongzhi"></span>  
  12.                 <span class="mui-tab-label">种植游戏</span>  
  13.             </a>
  14.             <a class="mui-tab-item " id="a4">  
  15.                 <span class="mui-icon iconfont icon-gouwuche"><span class="mui-badge">1</span></span>  
  16.                 <span class="mui-tab-label">购物车</span>  
  17.             </a>  
  18.             <a class="mui-tab-item " id="a5">  
  19.                 <span class="mui-icon iconfont icon-wo-copy"></span>  
  20.                 <span class="mui-tab-label">我</span>  
  21.             </a>  
  22.         </nav>
复制代码




回复

使用道具 举报

82

主题

99

帖子

655

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
655
QQ
 楼主| 发表于 2017-11-17 11:43:38 | 显示全部楼层
拍照功能

  1. <script type="text/javascript">
  2.                
  3.                         mui.plusReady(function(){
  4.                                 document.getElementById("select_img").addEventListener("tap",function(){
  5.                                         mui('#sheet1').popover('toggle');
  6.                                 });
  7.                                 document.getElementById("make_pic").addEventListener("tap",function(){
  8. //                                                获取摄像头对象
  9.                                             var cmr = plus.camera.getCamera();
  10. //                                            获取摄像头支持的分辨率
  11.                                                 var res = cmr.supportedImageResolutions[0];
  12. //                                                获取支持的图片格式
  13.                                                 var fmt = cmr.supportedImageFormats[0];
  14.                                                
  15.                                                 // console.log("Resolution: "+res+", Format: "+fmt);
  16. //                                                执行拍照
  17.                                                 cmr.captureImage(
  18.                                                        
  19.                                                         function( path ){//拍照成功的回调,参数path为图片路径  

  20.                                                         },
  21.                                                         function( error ) {//拍照失败的回调
  22. //                                                                alert( "Capture image failed: " + error.message );
  23.                                                         },
  24.                                                         //拍照的参数,将之前获取的两个参数传进去,格式为json对象
  25.                                                         {resolution:res,format:fmt}
  26.                                                 );
  27.                                 });
  28.                                 document.getElementById("get_pic").addEventListener("tap",function(){
  29. //                                        打开相册
  30.                                          plus.gallery.pick(
  31.                                                  function(path){//成功回调
  32. //                                                 path为选取照片的路径
  33.                                                     console.log(path);
  34.                                             },
  35.                                             function ( e ) {//失败回调
  36.                                                     console.log( "取消选择图片" );
  37.                                             },
  38.                                             //参数
  39.                                             {filter:"image"} );
  40.                                 })
  41.                         })
  42.                 </script>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|极客蜗牛

GMT+8, 2019-1-21 04:04 , Processed in 0.056811 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表