App Inventor高级教程——Material Design追求之路——最终解决方案

2017年2月24日 0条评论 3.62k次阅读 0人点赞 futa

上次写了这么多教程，终于要完结了。

这次的教程比较高级，涉及到Html框架、Js，建议去W3SCHOOL学习一个。

先放最终效果图。

【教师端截图1】

【教师端截图2】

【学生端截图】

下面开始说一下我的思考过程。
首先，我是怎么样想到这样解决的呢？
这还是要感谢YTB。
在这个西班牙文的连接上，我找到了个好东西。
谷歌翻译后，这个人的大概意思是用PhoneGap、或Framework7这类的软件、框架来实现软件外观的实现。
懂了！
（PhoneGap是刚刚找到的，以后慢慢写）
开工！

首先，我们要找到Framework7的网址。左边那个就是。
既然是MD，那么基本的界面是必不可少的。

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Color theme for statusbar -->
    <meta name="theme-color" content="#2196f3">
    <!-- Your app title -->
    <title>My App</title>
    <!-- Path to Framework7 Library CSS, Material Theme -->
    <link rel="stylesheet" href="path/to/framework7.material.min.css">
    <!-- Path to Framework7 color related styles, Material Theme -->
    <link rel="stylesheet" href="path/to/framework7.material.colors.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="path/to/my-app.css">
  </head>
  <body>
    <!-- Views -->
    <div class="views">
      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Pages container, because we use fixed navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-fixed toolbar-fixed">
          <!-- Page, "data-page" contains page name -->
          <div data-page="index" class="page">
 
            <!-- Top Navbar. In Material theme it should be inside of the page-->
            <div class="navbar">
              <div class="navbar-inner">
                <div class="center">Awesome App</div>
              </div>
            </div>
 
            <!-- Bottom Toolbar. In Material theme it should be inside of the page-->
            <div class="toolbar">
              <div class="toolbar-inner">
                <!-- Toolbar links -->
                <a href="#" class="link">Link 1</a>
                <a href="#" class="link">Link 2</a>
              </div>
            </div>
 
            <!-- Scrollable page content -->
            <div class="page-content">
              <p>Page content goes here</p>
              <!-- Link to another page -->
              <a href="about.html">About app</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="path/to/framework7.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="path/to/my-app.js"></script>
  </body>
</html>

这是官网上关于一个基本的Material Design界面的布局。
（当然像什么标题的都没改）
打开一看，是不是很高兴？
没错，我们的第一步完成了。
接下来是添加侧边栏了。
null
按照官网说的做，也可以简单的完成。
后续组件的创建也和写HTML代码无异。（虽然我也不是很会）
有几点提一下：
1.导航栏按钮问题

<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="link icon-only">
                <i class="icon icon-bars"></i>
            </a>
        </div>
    </div>
</div>

如上图，替换原先NAVIBAR的DIV，就能实现简单的导航栏图标。
但是：没有图标变化的动画。请强迫症们牢记这点。
2.导航栏内内容切换问题
这曾是我的一个重要问题之一。
因为没有系统的学过HTML相关的语言，所以，对于AJAX什么的一窍不通。连这点H5知识都是W3SCHOOL现学的。于是，又被我想出了一个歪路子。
首先呢，Framework7提供了操作H5的方法，是用:
null
这样的。
而我输入

$$('p').hide();

时，页面上所有的p标签都消失了。
于是，我想，HTML能不能自定义标签呢？
答案是肯定的。

<html xmlns:look>

<html xmlns:watch>

像这样就可以了。
接下来的问题就简单了。
~~经过穷举，~~我们需要在这里：

<watch>
<div data-page="index" class="page">

<div class="navbar">
<div class="navbar-inner">
<div class="center">Awesome App</div>
</div>
</div>



</watch>

打上一个标签后，还有另外一个：

<look>
<div data-page="index" class="page">


<div class="navbar">
<div class="navbar-inner">
<div class="center">NoName</div>


</div>
</div>

<！--TOOLBAR部分-->
<div class="toolbar">
<div class="toolbar-inner">

<a href="#" class="link icon-only">
<i class="icon icon-bars open-panel"></i>
</a>
</div>
</div>

<！--以上是TOOLBAR部分-->



</look>

还有按钮点击部分：

//默认隐藏
$$('watch').hide();
//数据查询
$$('.button-what.button.color-teal').on('click', function () {
$$('watch').hide();
$$('look').show();
});
//数据管理
$$('.button-manage.button.color-teal').on('click', function () {
$$('look').hide();
$$('watch').show();
});

注意！上面是JS!

要用

<script type="text/javascript">

</script>

包起来的！

3.通讯问题
AI2浏览器封装了两个方法，分别是
window.AppInventor.setWebViewString();
和
window.AppInventor.getWebViewString();
在HTML中用window.setInterval设置一个计时器，来监听、处理数据，再在AI2中拖一个同样的出来。把原先的按钮什么的全拖过来，监测传回字串就可以了。
【强烈建议一次传回所有数据，否则可能造成不定期错乱】

综合评价：

优点：

好看！
动画流畅
有侧边栏
可定义事件多，可以套用模板
兼容性优秀，移植方便
H5是目前APP制作的趋势
如果把关键文件存在云端，那么更新软件再也不用重新编译了。

缺点：

操作困难，尤其是对于无基础的人
如果存在云端，受服务器状态影响
过低版本手机（<=Android 2.2）可能无法运行
所有数据要用Timer传回，耗电相对较大
你可能知难而退

总评：对于编程基础薄弱的同志们，十分不建议用这个方案，还是建议用*S*S*R*登Thunkable重新编译。但是对于完美主义者，以及我这种编程不行外加强迫症患者来说，Framework7还是很有必要的。

-The End-

~~【文明6游戏中】再来一回合，就一回合！~~

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

发表回复取消回复

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。

Press

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表回复 取消回复

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

发表回复取消回复