1
0

info.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hello MUI</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <!--标准mui.css-->
  10. <link rel="stylesheet" href="../css/mui.min.css">
  11. <!--App自定义的css-->
  12. <!-- <link rel="stylesheet" type="text/css" href="../css/app.css" /> -->
  13. <style>
  14. p {
  15. text-indent: 22px;
  16. padding: 5px 8px;
  17. }
  18. html,
  19. body,
  20. .mui-content {
  21. background-color: #fff;
  22. }
  23. h4 {
  24. margin-left: 5px;
  25. }
  26. .qrcode {
  27. /*position: absolute;*/
  28. top: 50px;
  29. /*left: 50%;*/
  30. width: 100%;
  31. /*-webkit-transform: translate(-50%, 0);
  32. transform: translate(-50%, 0);*/
  33. text-align: center;
  34. }
  35. .qrcode img {
  36. margin: 0 auto;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <header class="mui-bar mui-bar-nav">
  42. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  43. <h1 class="mui-title">关于</h1>
  44. </header>
  45. <div class="mui-content">
  46. <div class="mui-content-padded">
  47. <div class="qrcode">
  48. <img id="qrcode" src="../images/qrcode.png" width="100%" />
  49. <a id="shortcut" style="width: 60%;margin: 15px auto;padding: 5px;" class="mui-hidden mui-btn mui-btn-block mui-btn-red">创建桌面图标</a>
  50. </div>
  51. <!--<h4 style="margin-top:10px;">mui</h4>-->
  52. <p>mui是一款小巧高能的前端UI框架,其UI控件富有原生UI样式;
  53. 通过封装多webview、启动原生动画,使得mui成为目前最接近原生体验的前端框架,
  54. 更多详细介绍,请到<a href="http://dev.dcloud.net.cn/mui">mui官网</a>查看</p>
  55. <p style="text-align: center;color: #ccc;text-indent: 0;">当前版本:<span id="version">3.7.0</span></p>
  56. </div>
  57. </div>
  58. <script src="../js/mui.min.js"></script>
  59. <script type="text/javascript" charset="utf-8">
  60. mui.init({
  61. gestureConfig: {
  62. longtap: true
  63. },
  64. swipeBack: true //启用右滑关闭功能
  65. });
  66. //处理点击事件,需要打开原生浏览器
  67. mui('body').on('tap', 'a', function(e) {
  68. var href = this.getAttribute('href');
  69. if (href) {
  70. if (window.plus) {
  71. plus.runtime.openURL(href);
  72. } else {
  73. location.href = href;
  74. }
  75. }
  76. });
  77. var qrcodeEl = document.getElementById("qrcode");
  78. qrcodeEl.addEventListener('longtap', function() {
  79. plus.nativeUI.actionSheet({
  80. cancel: '取消',
  81. buttons: [{
  82. title: '保存到相册'
  83. }]
  84. }, function(e) {
  85. var index = e.index;
  86. if (e.index === 1) {
  87. plus.gallery.save(qrcodeEl.src, function() {
  88. mui.toast('保存成功');
  89. }, function() {
  90. mui.toast('保存失败,请重试!');
  91. });
  92. }
  93. });
  94. });
  95. if (mui.os.android&&mui.os.stream) { //创建快捷方式
  96. var shortcutElem = document.getElementById("shortcut");
  97. shortcutElem.classList.remove('mui-hidden');
  98. shortcutElem.addEventListener('tap', function() {
  99. plus.navigator.createShortcut({
  100. name: "hello-mui",
  101. icon: "images/logo.png"
  102. });
  103. });
  104. }
  105. </script>
  106. </body>
  107. </html>