Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一只Cordova App

装VS2015
Update2的长河是生曲折的。还好通过不懈的努力,终于折腾成功了。

如若开Cordova项目来说,推荐大家于是一下ionic这个框架,效果还对。对于Cordova、PhoneGap、ionic、AngularJS这些框架或库底涉嫌,我个人知道是如此,PhoneGap是一个商类型,用来实现HTML5式的跨平台开发,后来Adobe公司拿内的主导代码开源,就是Cordova,Cordova只担负兑现JavaScript调用原生代码的力量,是一个甲,而甲里具体用啊样式,在HTML5重合还有不少框架,如ionic、jquery
mobile都得以。ionic集成了AngularJS,实际上是描摹了有的AngularJS的directive,用来简化开发,ionic又提供了扳平学css样式,如果开发web
app,也得以独自行使他的css样式。VS2015针对性这些框架和类库都提供了优质的支撑。

虽说标题是UWP系列,但实际上自己是因Android为第一阳台写这demo的,因为要想看看Cordova在Android平台的呈现^_^
ionic已经支持Universal,所以本文最后咱们吧堪编译成uwp应用来运作一下。

一律、环境布置

自家怀念做这么一个最为简便易行的力量,显示一个消息列表,支持下拉刷新以及滚动到底层自动加载重多。这是一个App最简单易行的意义,在ionic里可死粗略的贯彻。对于Angular的一些,我啊会以出过程遭到简单介绍一下。

自套新物的时刻,不绝好先看众定义的事物,而是先举行只东西运行起来后,再去研究里的定义。所以先打个档次周转一下望吧。

Ionic主页地址:http://ionicframework.com/

官方教程是盖node.js的授命执行来树立项目,还吓发VS2015,可以一直下载ionic的花色模板来起首先单种类。

ionic模板下充斥地址:https://visualstudiogallery.msdn.microsoft.com/4e44ba8b-a4c8-4106-b70e-00d63241a54a

Ionic智能感知支持下载地址:https://visualstudiogallery.msdn.microsoft.com/d6279fba-bcff-4857-906d-29faa8a99448/

 

否得一直在VS2015之扩大里搜索ionic:

图片 1

安装前片只即可,第一只凡是ionic的智能感知插件ionic
Pack,第二个凡是ionic项目模板,支持三栽体制的花色,空白型、汉堡菜单型、Tab型。

次、新建项目

安装好模板插件之后,新建一个Cordova项目IonicDemo,选Tabs
Template:

图片 2

连通下VS2015会下载很多包:

图片 3

得要保持网络连接,不然可怜可能下载失败。

啊我发生健康的网络连接,还是败诉了……

图片 4

老三、项目组织

筑好的色是这么的:

图片 5

看一下档次布局,其实我们需要出的重中之重有都于www目录里:

图片 6

圈,和一个简便的web项目特别像吧,css、img、js都出,这就是是一个纯HTML5的网站。Js目录里是Angular的代码,templates目录里放的凡页面。

接触开依赖项,发现发生无设置之组成部分:

图片 7

但是没什么,这个不设置也未影响运行。

季、第一涂鸦编译

如今安插上您的安卓手机,运行第一个Cordova程序吧。在菜单上摘取调试设备,推荐用真机调试,我起坏用了VS2015之安卓模拟器,速度是神速,但将网络将大了。对于这种简易的Cordova程序,用Ripple也是好的。Ripple是于Chrome里运行的一个插件,也供了一些遵循GPS、后退键等模拟器的效能。

倘是第一差编译Cordova项目,会下充斥Gradle,速度比较缓慢,大概要半单多时及还长久。最好不用中途停止,不然会发生莫名其妙的一无是处。正常编译一不好后即便急匆匆了。这是Ripple里的规范:

图片 8

左是Ripple的片段信,包括平台、版本、加速度计、电池状态等,其中加速度计还足以模拟手机摇动的效力。

图片 9

下手是装、GPS信息、网络、事件相当

图片 10

其中事件会时不时用:

图片 11

此处提供了部分deviceready、backbutton等事件,其中deviceready是Cordova初始化完设备准备完毕后的事件,可以于内部做有拍卖。Backbutton就是拟后退键了。还足以提供pause、resume等事件之效仿。

而对眼前者大概的先后来说,基本用非顶那复杂的意义,可以点击Tab栏看看,三只Tab,首页是一个介绍,第二独凡是一个拉列表,第三单凡是一个开关按钮。聊天列表点击的时还会有页面切换效果,看正在还不错。

五、Angular的运行方式

连通下便该研究一下了,这些页面是当何放正吗?又是怎么组装起的啊?

