# mui-demo

**Repository Path**: junhu11/mui-demo

## Basic Information

- **Project Name**: mui-demo
- **Description**: 一个关于mui的demo仓库。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2021-04-12
- **Last Updated**: 2025-03-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mui-demo

[mui](http://dev.dcloud.net.cn/mui/)——最接近原生APP体验的高性能前端框架，是基于html5plus(简称5+或html5+)的一个UI框架。

## 说明

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

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

## 博客教程

[MUI从入门到精通](https://segmentfault.com/blog/zhaomenghuan)系列文章：

- [mui初级入门教程（一）— 小白入手mui的学习路线](https://segmentfault.com/a/1190000005173713)
- [mui初级入门教程（二）— html5+ webview 底部栏用法详解](https://segmentfault.com/a/1190000005340854)
- [mui初级入门教程（三）— html5+ XMLHttpRequest 与mui ajax用法详解](https://segmentfault.com/a/1190000005589813)
- [mui初级入门教程（四）— 再谈webview，从小白变“大神”！](https://segmentfault.com/a/1190000005651279) 
- [mui初级入门教程（五）— 聊聊即时通讯（IM），基于环信 web im SDK](https://segmentfault.com/a/1190000005729743)
- [mui初级入门教程（六）— 模板页面实现原理及多端适配指南](https://segmentfault.com/a/1190000006077506)
- [mui初级入门教程（七）— 基于native.js的文件系统管理功能实现](https://segmentfault.com/a/1190000006149212)
- [HTML5+ APP页面传参详解](http://ask.dcloud.net.cn/article/795)
- [mui组件通用CSS类](http://ask.dcloud.net.cn/article/818)
- [录音文件与Base64编码相互转换的方法](http://ask.dcloud.net.cn/article/841)

## 视频讲座

- [html5+ App开发工程化实践之路](https://segmentfault.com/l/1500000009542402?r=bPqXdU)
- [html5+ App开发之 Android 平台离线集成 5+ SDK](https://segmentfault.com/l/1500000010042078?r=bPqXdU)

## demo列表

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

## faq 列表

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

## 推荐

- [基于 MUI 构建一个具有 90 +页面的APP应用](https://github.com/EasyTuan/mui-kidApp)

## 赞赏

整理这些demo和例子，花费了不少时间精力，如果觉得对你有用，不妨赞赏一下：
![](https://segmentfault.com/img/bVxRdQ?w=612&h=384)

## 参与贡献

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