Ionic+Visual Studio App开发

本文介绍了使用Ionic框架和Visual Studio进行移动应用开发的详细步骤,包括环境搭建、项目创建、AngularJS基础、HTML页面制作、图标与启动画面设置、测试与调试,以及在开发过程中遇到的常见问题和解决办法,旨在帮助开发者快速入门。
摘要由CSDN通过智能技术生成

因为需要参加一个设计类的比赛,需要演示一下设计的APP效果,本来是打算用一些原型设计软件来做,结果发现设计师们人手一个Mac果然是有理由的,好多面向设计师的原型设计软件都是要在OS X上。所以最后还是选了ionic这个框架。ionic的好处是基于HTML和AngularJS,可以适用于Android和iOS,且代码相对Java来说入门更简单。

平台搭建

一个基本的ionic环境必备的是node.js+cordova+ionic命令行工具。ionic的官网给出了很详细的入门介绍,地址如下:ionic入门。同样,ionic一样有中文社区ionic中文社区
因为ionic官网推荐windows下的用户使用visual studio,所以最后大部分的工作都是在visual studio环境下完成,虽然逼格不够,但是胜在集成度高啊。需要注意的是,visual studio自带安卓模拟器可以直接模拟出效果,但是如果需要生成apk,在手机端调试,还是需要命令行来操作。当然可能visual studio也能做到,但是因为没有找到具体的方法所以最后还是用了node.js的命令行来完成。此外,在node.js上编译apk需要android开发环境,所以需要在电脑上安装android-sdk及相关工具。最后所有用到的工具如下:
- Visual Studio Community 2015VS下载
- node.jsnode.js下载
- android-sdk,建议可以直接用android studioAndroid Studio下载

安装好android环境之后需要配置好环境变量,Win10下配置环境变量的方法如下:
-按Window+X键
-选择控制面板-系统和安全-系统-高级系统设置-环境变量
-配置ANDROID_HOME环境变量,值设为sdk所在目录,比如C:\Program Files (x86)\Android\android-sdk。同时在path变量下添加相应的platform-tools和build-tools文件夹地址
至此,所有需要的环境基本上都配置好了。

开始第一个ionic项目

在Visual Studio中创建ionic项目,基本的操作可以参见VS官方给出的指导visual studio下ionic。总的来说就是在VS下安装ionic模板之后就可以利用模板开始创建和了解ionic项目了。

AngularJS

前面说过ionic是基于HTML+AngularJS,无奈博主对AngularJS了解为0,所以开发的过程中只能先学,到现在其实也只是懂一点皮毛,这里只分享一些学习过程中找到的不错的学习资料,希望能有所帮助。
-一个系

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值