123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Hello MUI</title>
- <meta name="viewport" content="width=device-width, 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">
- <link rel="stylesheet" href="../css/mui.min.css">
- <style>
- html,
- body {
- background-color: #efeff4;
- }
- .mui-views,
- .mui-view,
- .mui-pages,
- .mui-page,
- .mui-page-content {
- position: absolute;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- width: 100%;
- height: 100%;
- background-color: #efeff4;
- }
- .mui-pages {
- top: 46px;
- height: auto;
- }
- .mui-scroll-wrapper,
- .mui-scroll {
- background-color: #efeff4;
- }
- .mui-page.mui-transitioning {
- -webkit-transition: -webkit-transform 300ms ease;
- transition: transform 300ms ease;
- }
- .mui-page-left {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- .mui-ios .mui-page-left {
- -webkit-transform: translate3d(-20%, 0, 0);
- transform: translate3d(-20%, 0, 0);
- }
- .mui-navbar {
- position: fixed;
- right: 0;
- left: 0;
- z-index: 10;
- height: 44px;
- background-color: #f7f7f8;
- }
- .mui-navbar .mui-bar {
- position: absolute;
- background: transparent;
- text-align: center;
- }
- .mui-android .mui-navbar-inner.mui-navbar-left {
- opacity: 0;
- }
- .mui-ios .mui-navbar-left .mui-left,
- .mui-ios .mui-navbar-left .mui-center,
- .mui-ios .mui-navbar-left .mui-right {
- opacity: 0;
- }
- .mui-navbar .mui-btn-nav {
- -webkit-transition: none;
- transition: none;
- -webkit-transition-duration: .0s;
- transition-duration: .0s;
- }
- .mui-navbar .mui-bar .mui-title {
- display: inline-block;
- width: auto;
- }
- .mui-page-shadow {
- position: absolute;
- right: 100%;
- top: 0;
- width: 16px;
- height: 100%;
- z-index: -1;
- content: '';
- }
- .mui-page-shadow {
- background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
- background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
- }
- .mui-navbar-inner.mui-transitioning,
- .mui-navbar-inner .mui-transitioning {
- -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
- transition: opacity 300ms ease, transform 300ms ease;
- }
- .mui-page {
- display: none;
- }
- .mui-pages .mui-page {
- display: block;
- }
- .mui-page .mui-table-view:first-child {
- margin-top: 15px;
- }
- .mui-page .mui-table-view:last-child {
- margin-bottom: 30px;
- }
- .mui-table-view {
- margin-top: 20px;
- }
-
- .mui-table-view span.mui-pull-right {
- color: #999;
- }
- .mui-table-view-divider {
- background-color: #efeff4;
- font-size: 14px;
- }
- .mui-table-view-divider:before,
- .mui-table-view-divider:after {
- height: 0;
- }
- .head {
- height: 40px;
- }
- #head {
- line-height: 40px;
- }
- .head-img {
- width: 40px;
- height: 40px;
- }
- #head-img1 {
- position: absolute;
- bottom: 10px;
- right: 40px;
- width: 40px;
- height: 40px;
- }
- .update {
- font-style: normal;
- color: #999999;
- margin-right: -25px;
- font-size: 15px
- }
- .mui-fullscreen {
- position: fixed;
- z-index: 20;
- background-color: #000;
- }
- .mui-ios .mui-navbar .mui-bar .mui-title {
- position: static;
- }
- /*问题反馈在setting页面单独的css*/
- #feedback .mui-popover{
- position: fixed;
- }
- #feedback .mui-table-view:last-child {
- margin-bottom: 0px;
- }
- #feedback .mui-table-view:first-child {
- margin-top: 0px;
- }
-
- .mui-plus.mui-plus-stream .mui-stream-hidden{
- display: none !important;
- }
-
- /*问题反馈在setting页面单独的css==end*/
-
- </style>
- <link rel="stylesheet" type="text/css" href="../css/feedback.css" />
- </head>
- <body class="mui-fullscreen">
- <!--页面主结构开始-->
- <div id="app" class="mui-views">
- <div class="mui-view">
- <div class="mui-navbar">
- </div>
- <div class="mui-pages">
- </div>
- </div>
- </div>
- <!--页面主结构结束-->
- <!--单页面开始-->
- <div id="setting" class="mui-page">
- <!--页面标题栏开始-->
- <div class="mui-navbar-inner mui-bar mui-bar-nav">
- <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
- <span class="mui-icon mui-icon-left-nav"></span>
- </button>
- <h1 class="mui-center mui-title">设置</h1>
- </div>
- <!--页面标题栏结束-->
- <!--页面主内容区开始-->
- <div class="mui-page-content">
- <div class="mui-scroll-wrapper">
- <div class="mui-scroll">
- <ul class="mui-table-view mui-table-view-chevron">
- <li class="mui-table-view-cell mui-media">
- <a class="mui-navigate-right" href="#account">
- <img class="mui-media-object mui-pull-left head-img" id="head-img" src="">
- <div class="mui-media-body">
- Hello MUI
- <p class='mui-ellipsis'>账号:hellomui</p>
- </div>
- </a>
- </li>
- </ul>
- <ul class="mui-table-view mui-table-view-chevron">
- <li class="mui-table-view-cell">
- <a href="#account" class="mui-navigate-right">账号与安全</a>
- </li>
- </ul>
- <ul class="mui-table-view mui-table-view-chevron">
- <li class="mui-table-view-cell">
- <a href="#notifications" class="mui-navigate-right">新消息通知</a>
- </li>
- <li class="mui-table-view-cell">
- <a href="#privacy" class="mui-navigate-right">隐私</a>
- </li>
- <li class="mui-table-view-cell">
- <a href="#general" class="mui-navigate-right">通用</a>
- </li>
- </ul>
- <ul class="mui-table-view mui-table-view-chevron">
- <li class="mui-table-view-cell">
- <a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V3.1.0</i></a>
- </li>
- </ul>
- <ul class="mui-table-view">
- <li class="mui-table-view-cell" style="text-align: center;">
- <a>退出登录</a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <!--页面主内容区结束-->
- </div>
- <!--单页面结束-->
- <div id="account" class="mui-page">
- <div class="mui-navbar-inner mui-bar mui-bar-nav">
- <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
- <span class="mui-icon mui-icon-left-nav"></span>设置
- </button>
- <h1 class="mui-center mui-title">账号与安全</h1>
- </div>
- <div class="mui-page-content">
- <div class="mui-scroll-wrapper">
- <div class="mui-scroll">
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- <a id="head" class="mui-navigate-right">头像
- <span class="mui-pull-right head">
- <img class="head-img mui-action-preview" id="head-img1" src=""/>
- </span>
- </a>
- </li>
- <li class="mui-table-view-cell">
- <a>姓名<span class="mui-pull-right">Hbuilder</span></a>
- </li>
- <li class="mui-table-view-cell">
- <a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
- </li>
- </ul>
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- <a>QQ号<span class="mui-pull-right">88888888</span></a>
- </li>
- <li class="mui-table-view-cell">
- <a>手机号<span class="mui-pull-right">18601234567</span></a>
- </li>
- <li class="mui-table-view-cell">
- <a>邮箱地址<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div id="notifications" class="mui-page">
- <div class="mui-navbar-inner mui-bar mui-bar-nav">
- <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
- <span class="mui-icon mui-icon-left-nav"></span>设置
- </button>
- <h1 class="mui-center mui-title">新消息通知</h1>
- </div>
- <div class="mui-page-content">
- <div class="mui-scroll-wrapper">
- <div class="mui-scroll">
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- <a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
- </li>
- </ul>
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- 通知显示消息详情
- <div class="mui-switch mui-active mui-switch-mini">
- <div class="mui-switch-handle"></div>
- </div>
- </li>
- </ul>
- <div class="mui-content-padded">
- <p>若关闭,当收到新消息时,通知提示将不显示发信人和内容摘要</p>
- </div>
- <ul class="mui-table-view mui-table-view-chevron">
- <li class="mui-table-view-cell">
- <a href="#notifications_disturb" class="mui-navigate-right">功能消息免打扰</a>
- </li>
- </ul>
- <div class="mui-content-padded">
- <p>设置系统功能消息提示声音和震动的时段</p>
- </div>
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- <a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
- </li>
- </ul>
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- 声音
- <div class="mui-switch mui-active mui-switch-mini">
- <div class="mui-switch-handle"></div>
- </div>
- </li>
- <li class="mui-table-view-cell">
- 震动
- <div class="mui-switch mui-active mui-switch-mini">
- <div class="mui-switch-handle"></div>
- </div>
- </li>
- </ul>
- <div class="mui-content-padded">
- <p>当HelloMUI在运行时,你可以设置是否需要声音或者震动</p>
- </div>
- <div></div>
- </div>
- </div>
- </div>
- </div>
- <div id="notifications_disturb" class="mui-page">
- <div class="mui-navbar-inner mui-bar mui-bar-nav">
- <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
- <span class="mui-icon mui-icon-left-nav"></span>新消息通知
- </button>
- <h1 class="mui-center mui-title">功能消息免打扰</h1>
- </div>
- <div class="mui-page-content">
- <div class="mui-scroll-wrapper">
- <div class="mui-scroll">
- <ul class="mui-table-view mui-table-view-radio">
- <li class="mui-table-view-cell">
- <a class="mui-navigate-right">开启</a>
- </li>
- <li class="mui-table-view-cell">
- <a class="mui-navigate-right">只在夜间开启</a>
- </li>
- <li class="mui-table-view-cell">
- <a class="mui-navigate-right">关闭</a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div id="privacy" class="mui-page">
- <div class="mui-navbar-inner mui-bar mui-bar-nav">
- <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
- <span class="mui-icon mui-icon-left-nav"></span>设置
- </button>
- <h1 class="mui-center mui-title">隐私</h1>
- </div>
- <div class="mui-page-content">
- <div class="mui-scroll-wrapper">
- <div class="mui-scroll">
- <ul class="mui-table-view">
- <li class="mui-table-view-divider">通讯录</li>
- <li class="mui-table-view-cell">
- 加我为朋友时需要验证
- <div class="mui-switch mui-active mui-switch-mini">
- <div class="mui-switch-handle"></div>
- </div>
- </li>
- </ul>
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- 向我推荐QQ好友
- <div class="mui-switch mui-switch-mini">
- <div class="mui-switch-handle"></div>
- </div>
- </li>
- <li class="mui-table-view-cell">
- 通过QQ号搜索到我
- <div class="mui-switch mui-switch-mini">
- <div class="mui-switch-handle"></div>
- </div>
- </li>
- </ul>
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- 可通过手机号搜索到我
- <div class="mui-switch mui-active mui-switch-mini">
- <div class="mui-switch-handle"></div>
- </div>
- </li>
- <li class="mui-table-view-cell">
- 向我推荐通讯录朋友
- <div class="mui-switch mui-switch-mini">
- <div class="mui-switch-handle"></div>
- </div>
- </li>
- <li class="mui-table-view-divider">开启后,为你推荐已经开通HBuilder的手机联系人</li>
- </ul>
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- 通过HBuilder账号搜索到我
- <div class="mui-switch mui-active mui-switch-mini">
- <div class="mui-switch-handle"></div>
- </div>
- </li>
- <li class="mui-table-view-divider">关闭后,其他用户将不能通过HBuilder号搜索到你</li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div id="general" class="mui-page">
- <div class="mui-navbar-inner mui-bar mui-bar-nav">
- <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
- <span class="mui-icon mui-icon-left-nav"></span>设置
- </button>
- <h1 class="mui-center mui-title">通用</h1>
- </div>
- <div class="mui-page-content">
- <div class="mui-scroll-wrapper">
- <div class="mui-scroll">
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- 多语言
- </li>
- </ul>
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- 听筒模式
- <div class="mui-switch mui-switch-mini">
- <div class="mui-switch-handle"></div>
- </div>
- </li>
- </ul>
- <ul class="mui-table-view">
- <li class="mui-table-view-cell">
- 功能
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div id="about" class="mui-page">
- <div class="mui-navbar-inner mui-bar mui-bar-nav">
- <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
- <span class="mui-icon mui-icon-left-nav"></span>设置
- </button>
- <h1 class="mui-center mui-title">关于MUI</h1>
- </div>
- <div class="mui-page-content">
- <div class="mui-scroll-wrapper">
- <div class="mui-scroll">
- <ul class="mui-table-view">
- <li class="mui-table-view-cell mui-plus-visible mui-stream-hidden">
- <a id="rate" class="mui-navigate-right">评分鼓励</a>
- </li>
- <li class="mui-table-view-cell mui-plus-visible">
- <a id="welcome" class="mui-navigate-right">欢迎页</a>
- </li>
- <li class="mui-table-view-cell mui-plus-visible">
- <a id="share" class="mui-navigate-right">分享推荐</a>
- </li>
- <li class="mui-table-view-cell">
- <a id="tel" class="mui-navigate-right">客服电话</a>
- </li>
- <li class="mui-table-view-cell">
- <a id="feedback-btn" href="#feedback" class="mui-navigate-right">问题反馈</a>
- </li>
- <li id="check_update" class="mui-table-view-cell mui-plus-visible">
- <a id="update" class="mui-navigate-right">检查更新</a>
- </li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div id="feedback" class="mui-page feedback">
- <div class="mui-navbar-inner mui-bar mui-bar-nav">
- <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
- <span class="mui-icon mui-icon-left-nav"></span>关于MUI
- </button>
- <button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">发送</button>
- <h1 class="mui-center mui-title">问题反馈</h1>
- </div>
- <div class="mui-page-content">
- <div class="mui-content-padded">
- <div class="mui-inline">问题和意见</div>
- <a class="mui-pull-right mui-inline" href="#popover">
- 快捷输入
- <span class="mui-icon mui-icon-arrowdown"></span>
- </a>
- <!--快捷输入具体内容,开发者可自己替换常用语-->
- <div id="popover" class="mui-popover">
- <div class="mui-popover-arrow"></div>
- <div class="mui-scroll-wrapper">
- <div class="mui-scroll">
- <ul class="mui-table-view">
- <!--仅流应用环境下显示-->
- <li class="mui-table-view-cell stream">
- <a href="#">桌面快捷方式创建失败</a>
- </li>
- <li class="mui-table-view-cell"><a href="#">界面显示错乱</a></li>
- <li class="mui-table-view-cell"><a href="#">启动缓慢,卡出翔了</a></li>
- <li class="mui-table-view-cell"><a href="#">偶发性崩溃</a></li>
- <li class="mui-table-view-cell"><a href="#">UI无法直视,丑哭了</a></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div class="row mui-input-row">
- <textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
- </div>
- <p>图片(选填,提供问题截图,总大小10M以下)</p>
- <div id='image-list' class="row image-list"></div>
- <p>QQ/邮箱</p>
- <div class="mui-input-row">
- <input id='contact' type="text" class="mui-input-clear contact" placeholder="(选填,方便我们联系你 )" />
- </div>
- <div class="mui-content-padded">
- <div class="mui-inline">应用评分</div>
- <div class="icons mui-inline" style="margin-left: 6px;">
- <i data-index="1" class="mui-icon mui-icon-star"></i>
- <i data-index="2" class="mui-icon mui-icon-star"></i>
- <i data-index="3" class="mui-icon mui-icon-star"></i>
- <i data-index="4" class="mui-icon mui-icon-star"></i>
- <i data-index="5" class="mui-icon mui-icon-star"></i>
- </div>
- </div><br />
- </div>
- </div>
- </body>
- <script src="../js/mui.min.js "></script>
- <script src="../js/mui.view.js "></script>
- <script src='../js/feedback.js'></script>
- <script>
- mui.init();
- //初始化单页view
- var viewApi = mui('#app').view({
- defaultPage: '#setting'
- });
- //初始化单页的区域滚动
- mui('.mui-scroll-wrapper').scroll();
- //分享操作
- var shares = {};
-
- mui.plusReady(function() {
- plus.share.getServices(function(s) {
- if (s && s.length > 0) {
- for (var i = 0; i < s.length; i++) {
- var t = s[i];
- shares[t.id] = t;
- }
- }
- }, function() {
- console.log("获取分享服务列表失败");
- });
- });
-
- setTimeout(function () {
- defaultImg();
- setTimeout(function() {
- initImgPreview();
- }, 300);
- },500);
-
- //分享链接点击事件
- document.getElementById("share").addEventListener('tap', function() {
- var ids = [{
- id: "weixin",
- ex: "WXSceneSession"
- }, {
- id: "weixin",
- ex: "WXSceneTimeline"
- }, {
- id: "sinaweibo"
- }, {
- id: "tencentweibo"
- }, {
- id: "qq"
- }],
- bts = [{
- title: "发送给微信好友"
- }, {
- title: "分享到微信朋友圈"
- }, {
- title: "分享到新浪微博"
- }, {
- title: "分享到腾讯微博"
- }, {
- title: "分享到QQ"
- }];
- plus.nativeUI.actionSheet({
- cancel: "取消",
- buttons: bts
- }, function(e) {
- var i = e.index;
- if (i > 0) {
- var s_id = ids[i - 1].id;
- var share = shares[s_id];
- if (share) {
- if (share.authenticated) {
- shareMessage(share, ids[i - 1].ex);
- } else {
- share.authorize(function() {
- shareMessage(share, ids[i - 1].ex);
- }, function(e) {
- console.log("认证授权失败:" + e.code + " - " + e.message);
- });
- }
- } else {
- mui.toast("无法获取分享服务,请检查manifest.json中分享插件参数配置,并重新打包")
- }
- }
- });
- });
- function shareMessage(share, ex) {
- var msg = {
- extra: {
- scene: ex
- }
- };
- msg.href = "http://www.dcloud.io/hellomui/";
- msg.title = "最接近原生APP体验的高性能前端框架";
- msg.content = "我正在体验HelloMUI,果然很流畅,基本看不出和原生App的差距";
- if (~share.id.indexOf('weibo')) {
- msg.content += ";体验地址:http://www.dcloud.io/hellomui/";
- }
- msg.thumbs = ["_www/images/logo.png"];
- share.send(msg, function() {
- console.log("分享到\"" + share.description + "\"成功! ");
- }, function(e) {
- console.log("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message);
- });
- }
- //去评分
- document.getElementById("rate").addEventListener('tap', function() {
- if (mui.os.ios) {
- location.href = 'https://itunes.apple.com/cn/app/hello-mui/id907931805?l=en&mt=8';
- } else if (mui.os.android) {
- plus.runtime.openURL("market://details?id=io.dcloud.HelloMUI", function(e) {
- plus.runtime.openURL("market://details?id=io.dcloud.HelloMUI", function(e) {
- mui.alert("360手机助手和应用宝,你一个都没装,暂时无法评分,感谢支持");
- }, "com.qihoo.appstore");
- }, "com.tencent.android.qqdownloader");
- }
- });
- //客服电话
- document.getElementById("tel").addEventListener('tap', function() {
- if(mui.os.plus){
- plus.device.dial("114");
- }else{
- location.href = 'tel:114';
- }
-
- });
- //检查更新
- document.getElementById("update").addEventListener('tap', function() {
- var server = "http://www.dcloud.io/check/update"; //获取升级描述文件服务器地址
- mui.getJSON(server, {
- "appid": plus.runtime.appid,
- "version": plus.runtime.version,
- "imei": plus.device.imei
- }, function(data) {
- if (data.status) {
- plus.ui.confirm(data.note, function(i) {
- if (0 == i) {
- plus.runtime.openURL(data.url);
- }
- }, data.title, ["立即更新", "取 消"]);
- } else {
- mui.toast('Hello MUI 已是最新版本~')
- }
- });
- });
- var view = viewApi.view;
- (function($) {
- //处理view的后退与webview后退
- var oldBack = $.back;
- $.back = function() {
- if (viewApi.canBack()) { //如果view可以后退,则执行view的后退
- viewApi.back();
- } else { //执行webview后退
- oldBack();
- }
- };
- //监听页面切换事件方案1,通过view元素监听所有页面切换事件,目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
- //第一个参数为事件名称,第二个参数为事件回调,其中e.detail.page为当前页面的html对象
- view.addEventListener('pageBeforeShow', function(e) {
- // console.log(e.detail.page.id + ' beforeShow');
- });
- view.addEventListener('pageShow', function(e) {
- // console.log(e.detail.page.id + ' show');
- });
- view.addEventListener('pageBeforeBack', function(e) {
- // console.log(e.detail.page.id + ' beforeBack');
- });
- view.addEventListener('pageBack', function(e) {
- // console.log(e.detail.page.id + ' back');
- });
- })(mui);
- //更换头像
- mui(".mui-table-view-cell").on("tap", "#head", function(e) {
- if(mui.os.plus){
- var a = [{
- title: "拍照"
- }, {
- title: "从手机相册选择"
- }];
- plus.nativeUI.actionSheet({
- title: "修改头像",
- cancel: "取消",
- buttons: a
- }, function(b) {
- switch (b.index) {
- case 0:
- break;
- case 1:
- getImage();
- break;
- case 2:
- galleryImg();
- break;
- default:
- break
- }
- })
- }
-
- });
- function getImage() {
- var c = plus.camera.getCamera();
- c.captureImage(function(e) {
- plus.io.resolveLocalFileSystemURL(e, function(entry) {
- var s = entry.toLocalURL() + "?version=" + new Date().getTime();
- console.log(s);
- document.getElementById("head-img").src = s;
- document.getElementById("head-img1").src = s;
- //变更大图预览的src
- //目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现
- document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
- }, function(e) {
- console.log("读取拍照文件错误:" + e.message);
- });
- }, function(s) {
- console.log("error" + s);
- }, {
- filename: "_doc/head.jpg"
- })
- }
- function galleryImg() {
- plus.gallery.pick(function(a) {
- plus.io.resolveLocalFileSystemURL(a, function(entry) {
- plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
- root.getFile("head.jpg", {}, function(file) {
- //文件已存在
- file.remove(function() {
- console.log("file remove success");
- entry.copyTo(root, 'head.jpg', function(e) {
- var e = e.fullPath + "?version=" + new Date().getTime();
- document.getElementById("head-img").src = e;
- document.getElementById("head-img1").src = e;
- //变更大图预览的src
- //目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现
- document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
- },
- function(e) {
- console.log('copy image fail:' + e.message);
- });
- }, function() {
- console.log("delete image fail:" + e.message);
- });
- }, function() {
- //文件不存在
- entry.copyTo(root, 'head.jpg', function(e) {
- var path = e.fullPath + "?version=" + new Date().getTime();
- document.getElementById("head-img").src = path;
- document.getElementById("head-img1").src = path;
- //变更大图预览的src
- //目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现
- document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
- },
- function(e) {
- console.log('copy image fail:' + e.message);
- });
- });
- }, function(e) {
- console.log("get _www folder fail");
- })
- }, function(e) {
- console.log("读取拍照文件错误:" + e.message);
- });
- }, function(a) {}, {
- filter: "image"
- })
- };
- function defaultImg() {
- if(mui.os.plus){
- plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
- var s = entry.fullPath + "?version=" + new Date().getTime();;
- document.getElementById("head-img").src = s;
- document.getElementById("head-img1").src = s;
- }, function(e) {
- document.getElementById("head-img").src = '../images/logo.png';
- document.getElementById("head-img1").src = '../images/logo.png';
- })
- }else{
- document.getElementById("head-img").src = '../images/logo.png';
- document.getElementById("head-img1").src = '../images/logo.png';
- }
-
- }
- document.getElementById("head-img1").addEventListener('tap', function(e) {
- e.stopPropagation();
- });
- document.getElementById("welcome").addEventListener('tap', function(e) {
- //显示启动导航
- mui.openWindow({
- id: 'guide',
- url: 'guide.html',
- show: {
- aniShow: 'fade-in',
- duration: 300
- },
- waiting: {
- autoShow: false
- }
- });
- });
- function initImgPreview() {
- var imgs = document.querySelectorAll("img.mui-action-preview");
- imgs = mui.slice.call(imgs);
- if (imgs && imgs.length > 0) {
- var slider = document.createElement("div");
- slider.setAttribute("id", "__mui-imageview__");
- slider.classList.add("mui-slider");
- slider.classList.add("mui-fullscreen");
- slider.style.display = "none";
- slider.addEventListener("tap", function() {
- slider.style.display = "none";
- });
- slider.addEventListener("touchmove", function(event) {
- event.preventDefault();
- })
- var slider_group = document.createElement("div");
- slider_group.setAttribute("id", "__mui-imageview__group");
- slider_group.classList.add("mui-slider-group");
- imgs.forEach(function(value, index, array) {
- //给图片添加点击事件,触发预览显示;
- value.addEventListener('tap', function() {
- slider.style.display = "block";
- _slider.refresh();
- _slider.gotoItem(index, 0);
- })
- var item = document.createElement("div");
- item.classList.add("mui-slider-item");
- var a = document.createElement("a");
- var img = document.createElement("img");
- img.setAttribute("src", value.src);
- a.appendChild(img)
- item.appendChild(a);
- slider_group.appendChild(item);
- });
- slider.appendChild(slider_group);
- document.body.appendChild(slider);
- var _slider = mui(slider).slider();
- }
- }
-
- if(mui.os.stream){
- document.getElementById("check_update").display = "none";
- }
-
- </script>
- </html>
|