From bdfa9ac5450cdc012ee4b197b4a53efdf7be2964 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=94=E7=BA=A2=E4=BF=9D?= Date: 2017年7月24日 17:58:34 +0800 Subject: [PATCH 1/6] Update README.md --- README.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index ab9d03f..aedeac2 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,9 @@ 注意,所有开源项目并不是全部托管在当前工程下,点击如下开源项目,会自动跳转到对应代码托管地址。 ## 资讯类 -1. [新闻阅读器](https://github.com/dcloudio/casecode/tree/master/reader) -2. [JFinal社区](http://git.oschina.net/20110516/jfbbs_mui) -3. [开发者新闻APP](https://github.com/xland/DeveloperNews) -4. [红旅动漫](https://github.com/tomoya92/hltmapp-mui) +1. [新闻阅读器](https://github.com/dcloudio/casecode/tree/master/reader) +2. [开发者新闻APP](https://github.com/xland/DeveloperNews) +3. [红旅动漫](https://github.com/tomoya92/hltmapp-mui) ## 电商类 1. [灰狐E3](https://github.com/huihoo/e3-h5) From 1ec9287606a23dfb0a45056e1ce72af6586d948e Mon Sep 17 00:00:00 2001 From: nearwmy <1137650620@qq.com> Date: Fri, 8 Sep 2017 14:57:35 +0800 Subject: [PATCH 2/6] =?UTF-8?q?=E6=9B=B4=E6=96=B0nativetab?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nativetab/README.md | 15 +- nativetab/html/tab-webview-subpage-about.html | 47 ---- nativetab/html/tab-webview-subpage-chat.html | 2 +- .../html/tab-webview-subpage-contact.html | 2 +- nativetab/index.html | 251 ++++++++---------- nativetab/js/util.js | 107 ++++++++ nativetab/manifest.json | 10 +- nativetab/unpackage/.confirmed_dependencies | 7 +- 8 files changed, 230 insertions(+), 211 deletions(-) delete mode 100644 nativetab/html/tab-webview-subpage-about.html create mode 100644 nativetab/js/util.js 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 @@ - - - - - - Hello MUI - - - - - - - - -

Hello MUI

-
-
-

这是使用nativeObj 原生控件绘制的底部选项卡示例,当前为第一个子页面;

-

选项卡常用于App首页,为加快渲染,原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的;

-

选项卡图标使用字体绘制,点击可切换对应选项卡的高亮状态,开发者可自定义相应的点击事件;

-

本示例中,点击第二个选项卡打开一个支持下拉刷新的webview;点击第四个选项卡,打开一个新窗口。

- -

中间悬浮大球图标,因涉及屏幕分辨率动态计算,目前是在首页plusReady事件中实现绘制的。该悬浮大球支持点击事件,开发者可定制实现对应的点击逻辑。

- -

为提高性能,本示例选项卡图标全部使用字体文件绘制(推荐),实际使用中也可以使用图片绘制。

-
-
-

AltStyle によって変換されたページ (->オリジナル) /

