Android json 搜索安卓手机打开json

转载

话不是这么说的 2024-08-23 22:20:31

文章标签 Android json 搜索移动开发 json javascript ViewUI 文章分类 Android 移动开发

-----------------

为了力求运行速度快、响应迅即，我们推荐使用backbone.js和zepto.js。

为了让这个过程更有意思，我们开发了一个小小的示例项目，使用CSS重置样式、Backbone.js和带转场效果的几个页面。我们的项目会显示Trigger推特更新内容和单个的推特消息。与往常一样，我们将使用同一个HTML5代码库创建安卓和iOS应用程序。在这个过程中，我们将介绍如何：

把你的JavaScript文件添加到应用程序中
使用Backbone.js来显示响应迅即的界面
使用CSS重置样式，减少跨平台出现的不一致性
在应用程序中的视图之间实现示例转场效果

你可以在此基础上随意开发自己的项目——这是开发新项目的良好基础！

添加的文件

Backbone.js，负责处理历史记录、用户操作以及为整个JavaScript框定结构
HTML5Boilerplate，旨在减少不同平台上不一致的渲染默认值带来的影响
Zepto，这个面向移动设备的轻型框架是jQuery的替代方案，可用于DOM（文档对象模型）处理。

开始上手

想处理应用程序中的JavaScripts和CSS，只要把它们添加到你的index.html中，就像你在普通网站中进行操作那样：

1. <link rel="stylesheet" href="css/reset.css">
2. <link rel="stylesheet" href="css/demo.css">
3. <script type="text/javascript" src="js/lib/zepto.min.js"></script>
4. <script type="text/javascript" src="js/lib/underscore-min.js"></script>
5. <script type="text/javascript" src="js/lib/backbone-min.js"></script>
6. <script type="text/javascript" src="js/demo.js"></script>

里，我们只使用了HTML5样板重置样式（reset.css）、JavaScript库和我们自己的两个文件：demo.css和demo.js。

使用Backbone时，你的入口点应该设置好应用程序正常运行所需要的各方面，然后开始运行Backbone的历史系统。

比如说，在该项目中，我们使用$(Demo.init)，在应用程序启动时运行下列函数，只运行一次：

1. // 应用程序启动时，只调用一次
2. init: function
3. // 获取Trigger推特更新内容
4.     forge.request.ajax({ 
5. "https://twitter.com/statuses/user_timeline/14972793.json", 
6. "json", 
7.         success: showIndex 
8.     }); 
9. // 一旦我们有了Trigger推特更新内容，就调用
10. function
11. // 把初始数据保存起来
12. new
13. // 建立Backbone
14. new
15.         Backbone.history.start(); 
16.     } 
17. }

这里，我们使用request.ajax函数来检索我们的推特消息，并将数据存储在一个集合中，然后开始运行Backbone。

使用Backbone.js

Backbone.history.start()启动Backbone的window.onhashchange事件订阅。当URL的某片段变化时，就使用routes.js中定义的路由：

1. routes: { 
2. "" : "index",          // 入口点：没有哈希分片或#
3. "item/:item_id":"item"  // #item/id
4. },

路由将URL映射到函数。我们在这里定义了两个路由：一个对应#index()，另一个对应#item/[item_id]。然后，将item_id作为一个参数传递到item()。路由负责为你整个应用程序安排好URL。

使用Backbone来管理Forge应用程序里面的视图是个好办法：我们不仅在历史堆栈里面构建URL（比如说，这意味着“后退”按钮在安卓平台上可以按预期的方式工作），我们还能够全面控制在应用程序中显示的内容，又不必借助慢腾腾的页面装入机制。

不过，特别是在移动平台上，你的用户期望以某种动态转场效果从一个视图切换到下一个视图；为此，你可以把Backbone视图组织成页面。

页面视图

该代码片段显示了我们如何在这个项目中实现页面，当一个页面变得活跃时，就使用动画转场效果。你还可以在此看到我们使用Zepto用于DOM处理。

1. Demo.Views.Page = Backbone.View.extend({ 
2. "page", 
3. function
4. this.render(); 
5.     }, 
6. function
7. '.page').css({"position": "absolute"}); 
8. var direction_coefficient = this.options.back ? 1 : -1; 
9. if ($('.page').length) { 
10. var $old = $('.page').not(this.el); 
11. // 这个解决办法来之不易－
12. // 仅仅使用.css(property, '')不管用！
13. "margin-left"] = ""
14. "-webkit-transform"] = ""
15. this.$el.appendTo('body').hide(); 
16. this.$el.show().css( 
17. "margin-left": 320 * direction_coefficient}); 
18. this.$el.anim( 
19. 'px,0,0'}, 
20. 'linear'); 
21.             $old.anim( 
22. 'px,0,0'}, 
23. 'linear', function() { 
24.                     $old.remove(); 
25. '.page').css({"position": "static"}); 
26.             }); 
27. else
28. this.$el.appendTo('body').hide(); 
29. this.$el.show(); 
30.         } 
31.         window.scrollTo(0, 0); 
32.     } 
33. });

如果你希望，可以在你自己的视图中实现这个页面，并使用show()方法从一个页面切换到另一个页面。

比如说，在该项目中，我们为所有推特消息的初始视图创建了一个页面，并且当用户选择每一单个的推特消息时也为它创建一个页面。

使用Forge API的其他部分

我们已经看到了使用forge.request.ajax来请求远程服务器。该项目还充分利用了另外一些Forge API。

在expand_item()中，我们使用forge.tabs.open()，以一种跨平台的方式打开外部页面新标签页。open()的说明文档在此。

最后，我们使用了click_or_tap()函数中的forge.is，以便我们能够监听移动设备上的轻触事件（tap event），以及其他设备上的点击事件（click event）。易于检测平台的说明文档在此。

1. click_or_tap: function(obj) { 
2. // 至于对象属性，为属性添加“点击”，并使用原始值
3. var
4. for(var property in
5. if
6. if
7. "tap "
8.             } 
9. else
10. "click "
11.             } 
12.         } 
13.     } 
14. return
15. }

这很重要，因为点击事件的反应在移动设备上不如轻触来得迅即。

构建和运行应用程序

为了自行构建和运行应用程序，请先取我们网站上注册（https://trigger.io/）；如果你还没有Trigger.io Forge框架，就安装该框架，开始建立Forge环境

然后，