既www目录是个网站,当然首先要探望index页面了。打开index.html页面,可以望,页面头部引入了ionic和Angular、Cordova的js文件,其中Cordova上面来一行注释:

<!–
cordova script (this will be a 404 during development) –>

证实以开发进程遭到,这个文件找不顶是例行的。

连片下去有三行重要之js:

图片 12

立虽是着力之js文件了。Angular和MVC类似,也发出model、controller等概念。

属下去是html代码:

图片 13

首页就这样简单,这些ion开头的价签,就是ionic提供的Angular的directive。Directive是Angular的重大概念,可以兑现了从定义的html扩展。也就是说,ionic实际上是编了平效Angular的命令来促成这些好的页面效果。

假使没点过Angular,可能还未绝知道。没关系,接着往生看。

开拓www/js/app.js文件,这虽是Angular的初始化文件:

图片 14

看刚刚之Index.html代码,里面有

图片 15

而js里发一个深受starter的module,这就算将html和Angular联系起了。Angular看到ng-app的代码,就见面针对就片进行拍卖。module
函数有几只参数,使用了赖注入,注入了一个controller和一个services。

下来config函数,这里用了Angular的路由,来处理各种页面的状态:

图片 16

也就是说,每个不同的state,对承诺不同之html页面,使用不同的controller。

看tab页,对应的template是tabs.html。打开:

图片 17

这里以是ionic的通令,定义了三单ion-tab,来展示不同之tab页,对诺不同的state。

再也打开www/js/controller.js文件,里面纵使各个controller的概念了:

图片 18

立即有接触类似MVC的定义,每个页面都发出对应的controller处理。

连片下去看Angular的一个要概念,双向绑定。我们刚看聊天列表那个页面,页面地址是templates/
tab-chats.html,打开:

图片 19

在押ion-item里面有ng-repeat的代码,这是Angular的循环,可以将后面的chat
in chats循环显示处理。那么chats是乌来之啊?打开controller.js:

图片 20

Controller里可有只chats,但$scope是何东西?

自家之知情,$scope是一个胶水,把controller和view粘起来。Controller里的物,都如放在$scope下才会被view访问到。ChatsCtrl里定义了一个$scope.chats,而页面上就是可以据此

图片 21

如此这般的代码,实现绑定。如果您写过MVC或WPF程序,应该比较易于懂。

那chats是哪里来之为?ChatsCtrl首先进行了因注入,注入了一个Chats,然后函数里展开了一个赋值操作,Chats.all()

还记刚才app.js里初始化app的时光注入了一个starter.services吗?现在打开www/js/services.js:

图片 22

找到了,services是概念在此处的。这里以了Angular的factory,定义了一个号称也Chats的factory,其中的all()方法就是回到一个拉扯列表。

透过这样的辨析,我们就盖了解了序的周转方式,首先Angular会初始化app,注入controller和service,对ionic的命令展开处理,渲染成页面。

六、添加view及controller

现得设想我们的目的了,我想补偿加一个tab页,用来展示一个消息列表,这个列表也如自网络接口进行得。

先是来补偿加一个tab页。打开tabs.html,照猫画虎加一个ion-tab:

图片 23

图标我偷闲就不改动了,具体的图标可参看:http://ionicons.com/
这里来ionic自带的图标样式

当templates目录里补充加一个tab-newsList.html文件。

每当controller.js里,添加一个叫作也NewsListCtrl的controller:

图片 24

当里面定义一个newsList,即要显示的资讯列表。

兹修改app.js里之state,把controller和view关联起来:

图片 25

然在点击新闻tab的时光,链接符合tab/newsList,就会找到NewsListCtrl的controller和tab-newsList.html,进行亮。注意state里的各种参数,和view代码的name的呼应。

列表的旗帜也是遵循在拉的页面写:

图片 26

好了,controller有了,view也时有发生矣,数据为定义了,但多少由哪来啊?当然如果起网取了。

七、Angular使用promise实现异步的Service

为有利于演示,我用了一个新闻网站的api接口:

http://app.thepaper.cn/clt/jsp/v3/nodeContList.jsp?n=25462&WD-UUID=864819028898243&pageidx=1

本条接口是一个GET请求,有三只参数,其中pageidx是页数。

获取数据的局部写以哪呢?我们参考services里之Chats,写于services里。注意,模板自带的故了factory,但我这边用service。其实这半单东西多,我习惯用service。具体的分别可以参考这稿子:http://www.ng-newsletter.com/25-days-of-angular/day-1
反正我感到除了service可以于定义有参数,作用还多。

开拓services.js,添加以下代码:

图片 27