- - - - \ 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 @@
- 这是subNView模式选项卡中的第2个子页面,该页面展示一个支持单webview模式的下拉刷新、上拉加载的消息列表 + 这是subNView模式选项卡中的第1个子页面,该页面展示一个支持单webview模式的下拉刷新、上拉加载的消息列表
  • 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 @@
    - 这是subNView模式选项卡中的第3个子页面,该页面展示一个通讯录示例 + 这是subNView模式选项卡中的第2个子页面,该页面展示一个通讯录示例
      diff --git a/nativetab/index.html b/nativetab/index.html index 1c594e4..4c42d18 100644 --- a/nativetab/index.html +++ b/nativetab/index.html @@ -1,39 +1,53 @@ + 首页 + - + - + + \ 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 || 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": [] }, From bbf476f53391ba85d19c6655ed53149d0a1d7182 Mon Sep 17 00:00:00 2001 From: nearwmy <1137650620@qq.com> Date: 2017年12月20日 12:13:38 +0800 Subject: [PATCH 3/6] =?UTF-8?q?=E5=8E=9F=E7=94=9F=E5=BA=95=E9=83=A8?= =?UTF-8?q?=E9=80=89=E9=A1=B9=E5=8D=A1=E6=B7=BB=E5=8A=A0=E6=A8=AA=E7=AB=96?= =?UTF-8?q?=E5=B1=8F=E5=88=87=E6=8D=A2=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- nativetab/index.html | 417 ++++++++++++++++++++++--------------------- 1 file changed, 218 insertions(+), 199 deletions(-) diff --git a/nativetab/index.html b/nativetab/index.html index 4c42d18..8dc70b0 100644 --- a/nativetab/index.html +++ b/nativetab/index.html @@ -1,204 +1,223 @@ - - - - 首页 - - - - - - -
      -
      -

      这是使用nativeObj 原生控件绘制的底部选项卡示例,当前为父页面,显示第一个tab项内容;

      -

      这里采用将第一个tab项内容放在父页面显示,因为是入口页面,会在启动中进行渲染,使首页显示速度更快

      -

      选项卡常用于App首页,为加快渲染,原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的;

      -

      选项卡图标使用字体绘制,点击可切换对应选项卡的高亮状态,开发者可自定义相应的点击事件;

      -

      本示例中,点击第二个选项卡打开一个支持下拉刷新的webview;点击第四个选项卡,打开一个新窗口。

      - -

      中间悬浮大球图标,因涉及屏幕分辨率动态计算,目前是在首页plusReady事件中实现绘制的。该悬浮大球支持点击事件,开发者可定制实现对应的点击逻辑。

      - -

      为提高性能,本示例选项卡图标全部使用字体文件绘制(推荐),实际使用中也可以使用图片绘制。

      -
      -
      - - - - + + + + 首页 + + + + + + +
      +
      +

      这是使用nativeObj 原生控件绘制的底部选项卡示例,当前为父页面,显示第一个tab项内容;

      +

      这里采用将第一个tab项内容放在父页面显示,因为是入口页面,会在启动中进行渲染,使首页显示速度更快

      +

      选项卡常用于App首页,为加快渲染,原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的;

      +

      选项卡图标使用字体绘制,点击可切换对应选项卡的高亮状态,开发者可自定义相应的点击事件;

      +

      本示例中,点击第二个选项卡打开一个支持下拉刷新的webview;点击第四个选项卡,打开一个新窗口。

      +

      中间悬浮大球图标,因涉及屏幕分辨率动态计算,目前是在首页plusReady事件中实现绘制的。该悬浮大球支持点击事件,开发者可定制实现对应的点击逻辑。

      +

      为提高性能,本示例选项卡图标全部使用字体文件绘制(推荐),实际使用中也可以使用图片绘制。

      +
      +
      + + + \ No newline at end of file From 7de6549586d060a8b00a818dff2e317bd2e944b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=94=E7=BA=A2=E4=BF=9D?= Date: 2018年4月19日 16:16:03 +0800 Subject: [PATCH 4/6] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=97=AA=E8=AF=BB?= =?UTF-8?q?=E7=9C=8B=E4=B9=A6=E5=BC=80=E6=BA=90=E9=A1=B9=E7=9B=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index aedeac2..5d71961 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ 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) From d4887e6a29ef8eaeb2d64cf9819c45c96b23fa53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=94=E7=BA=A2=E4=BF=9D?= Date: 2018年8月10日 18:05:21 +0800 Subject: [PATCH 5/6] Update README.md --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5d71961..a2b17ee 100644 --- a/README.md +++ b/README.md @@ -12,12 +12,15 @@ ## 电商类 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 MUI](https://github.com/dcloudio/mui/tree/master/examples/hello-mui):展示mui的基础控件、通用模板等 ## 常用模板类 1. [登录模板](https://github.com/dcloudio/mui/tree/master/examples/login) From 38d07a044a5efbba866338b3d95f4eddc2a34d50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B4=94=E7=BA=A2=E4=BF=9D?= Date: 2018年11月11日 12:09:10 +0800 Subject: [PATCH 6/6] Update README.md --- README.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index a2b17ee..a740ac1 100644 --- a/README.md +++ b/README.md @@ -20,11 +20,16 @@ 2. [卉卉打卡](https://github.com/0312birdzhang/huihuisignin) ## 能力展示类 -1. [Hello MUI](https://github.com/dcloudio/mui/tree/master/examples/hello-mui):展示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)