ionic之与你相遇_ionic判断网络属于国内还是国外-CSDN博客

本文链接：https://blog.csdn.net/zjdicvksliefh/article/details/52146272

ionic之与你相遇

缘起

由于公司的项目需要用到了Hybrid App开发模式，经过几天的可行性分析，最后决定使用ionic作为Html5的移动端开发框架（毕竟国外那么火，而且angularJS号称下一代web开发技术，笑笑不说话）。当然了，这里并没有用到我们熟悉的PhoneGap与Cordova，至于原因还是因为项目需求需要用到国内的一个Hybrid App开发框架进行打包和进行本地能力调用。

初见

ionic作为一个移动端的Html5开发框架，它提供了丰富的组件，能够让我们快速的开发出我们需要的移动界面。同时结合angularJS，能够很优雅的使用MVC模式进行开发。下面介绍如何在在不使用PhoneGap和Cordova的情况下如何进行ionic的开发。

1.引入ionic

和传统的前端开发一样，ionic的引入有两种方式。一种是网络引入，一种是本地引入。这里我们采用后一种。至于原因，我想应该都知道，最终的app是要打包到手机上的，手机加载本地资源的速度是远远快于加载网络资源的。这里附上ionic的下载地址。下载之后，只需要将其copy至我们工程目录，然后通过相对路径引入ionic.min.css和ionic.bundle.min.js就可以进行愉快的开发了。

2.使用ionic

废话不多说，直接上代码。

<!DOCTYPE html>
<html lang="en" ng-app="ionicApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Title</title>
    <link href="../lib/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="../lib/ionic/js/ionic.bundle.min.js" ></script>
    <script>
        var app = angular.module("ionicApp", ["ionic"]);
        app.controller("myContrl", function ($scope) {
            $scope.name = "ionic";
        })
    </script>
</head>
<body ng-controller="myContrl">

    <ion-header-bar class="bar-positive">
        <h1 class="title">Hey, ionic!</h1>
    </ion-header-bar>

    <ion-content>
        <p>Hey, {{name}}!</p>
    </ion-content>
</body>
</html>

情结

看到这里是不是发现导入ionic非常简单，其实它本质上就是封装好的一些css样式与js，如果不是使用PhoneGap和Cordova，完全不用输入npm命令，苦苦等待最后还是下载不下来。从这里我们还可以想到其它的使用场景：例如微信开发，作为web页面的框架；原生app中嵌入html5页面的开发等。这些理论上都是可行的，如果尝试过程中遇到什么bug，别打我（毕竟我也没试过，嘻嘻）。好了，今天就到这里了，以后是要和ionic结下这个情了。