Ionic framework框架开发跨平台App

直接上干货:

一,配置开发环境:

    1.1 首先您需要安装Node.js,确认电脑已安装了node.js,否则请下载安装node.js;

    1.2 然后通过命令行工具安装最新版本的 cordova 和 ionic:(install ionic)

        安装cordova:sudo npm install -g cordova

        安装ionic:sudo npm install -g  ionic

        更新:npm update -g cordova

        卸载:npm uninstall cordova -g

    1.3 安装iOS真机调试

        sudo npm install -g ios-deploy  [sudo npm install -g ios-deploy --unsafe-perm=true]

    完成以上步骤后,就可以开始我们的项目了:

二,创建项目

    2.1 执行接下来的命名,创建一个新项目

        ionic start myFirstApp sidemenu

        其中“myFirstApp”是我们的项目的名称,"sidemenu"是项目模板,其中可用的模板还有:

        blank ................ A blank starter project for Ionic

        complex-list ......... A complex list starter template

        maps ................. An Ionic starter project using Google Maps and a side menu

        salesforce ........... A starter project for Ionic and Salesforce

        sidemenu ............. A starting project for Ionic using a side menu with navigation in the content area

        tabs ................. A starting project for Ionic using a simple tabbed interface

        tests ................ A test of different kinds of page navigation

    2.2 cd到项目的根目录下,

        2.2.1 安装各个插件(视项目定)

            ......

            相关命令:

            ionic state reset —plugins 复位插件名    //重载插件

            ionic plugin list                        //列出所有已安装插件

            ionic plugin remove  插件名    //卸载插件

            ionic plugin add  插件地址      //安装插件

        2.2.2 执行接下来的命令来添加平台:

            ionic platform add ios 

            <移除平台:ionic platform remove ios>

        这样执行完毕后就已经将iOS平台添加到项目中了,即可完成iOS原生代码的添加;

        ionic是跨平台的开发框架,当然也可以执行如下命令添加Android平台,只是配置环境时的命令不需要sudo;

            ionic platform add android

    2.3 将刚刚创建的项目安装到iPhone中

        ionic build ios

        然后再输入:

        ionic run --emulate ios 

        就会自动打开iPhone模拟器并进行安装。

        或者在项目的根目录下运行模拟器任务

        ionic run ios --target iPhone-6  //此过程包括了build and run

        指定设备:iPhone-4s,iPhone-5,iPhone-5s,iPhone-6-Plus,iPhone-6,iPad-2,iPad-Retina,iPad-Air,Resizable-iPhone,Resizable-iPad,的时候,会被安装到指定的机型上。

        2.4 若是android项目安装到Android设备或模拟器上,同样类似的方法:

        ionic build android

        然后输入:

        ionic run --device android

        或者输入:

        ionic run --emulate android

        这样会安装到android自带模拟器上。

        2.5 若要在网页中预览刚才的项目,执行

       ionic serve

        ionic serve --address 192.168.0.109//指明一个外部的ip地址,可以让外部用户查看。

        以成功开启本地预览

        然后,打开浏览器在浏览器地址里输入上面的地址:

        http://localhost:8100

        即可预览项目。

        在终端中输入q会停止服务。

三、开发项目及之后的项目调试,陆续写入本博客。。。



猜你喜欢

转载自blog.csdn.net/zhangkui0418/article/details/79363415