diff --git a/README.md b/README.md
index aedeac2..a740ac1 100644
--- a/README.md
+++ b/README.md
@@ -7,20 +7,29 @@
 1. [新闻阅读器](https://github.com/dcloudio/casecode/tree/master/reader)  
 2. [开发者新闻APP](https://github.com/xland/DeveloperNews)
 3. [红旅动漫](https://github.com/tomoya92/hltmapp-mui)
+4. [闪读看书](https://github.com/zuiyuewentian/Mui_ReadBook)
 
 ## 电商类
 1. [灰狐E3](https://github.com/huihoo/e3-h5) 
 
+## 社交类
+1.[卡牌对战](https://github.com/EasyTuan/mui-kidApp):基于 MUI 构建一个具有 90 +页面的APP应用
+
 ## 工具类
 1. [滴石](http://git.oschina.net/uikoo9/uikoo9-dishi)
 2. [卉卉打卡](https://github.com/0312birdzhang/huihuisignin)
 
 ## 能力展示类
-1. [Hello MUI](https://github.com/dcloudio/mui/tree/master/examples/hello-mui)
+1. [Hello uni-app](https://github.com/dcloudio/uni-app/tree/master/examples/hello-uniapp):展示uni-app的组件、API、模板等
+2. [Hello MUI](https://github.com/dcloudio/mui/tree/master/examples/hello-mui):展示mui的基础控件、通用模板等
+
 
 ## 常用模板类
-1. [登录模板](https://github.com/dcloudio/mui/tree/master/examples/login)
-2. [酒店预定](https://github.com/dcloudio/casecode/tree/master/hotel)
+1. [登录模板](https://github.com/dcloudio/mui/tree/master/examples/login) 基于mui项目的登录模板
+2. [登录模板](https://github.com/dcloudio/uni-app/tree/master/examples/login-template) 基于uni-app项目的登录模板
+3. [酒店预定](https://github.com/dcloudio/casecode/tree/master/hotel) 
+4. [图片App](https://github.com/dcloudio/uni-app/tree/master/examples/image-template) 使用uni-app开发的图片App模版,包含单列图、双列图,图片分类,图片轮播、预览、下载,图片分享、收藏,设置桌面背景图等功能
+
 
 ## 脚手架类
 1. [rayapp开发框架](https://github.com/dailc/hybrid_dcloud_rayapp)
diff --git a/nativetab/README.md b/nativetab/README.md
index 5ec3359..4c7be0c 100644
--- a/nativetab/README.md
+++ b/nativetab/README.md
@@ -1,15 +1,12 @@
-## nativeObj 模式底部选项卡 + webview 子窗口 实现示例
+## tab选项卡示例教程-nativeObj原生模式tab(含底部凸起大图标)
 ## 概述
 
 这是一个利用原生view控件绘制底部选项卡的示例,有以下几个特点:
-
-1.操作简单:选项卡常用于App首页,为加快渲染,首页的原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的;
-
-2.绘制内容支持字体,图片,矩形区域
-
-3.开发者自定义选项卡点击事件
-
-4.同样支持页内手动绘制 view 控件,也就是说在非首页也可以使用此方法,参考示例:底部选项卡中央凸起悬浮大图标的绘制
+1.首页显示第一个tab项内容,其余tab项内容为首页的子窗口,相比创建四个子窗口,显示速度更快,占用内存更少,消耗性能更小。
+2.操作简单:选项卡常用于App首页,为加快渲染,首页的原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的;
+3.绘制内容支持字体,图片,矩形区域
+4.开发者自定义选项卡点击事件
+5.同样支持页内手动绘制 view 控件,也就是说在非首页也可以使用此方法,参考示例:底部选项卡中央凸起悬浮大图标的绘制
 
 #### 说明:中央凸起悬浮大图标,因涉及屏幕分辨率动态计算和为给出开发者页内手动绘制的示例的原因,放在首页plusReady事件中实现绘制的。该悬浮大图标支持点击事件,开发者可定制实现对应的点击逻辑。
 
diff --git a/nativetab/html/tab-webview-subpage-about.html b/nativetab/html/tab-webview-subpage-about.html
deleted file mode 100644
index 137c9b4..0000000
--- a/nativetab/html/tab-webview-subpage-about.html
+++ /dev/null
@@ -1,47 +0,0 @@
-<!doctype html>
-<html>
-
-	<head>
<link rel="stylesheet" href="/common/contrast.css" type="text/css" media="all" />
<meta name="robots" content="noindex,nofollow">
<meta name="robots" content="none">
<meta name="robots" content="noarchive">
<meta name="Googlebot" content="noarchive">

-		<meta charset="utf-8">
-		<title>Hello MUI</title>
-		<meta name="viewport" content=" initial-scale=1,maximum-scale=1,user-scalable=no">
-		<meta name="apple-mobile-web-app-capable" content="yes">
-		<meta name="apple-mobile-web-app-status-bar-style" content="black">
-
-		
-		
-	</head>
-
-	<body><div class="naked_container"><h1>Hello MUI</h1>
-		<div>
-			<div>
-				<p>这是使用nativeObj 原生控件绘制的底部选项卡示例,当前为第一个子页面;</p>
-				<p>选项卡常用于App首页,为加快渲染,原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的;</p>
-				<p>选项卡图标使用字体绘制,点击可切换对应选项卡的高亮状态,开发者可自定义相应的点击事件;</p>
-				<p>本示例中,点击第二个选项卡打开一个支持下拉刷新的webview;点击第四个选项卡,打开一个新窗口。</p>
-				
-				<p>中间悬浮大球图标,因涉及屏幕分辨率动态计算,目前是在首页plusReady事件中实现绘制的。该悬浮大球支持点击事件,开发者可定制实现对应的点击逻辑。</p>
-					
-				<p>为提高性能,本示例选项卡图标全部使用字体文件绘制(推荐),实际使用中也可以使用图片绘制。</p>
-			</div>
-		</div>
-	</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://github.com/wolf521/casecode/compare/master...dcloudio:casecode:master.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://github.com/wolf521/casecode/compare/master...dcloudio:casecode:master.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>		
</body>
-	
-	
-
-</html>
\ No newline at end of file
diff --git a/nativetab/html/tab-webview-subpage-chat.html b/nativetab/html/tab-webview-subpage-chat.html
index b3ffe1b..25ec061 100644
--- a/nativetab/html/tab-webview-subpage-chat.html
+++ b/nativetab/html/tab-webview-subpage-chat.html
@@ -27,7 +27,7 @@
 		<div id="pullrefresh">
 			<div>
 				<div>
-					这是subNView模式选项卡中的第2个子页面,该页面展示一个支持单webview模式的下拉刷新、上拉加载的消息列表
+					这是subNView模式选项卡中的第1个子页面,该页面展示一个支持单webview模式的下拉刷新、上拉加载的消息列表
 				</div>
 				<ul>
 					<li>
diff --git a/nativetab/html/tab-webview-subpage-contact.html b/nativetab/html/tab-webview-subpage-contact.html
index 9625ff0..23cb4ae 100644
--- a/nativetab/html/tab-webview-subpage-contact.html
+++ b/nativetab/html/tab-webview-subpage-contact.html
@@ -49,7 +49,7 @@
 	<body>
 		<div>
 			<div>
-				这是subNView模式选项卡中的第3个子页面,该页面展示一个通讯录示例
+				这是subNView模式选项卡中的第2个子页面,该页面展示一个通讯录示例
 			</div>
 
 			<ul>
diff --git a/nativetab/index.html b/nativetab/index.html
index 1c594e4..8dc70b0 100644
--- a/nativetab/index.html
+++ b/nativetab/index.html
@@ -1,247 +1,223 @@
 <!doctype html>
 <html>
-	<head>
-		<meta charset="UTF-8">
-		<meta name="viewport" content="" />
-		<title>首页</title>
-		
-		
-	</head>
-	
-	<body>
-		
+ 
+ 
+</head>
 
-				/**
-				 * 凸起图标最后创建 浮在最顶层
-				 *	id为iconBg的红色背景图
-				 * 	id为icon的字体图标
-				 * 	
-				 */
-				var drawNativeIcon = drawNative('tabIcon', {
-					bottom: '10px',
-					left: leftPos + 5 + 'px',
-					width: '50px',
-					height: '50px',
-					position:'dock' //此种停靠方式表明该控件应浮在窗口最上层,以免被其他窗口遮住
-				}, [{
-					tag: 'rect',
-					id: 'iconBg',
-					position: {
-						top: '0px',
-						left: '0px',
-						width: '50px',
-						height: '100%'
-					},
-					rectStyles: {
-						color: '#d74b28',
-						size: '50px',
-						radius:'50%'
-					}
-				},{
-					tag: 'font',
-					id: 'icon',
-					text: '\ue600', //此为字体图标Unicode码'\e600'转换为'\ue600'
-					position: {
-						top: '0px',
-						left: '0px',
-						width: '50px',
-						height: '100%'
-					},
-					textStyles: {
-						fontSrc: '_www/fonts/iconfont.ttf',
-						align:'center',
-						color: '#fff',
-						size: '30px'
-					}
-				}]);
-				// append 到父webview中
-				self.append(drawNativeIconBg);
-				self.append(drawNativeIcon);
-				
-				//自定义监听图标点击事件
-				drawNativeIcon.addEventListener('click', function(e) {
-					mui.alert('你点击了图标,你在此可以打开摄像头或者新窗口等自定义点击事件。','悬浮球点击事件');
-				});
-				
-				//创建子webview窗口 并初始化
-				for(var i = 0; i < 3; i++) { - var temp = {}; - if(!plus.webview.getWebviewById(subpages[i])) { - var sub = plus.webview.create(subpages[i], subpages[i], subpage_style); - if(i> 0) {
-							sub.hide();
-						} else {
-							temp[subpages[i]] = "true";
-							mui.extend(aniShow, temp);
-							toggleNview(self.getStyle().subNViews[0], 0);
-						}
-						// append到当前父webview
-						self.append(sub);
-					}
-				}
-				var activePage = plus.webview.getWebviewById(subpages[0]);
-				
-				//给每个view 添加监听点击切换
-				for(var i = 0; i < 4; i++){ - nviews[i].addEventListener('click', clickEvent, false); - } - +<body>
+ <div>
+ <div>
+ <p>这是使用nativeObj 原生控件绘制的底部选项卡示例,当前为父页面,显示第一个tab项内容;</p>
+ <p>这里采用将第一个tab项内容放在父页面显示,因为是入口页面,会在启动中进行渲染,使首页显示速度更快</p>
+ <p>选项卡常用于App首页,为加快渲染,原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的;</p>
+ <p>选项卡图标使用字体绘制,点击可切换对应选项卡的高亮状态,开发者可自定义相应的点击事件;</p>
+ <p>本示例中,点击第二个选项卡打开一个支持下拉刷新的webview;点击第四个选项卡,打开一个新窗口。</p>
+ <p>中间悬浮大球图标,因涉及屏幕分辨率动态计算,目前是在首页plusReady事件中实现绘制的。该悬浮大球支持点击事件,开发者可定制实现对应的点击逻辑。</p>
+ <p>为提高性能,本示例选项卡图标全部使用字体文件绘制(推荐),实际使用中也可以使用图片绘制。</p>
+ </div>
+ </div>
+ 
+ 
+</body>
 
-				function updateSubNView(obj) {
-					self.updateSubNViews([{
-						id: obj.id,
-						tags: [{
-							tag: 'font', //obj.tag
-							id: obj.id + 1,
-							position: obj.tags[0].position,
-							text: obj.tags[0].text,
-							textStyles: changeColor(obj.tags[0].textStyles, normal_color)
-						}, {
-							tag: 'font',
-							id: obj.id + 2,
-							position: obj.tags[1].position,
-							text: obj.tags[1].text,
-							textStyles: changeColor(obj.tags[1].textStyles, normal_color)
-						}]
-					}])
-				}
-			});
-		</script>
-	</body>
 </html>
\ No newline at end of file
diff --git a/nativetab/js/util.js b/nativetab/js/util.js
new file mode 100644
index 0000000..78c35f5
--- /dev/null
+++ b/nativetab/js/util.js
@@ -0,0 +1,107 @@
+var util = {
+	options: {
+		active_color:'#007aff',
+		normal_color:'#000',
+		subpages:['html/tab-webview-subpage-chat.html', 'html/tab-webview-subpage-contact.html']
+	},
+	/**
+	 * 简单封装了绘制原生view控件的方法
+	 * 绘制内容支持font(文本,字体图标),图片img , 矩形区域rect
+	 */
+	drawNative: function(id, styles, tags) {
+		var view = new plus.nativeObj.View(id, styles, tags);
+		return view;
+	},
+	/**
+	 * 初始化首个tab窗口 和 创建子webview窗口 
+	 */
+	initSubpage: function() {
+		var subpage_style = {
+				top: '0px',
+				bottom: '51px'
+			},
+			subpages = util.options.subpages,
+			self = plus.webview.currentWebview(),
+			temp = {};
+			// 初始化第一个tab项为首次显示
+			temp[self.id] = "true";
+			mui.extend(aniShow, temp);
+			// 初始化绘制首个tab按钮
+			util.toggleNview(self.getStyle().subNViews[0], 0);
+			
+		for(var i = 0, len = subpages.length; i < len; i++) {
+			
+			if(!plus.webview.getWebviewById(subpages[i])) {
+				var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
+				//初始化隐藏
+				sub.hide();
+				// append到当前父webview
+				self.append(sub);
+			}
+		}
+	},
+	/**	
+	 * 点击切换tab窗口 
+	 */
+	changeSubpage: function(targetPage, activePage) {
+		//若为iOS平台或非首次显示,则直接显示
+		if(mui.os.ios &#124;&#124; aniShow[targetPage]) {
+			plus.webview.show(targetPage);
+		} else {
+			//否则,使用fade-in动画,且保存变量
+			var temp = {};
+			temp[targetPage] = "true";
+			mui.extend(aniShow, temp);
+			plus.webview.show(targetPage, "fade-in", 300);
+		}
+		//隐藏当前 除了第一个父窗口
+		if(activePage !== plus.webview.getLaunchWebview()){
+			plus.webview.hide(activePage);			
+		}
+	},
+	/**
+	 * 点击重绘底部tab (view控件)
+	 */
+	toggleNview: function(currObj, currIndex) {
+		var self = plus.webview.currentWebview();
+		// 重绘当前nview
+		util.updateSubNView(self.getStyle().subNViews[currIndex],util.options.active_color);
+		// 重绘兄弟nview
+		for(var i = 0; i < 4; i++) {
+			var viewObj = self.getStyle().subNViews[i];
+
+			if(i !== currIndex) {
+				util.updateSubNView(viewObj,util.options.normal_color);
+			}
+		}
+	},
+	/*
+	 * 改变颜色
+	 */
+	changeColor: function(obj, color) {
+		obj.color = color;
+		return obj
+	},
+	/*
+	 * 利用 webview 提供的 updateSubNViews 方法更新 view 控件
+	 */
+	updateSubNView: function(obj,color) {
+		var self = plus.webview.currentWebview();
+		self.updateSubNViews([{
+			id: obj.id,
+			tags: [{
+				tag: 'font', //此处直接赋值因为已知需要更新的tag 类型,不是固定值,请注意
+				id: obj.id + 1,
+				position: obj.tags[0].position,
+				text: obj.tags[0].text,
+				textStyles: util.changeColor(obj.tags[0].textStyles, color)
+			}, {
+				tag: 'font',
+				id: obj.id + 2,
+				position: obj.tags[1].position,
+				text: obj.tags[1].text,
+				textStyles: util.changeColor(obj.tags[1].textStyles, color)
+			}]
+		}]);
+	}
+};
\ No newline at end of file
diff --git a/nativetab/manifest.json b/nativetab/manifest.json
index 8a83f45..ecbf4e8 100644
--- a/nativetab/manifest.json
+++ b/nativetab/manifest.json
@@ -4,7 +4,7 @@
 		"iPhone",
 		"iPad"
 	],
-	"id": "H52221B8C",/*应用的标识,创建应用时自动生成,勿手动修改*/
+	"id": "mui_template_nativetab",/*应用的标识,创建应用时自动生成,勿手动修改*/
 	"name": "nativeObj模式底部选项卡",/*应用名称,程序桌面图标名称*/
 	"version": {
 		"name": "1.0",/*应用版本名称*/
@@ -428,10 +428,11 @@
 					"css/mui.min.css",
 					"html/tab-webview-subpage-about.html",
 					"fonts/mui.ttf",
-					"fonts/iconfont.ttf"
+					"fonts/iconfont.ttf",
+					"html/tab-webview-subpage-chat.html",
+					"js/util.js"
 				],
 				"refer": [
-					"html/tab-webview-subpage-chat.html",
 					"html/tab-webview-subpage-contact.html",
 					"html/new-webview.html"
 				],
@@ -462,7 +463,8 @@
 			"html/tab-webview-subpage-about.html": {
 				"resources": [
 					"css/mui.min.css",
-					"js/mui.min.js"
+					"js/mui.min.js",
+					"js/util.js"
 				],
 				"refer": [],
 				"priority": 0
diff --git a/nativetab/unpackage/.confirmed_dependencies b/nativetab/unpackage/.confirmed_dependencies
index 2c5e5a0..e141fe1 100644
--- a/nativetab/unpackage/.confirmed_dependencies
+++ b/nativetab/unpackage/.confirmed_dependencies
@@ -5,7 +5,9 @@
 "css/mui.min.css",
 "html/tab-webview-subpage-about.html",
 "fonts/mui.ttf",
- "fonts/iconfont.ttf"
+ "fonts/iconfont.ttf",
+ "js/util.js",
+ "html/tab-webview-subpage-chat.html"
 ],
 "refer": [
 "html/tab-webview-subpage-setting.html",
@@ -39,7 +41,8 @@
 "html/tab-webview-subpage-about.html": {
 "resources": [
 "css/mui.min.css",
- "js/mui.min.js"
+ "js/mui.min.js",
+ "js/util.js"
 ],
 "refer": []
 },
