实例介绍
【实例简介】
- 客户端 基于 mui hbuilder 的 Hybrid App
- 服务端采用 ASP.NET MVC5， API调用采用oauth2.0 授权访问
【实例截图】
【核心代码】
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> | |
| <title>蹲坑宝典</title> | |
| <link href="css/mui.min.css" rel="stylesheet"/> | |
| <link href="css/font-awesome.min.css" rel="stylesheet" /> | |
| <link href="css/style.css" rel="stylesheet" /> | |
| <script src="js/mui.min.js"></script> | |
| <script src="js/common/basepage.js"></script> | |
| <script src="js/common/update.js"></script> | |
| </head> | |
| <body> | |
| <nav class="bottom-nav mui-bar mui-bar-tab" id="mui-bottom"> | |
| <a class="mui-tab-item mui-active" href="list.html" id='list.html'> | |
| <span class="mui-icon fa fa-random"></span> | |
| <span class="mui-tab-label">穿越</span> | |
| </a> | |
| <a class="mui-tab-item" href="app/rank.html" id='app/rank.html'> | |
| <span class="mui-icon fa fa-list-alt"></span> | |
| <span class="mui-tab-label">排行</span> | |
| </a> | |
| <a class="mui-tab-item" href="app/discover.html" id='app/discover.html'> | |
| <span class="mui-icon fa fa-eye"></span> | |
| <span class="mui-tab-label">发现</span> | |
| </a> | |
| <a class="mui-tab-item" href="app/notes.html" id='app/notes.html'> | |
| <span class="mui-icon fa fa-send-o"></span> | |
| <span class="mui-tab-label">小纸条</span> | |
| </a> | |
| <a class="mui-tab-item" href="app/my.html" id='app/my.html'> | |
| <span class="mui-icon fa fa-user"></span> | |
| <span class="mui-tab-label">我的</span> | |
| </a> | |
| </nav> | |
| <script type="text/javascript" charset="utf-8"> | |
| mui.init(); | |
| var first = null; | |
| mui.back = function () { | |
| //首次按键，提示‘再按一次退出应用’ | |
| if (!first) { | |
| first = new Date().getTime(); | |
| mui.toast('再按一次退出应用'); | |
| setTimeout(function () { | |
| first = null; | |
| }, 1000); | |
| } else { | |
| if (new Date().getTime() - first < 1000) { | |
| plus.runtime.quit(); | |
| } | |
| } | |
| }; | |
| var subpages = ['list.html','app/rank.html','app/discover.html','app/notes.html','app/my.html']; | |
| var subpage_style = { | |
| bottom: '50px' | |
| }; | |
| //创建子页面，首个选项卡页面显示，其它均隐藏； | |
| mui.plusReady(function(){ | |
| var self = plus.webview.currentWebview(); | |
| for(var i=0;i<5;i ){ | |
| var sub = plus.webview.create(subpages[i],subpages[i],subpage_style,{preate:true}); | |
| if(i>0){ | |
| sub.hide(); | |
| } | |
| self.append(sub); | |
| } | |
| }); | |
| //当前激活选项 | |
| var activeTab = subpages[0]; | |
| //选项卡点击事件 | |
| mui('.mui-bar-tab').on('tap', 'a', function(e) { | |
| var targetTab = this.getAttribute('href'); | |
| if (targetTab == activeTab) { | |
| return; | |
| } | |
| //在”我的“页面之前判断是否注册登录 | |
| if (targetTab == subpages[4]) { | |
| if (databasepage.getItem("DKBD_USER") == null) { | |
| e.stopPropagation(); | |
| databasepage.openWin2('app/login.html', 'login', { preload: true }) | |
| return; | |
| } | |
| var wt=plus.webview.getWebviewById('app/my.html'); | |
| wt.evalJS('dataArr.init()'); | |
| } | |
| //显示目标选项卡 | |
| plus.webview.show(targetTab); | |
| //隐藏当前; | |
| plus.webview.hide(activeTab); | |
| //更改当前活跃的选项卡 | |
| activeTab = targetTab; | |
| }); | |
| //用户注册成功后直接跳到我的页面 | |
| function redicMy(){ | |
| var targetTab = 'app/my.html'; | |
| if (targetTab == activeTab) {//如果当前是我的页面，不处理 | |
| return; | |
| } | |
| var wt=plus.webview.getWebviewById(targetTab); | |
| wt.evalJS('dataArr.init()'); | |
| plus.webview.show(targetTab);//显示目标选项卡 | |
| plus.webview.hide(activeTab);//隐藏当前; | |
| document.getElementById(activeTab).className='mui-tab-item' | |
| activeTab = targetTab;//更改当前活跃的选项卡 | |
| document.getElementById(targetTab).className='mui-tab-item mui-active' | |
| } | |
| </script> | |
| </body> | |
| </html> |
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论