使用 ionic 制作跨平台App小尝试

2017-03-13 分类：前端之旅 / 后端之路阅读(2014) 评论(0)

前言

之前学习用原生安卓写了个小壳子,把我的博客嵌进去了,2017年,都在流行前后端分离,好吧,我再看看能不能把我博客改版一下!!!

刚才看到了 ionic 这个玩意儿,配合cordova做跨平台的移动app,之前也玩了好多这种类型的东西,今天也看看这个效果如何,

首先先把框架跑起来吧!

npm install -g cordova ionic (注意有墙)

注意: 此框架是基于 AngularJS !

使用ionic官方提供的现成的应用程序模板，或一个空白的项目创建一个ionic应用：

$ ionic start myApp tabs

等待下载完成,进入目录,

启动服务!

ionic serve

这时候由于我本地开启了加速器(翻墙)还有本地的localhost服务器以及路由器的ip,所以显示了这三,可以根据自己的情况选择一个,

******************************************************
Dependency warning – for the CLI to run correctly,
it is highly recommended to install/upgrade the following:

Please install your Cordova CLI to version >=4.2.0 npm install -g cordova

******************************************************

Multiple addresses available.
Please select which address to use by entering its number from the list below:
1) 172.17.20.87 (BeikeJsq)
2) 192.168.199.184 (WLAN)
3) localhost

启动成功后,浏览器自动打开,预览界面!

大概目录结构图:

我们打开官方文档,

这里找到一个中文文档,速度还不错

app.js 里面有文件路由,根据打开的文件地址找到路由,然后找到控制器DashCtrl及模板

.state('tab.dash', {
  url: '/dash',
  views: {
    'tab-dash': {
      templateUrl: 'templates/tab-dash.html',
      controller: 'DashCtrl'
    }
  }
})

.state('tab.dash', {

url: '/dash',

views: {

'tab-dash': {

templateUrl: 'templates/tab-dash.html',

controller: 'DashCtrl'

}

})

我们随便选择一些模板,复制到templates/tab-dash.html文件里!

然后随便调一个借口玩玩看看效果!

angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope,$http,$ionicSideMenuDelegate) {
    $scope.getData = function () {
    };
    $scope.toggleLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
    };
    $scope.items = [];
    $http.post("http://api.he29.com/api/twitter/find")
        .success(function (response) {
            $scope.items = response.list
        });
})