欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

如何设置和使用PhoneGap中的NativeControls插件

ios 夜阑小雨 1179℃ 0评论

许多人可能也知道,PhoneGap中针对iOS用得最多的两大插件是NativeControls和ChildBrowser,但插件安装起来有点棘手,你也无法在互联网上轻轻松松就能找到这种帮助。就拿我来说吧,我在阅读了PhoneGap的插件安装说明、进行了测试,才算弄了个明白。于是在本文中,我会介绍设置和使用NativeControls的整个过程(但这个过程同样适用于iOS源代码库中的其他任何插件),力求非常简洁扼要,连PhoneGap初学者也能明白。
我假设你已经将Xcode环境安装在了Mac机上,并进行了配置,而且熟悉最新版本的Xcode。
你要做的第一件事就是下载phonegap-plugins源代码库压缩文档(https://github.com/purplecabbage/phonegap-plugins),然后将它解压缩到你喜欢的任何文件夹。现在进入到解压缩后的文件夹,找到iPhone/NativeControls,将NativeControls.h和NativeControls.m拷贝到Xcode上的//Plugins文件夹,然后将NativeControls.js移到www文件夹中你所希望的地方。完成了这一切拷贝和粘贴后,你必须在//Supporting Files下打开PhoneGap.plist,使用Key NativeControls、Value NativeControls和Type String,为Plugins数据添加一个新的项。最后,你的项目看来应该像这样:

现在你可以准备开始钻研代码了。你要做的第一件事是按这个顺序,将所需的Javascript文件加入到你的索引HTML源代码中。
接下来要做的是找到你的主Javascript文件——该文件包含onDeviceReady事件集,然后把NativeControls初始化代码放在那里。在这个例子中,我们会使用TabBar组件输出这样的内容:

你可能也注意到了,我在那里使用了Glyphish Pro图标库,你花25美元就能买到,但是一分价钱一分货,因为它对你的TabBars及更多组件来说是一个非常齐全的图标库。首先,你应该对NativeControls变量进行初始化,然后为它赋予TabBar,请使用这段代码:
nativeControls = window.plugins.nativeControls;
nativeControls.createTabBar();
然后你可以开始使用该JSON结构,为标签(tab)创建一个图标/按钮:
nativeControls.createTabBarItem(
  "books",
  "Books",
  "/www/tabs/book.png",
  {"onSelect": function() {
    // Do something
  }}
);
第一项是名称变量,第二项是图标标签,第三项是图标路径,最后一项是每当图标点击,就应该被调用的函数。要注意:你应该插入与项目文件夹相对应的图标路径!至于视网膜图标,我确实鼓励你仔细看一下关于如何组织视网膜图标的这番解释(http://stackoverflow.com/questions/3666963/iphone-4-tab-bar-icons/3667247#3667247)。你添加了想为TabBar添加的所有图标后,应该在屏幕中显示它。然后开始放置图标(图标按照你在该函数中声明的次序来放置),最后指定应用程序开启后,处于活动状态的TabBar,就像这样:
nativeControls.showTabBar();
nativeControls.showTabBarItems("books", "finished", "about");
nativeControls.selectTabBarItem("books");
如果你希望只要使用这些关键字作为图标项,就能够在苹果在其软件开发包(SDK)中默认情况下包含的预定义TabBar图标之间进行选择:
– tabButton:More
– tabButton:Favorites
– tabButton:Featured
– tabButton:TopRated
– tabButton:Recents
– tabButton:Contacts
– tabButton:History
– tabButton:Bookmarks
– tabButton:Search
– tabButton:Downloads
– tabButton:MostRecent
– tabButton:MostViewed
谨记:标签将无法使用,因为这些图标会覆盖标签,但是你应该在标签项上放置些什么东西,否则它无法使用。
我把整个源代码上传到了我的Gist,你可以在Example of NativeControls in PhoneGap – Gist(https://gist.github.com/1384250)中仔细查看。
完成了这些艰难的工作后,你可以准备编译应用程序、测试它了。如果你正确遵照了上面的操作步骤,那么应该一切顺利。

转载请注明:夜阑小雨 » 如何设置和使用PhoneGap中的NativeControls插件

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址