Code Monkey home page Code Monkey logo

qmsggg_mui_developer's Introduction

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

说明

本仓库会记录自己学习MUI开发的过程，欢迎各位fork and push。

资源收集

官方分类文档

其他学习资源

MUI开发之旅

为什么要学习MUI框架？

性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题，这些都让HTML5开发者倍感挫败，尤其拿到Android低端机运行，摔手机的心都有； 另一方面，浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。 mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。

同时自己利用业余时间，希望从这个学习开始能让自己最后在跨平台开发的路上越走越远。根据自己的合理安排，希望自己能用10天的时间能完全掌握MUI框架的使用，能独立开发一款DEMO APP！.如果想成为一个全栈工程师还是应该要好好学习js，后续出一个js学习计划，合理安排时间，最后能结合MUI等框架实现移动端，web等的跨平台开发。

怎么学习MUI框架？

学习方法

因为以前断断续续的学习了一些基础知识，这次就直接从APP拆分开始，从example中学习基础知识的应用，在拆分demo的时候要通过不断查找资料，最后能达到熟练掌握基础知识的目的

输出

  • 总结文档
    • MUI框架的优势、劣势、以及改进的地方
  • 仿开源**APP开发

完成程度

  • 能完成复杂APP的开发

时间花费

  • 1个月

进度管理

qmsggg_mui_developer's People

Contributors

qmsggg avatar

Forkers

cardinals

qmsggg_mui_developer's Issues

关于MUI获取原生头部VIew显示不出来的问题解决

配置文件：

"launchwebview": {
			"titleNView": {
				"backgroundcolor": "#f7f7f7",
				"titletext": "首页",
				"titlecolor": "#000000"
			}
		},

添加View代码

//绘制顶部图标
				_self = plus.webview.currentWebview();
				var titleView = _self.getTitleNView();
				console.log(titleView);
				if(!titleView) {
					titleView = plus.webview.getLaunchWebview().getTitleNView();
				}
				console.log(titleView);
				titleView.drawRect("#cccccc", {
					top: "43px",
					height: "1px",
					left: "0px"
				}); //绘制底部边线

				//开启回弹
				_self.setStyle({
					bounce: "vertical",
					bounceBackground: "#efeff4",
					popGesture: 'none' //首页有侧滑菜单，因此屏蔽首页的侧滑关闭功能
				});

解决办法：

删除APP重新生成并按装

移动终端h5页面常用的meta属性 

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

解释：
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
在web app应用下状态条（屏幕顶部条）的颜色；
默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。

参考：移动终端H5页面meta标签的设置案例

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.