zhaomenghuan/mui-demo

一个关于mui的demo仓库。

mui-demo

mui——最接近原生APP体验的高性能前端框架，是基于html5plus(简称5+或html5+)的一个UI框架。

说明

本仓库会收集mui系列demo，欢迎各位fork and push。

内容分类说明：

• example：文件夹下存放mui相关demo
• screenshot：文件夹下存放demo截图
• mui系列教程源码：文件夹下存放教程源码
• doc：文件夹下存放一下技巧和细节
• faq：文件夹存放常见问题

博客教程

MUI从入门到精通系列文章：

• mui初级入门教程（一）— 小白入手mui的学习路线
• mui初级入门教程（二）— html5+ webview 底部栏用法详解
• mui初级入门教程（三）— html5+ XMLHttpRequest 与mui ajax用法详解
• mui初级入门教程（四）— 再谈webview，从小白变“大神”！
• mui初级入门教程（五）— 聊聊即时通讯（IM），基于环信 web im SDK
• mui初级入门教程（六）— 模板页面实现原理及多端适配指南
• mui初级入门教程（七）— 基于native.js的文件系统管理功能实现
• HTML5+ APP页面传参详解
• mui组件通用CSS类
• 录音文件与Base64编码相互转换的方法

视频讲座

• html5+ App开发工程化实践之路
• html5+ App开发之 Android 平台离线集成 5+ SDK

demo列表

• audio：录音转dataURI,dataURI转语音文件播放
• broswer：浏览器加载网页的简单模型
• calendar：日历组件
• contenteditable：div contenteditable可编辑模式下【获得输入框键盘焦点】和【光标移动到最后】
• easemobIM：环信webim的demo
• jsonp：mui使用jsonp的演示例子
• njs-io：基于native.js的文件系统管理功能实现
• numberbox：倍率为2的范围可控的数字增减器
• oauth：判断本地是否安装客户端,进行第三方登录
• openQQ：调用qq会话
• piker：选择器
• popover：基于mui.popover的自定义弹出层
• preload：预加载注意事项
• pullrefresh-dtpiker：下拉刷新与时间选择器冲突的解决方案
• share：使用图片打开分享
• slider：加载网络图片的图片轮播
• statusbar：沉浸式状态栏
• tabbar-div-animation：div模式带动画切换的选项卡
• tabbar-webview-withleftmenu：带侧滑的webview模式的tabbar
• tabbar-with-iframe：iframe兼容处理tababr的方法
• tabbar-with-popover：解决弹出层被遮挡的问题
• tab-with-segmented-control-vertical-uprefresh：左侧选项卡-div模式增加上拉加载功能
• template：模板页面实现原理
• timeline：时间轴效果
• vue-mui：基于Vue.js的mui tabbar演示例子
• tts-param：语音合成参数设置
• cropper：头像裁剪的例子
• blueTooth：蓝牙的例子，来自网友佑佑

faq 列表

• 1.如何获取文件的数据
• 2.打开系统wifi设置页面
• 3.沉浸式状态栏设置方法
• 4.上拉刷新下拉加载的启用禁止方法
• 5.如何设置相片分辨率
• 6.如何获取手机应用列表
• 7.可折叠列表的两个问题
• 8.5+webview与android原生Activity
• 9.获取APP系统权限和打开权限设置
• 10.录音文件与Base64编码相互转换的方法
• 11.nativejs调用android原生文件管理

推荐

• 基于 MUI 构建一个具有 90 +页面的APP应用

赞赏

整理这些demo和例子，花费了不少时间精力，如果觉得对你有用，不妨赞赏一下：

参与贡献

如果你也想参与进来分享其他的例子，你可以自己建立仓库自己维护然后将地址发给我，也可以将内容分享给我进行整理，详情可以通过邮件联系我，Emaile: [email protected]。

mui-demo's Issues

tabbar-with-iframe示例中，登录成功后返回并刷新个人中心页面怎么处理？

参照tabbar-with-iframe，实现浏览器环境的tab切换，个人中心页面进入登录页面，登录成功后返回并刷新个人中心页面，这个功能怎么处理？

calendar 使用的时候 month 和 year 切换不会变

calendar 使用的时候 month 和 year 切换不会变， 比如我切换到2018 12月份， 打印出来的还是 2017 年 3月

环信的图片上传还是在后台做比较好

现在这样在主页面和聊天页面都有连接这样比较奇怪吧。环信的连接和监听都在主页，然后通过自定义事件来发送短信，demo里没必要做图片发送，用input做发送体验很不好，选择照片那个弹出框很坑。发送消息、图片、语音、文件这些主要是通过后台来做，最好可以开发一个原生的组件出来，因为只有原生的才能视频聊天。只是一点小建议，你这样做的demo已经很好了

出错！！！plus.android.invoke(file,"listFiles");

Uncaught TypeError: Cannot read property 'length' of null at js/njs-io.js:70

蓝牙的demo，就算连上了蓝牙，打印出来还是失去连接

RT

tabbar-webview-withleftmenu中，底部tab来回多次切换，再切回首页，标题不变。解决办法如下。

将更换标题的代码：

//更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;

上移到判断语句(如下)上方即可。

// 判断当前点击tab
if (targetTab == activeTab) {
    return;
}

怎么有的demo在github，有的在rawgit.com，问题是rawgit.com打不开！！！

怎么有的demo在github，有的在rawgit.com，问题是rawgit.com打不开！！！
我想看时间轴的demo，打不开！打不开！打不开！

环信web im登陆问题

环信注册的时候注册成功，去后台也看到注册成功的用户，然后进登录界面进行登陆，密码输入错误的时候都有提示，但是输入成功的时候跳转为404页面，undefine，是怎么回事？

环信im

环信im的demo我注册不了，您是不是把key没加上？能加您个联系方式吗？最近在学这个，想请教您

“vue-mui：基于Vue.js的mui tabbar演示例子”中tab点击显示异常的问题

点击已选定的tab，当前页面反复闪烁，不能正常显示。
本人在tab点击方法中添加了如下代码：
// 判断当前点击tab
if(targetTab == this.activeTab) {
return;
}
是否可行？
新手，忘指点！