概念一个NewsService,注入$q和$http。因为落网络数据是异步的,Angular里供了promis的落实方式,通过调用$q.defer()来创造一个deferred实例,deferred有resolve、reject、notyfy几独方式,其中resolve是奉结果,reject是拒绝。Promise有一致篇稿子写的较好:http://blog.jobbole.com/51178/兹止知道promise是用来兑现异步的就得了。$http是Angular内置的http服务,可以便宜的贯彻get/post等各种网络要,用法和jQuery的ajax有点类似。

对了还得看一下接口的归来数据。浏览器可一直伸手那个地方,返回的数目是这般的:

图片 28

数量是json格式,如果resultCode为1,说明返回正常。contList是一个新闻标题的列表。

service里面这么勾画:

图片 29

图片 30

最后,要返回deferred.promise。

八、调用service显示数据

Service返回的凡一个promise,在调用的时候,会使用then方法来接收数据。Then方法有星星点点单参数,一个是马到成功后的拍卖,一个凡是败后底处理。修改controller里的代码:

图片 31

专注不要忘记了将NewsService注入进来。

还要反一下页面的起模板:

图片 32

现今运作一下探视:

图片 33

啊?Tab标题怎么乱码了为。这一定是编码问题了。

当tabs.html文件及接触右键,选择打开方式,选择带编码功能的html编辑器:

图片 34

接下来选取utf-8:

图片 35

得视,果然乱码了:

图片 36

重输入中文题目,保存。现在便是utf-8编码了。有或VS2015当保存的下选择了GB2312。但这种状态没有找到规律,有时候文件中呢起中文即从未有过错。如果赶上编码问题之口舌就是手动改一下咔嚓。

有关ion-list
的来得样式,可参看官方文档,有再多证:http://ionicframework.com/docs/components/#list

及http://ionicframework.com/docs/api/directive/ionList/

九、下拉刷新以及滚动加载重多

列表展示下了,现在长下拉刷新以及滚动到底层加载重多吧。

Ionic贴心的包了马上有限只措施。下拉刷新是ionRefresher:
http://ionicframework.com/docs/api/directive/ionRefresher/

加载重多是ion-infinite-scroll:
http://ionicframework.com/docs/api/directive/ionInfiniteScroll/

事先来拘禁下拉刷新。在controller里添加以下代码:

图片 37

实际下拉刷新就是再取一下率先页数据,把多少还赋值即可。

然后修改view,修改tab-newsList.html文件,在ion-content里上加以下代码:

图片 38

本着,就一个ion-refresher就下手定了。

加载重多也是看似,在controller里添加一个抱更多之措施:

图片 39

修改view:

图片 40

小心,下拉刷新是加在ion-content指令的无比前方,而加以在再度多是坐落最后,都设给ion-content指令包裹起来。

举凡无是好粗略?想想uwp里的下拉刷新……

十、使用VS Code编辑代码

附带说一下,我在以ionic
pack插件的早晚,频繁遇到了滋生VS2015崩溃的题材,目前还尚未找到好之解决办法。其实可以据此VS
Code来编码,安装后按F1,输入”扩展”,对你未曾看错,要输入中文!哈哈VS
Code中文化的极干净了。以前都是输入ext
install,现在必输入中文命令。然后找ionic和Angular的扩展安装,就得支撑智能提醒了。

图片 41

VS
Code写代码也是好凉爽的,ionic注释都是中文的哄:

图片 42

十一,跨平台

骨子里用Cordova主要还是以跨平台,ionic也支撑uwp啊,要不然我就是不好意思写成Win10
UWP开发系列了。在调节目标那里选一下,可以望支持n个阳台:

图片 43

选Universal,连接个Win10无线电话,一样能够编译运行哦^_^
是以此样子的:

图片 44

可观看,tab的职务在底下,跟Android平台是休等同的。Ionic根据各平台的计划语言进行了定制。但为可以通过配备项来更改。

iOS因为无装备,没有条件测试了。

若果出力不从心编译或无法安装的气象,可以试行清理化解方案,再重复编译即可。我碰到了几蹩脚,都是清理后就好设置调试了。

结语

这demo到这边虽截止了。查看新闻详情的页面和查看聊天详情的步调一样,就无写了。这个例子主要是想证明,VS2015对准Cordova的支撑就不行周全了。这仅仅是一个十分简单的入门例子,更深入之情己哉当日益学习。希望发趣味的同学并座谈。还有特别要紧之一些,对于超过平台App开发自己一直有之视角,跨平台不是全能的,要扣现实的运状况。比如简单的讯息浏览app,可以据此Cordova方式,如果提到到较多调用硬件的现象,还是原生代码效率又胜似。现在呢得以尝试Xamarin,VS2015
Update2已经放开了Xamarin的支撑,期待下Xamarin有重好之表现。

相关文章