使用ionic创建 Hybrid Mobile App

2019年9月15日 77次阅读 来源: Nero_Zzz

项目初始化，参考官方文档：http://ionicframework.com/getting-started/

我们 $ ionic start myApp tabs 为例，初始化完成之后，项目结构应该是这样的：
{}《使用ionic创建 Hybrid Mobile App》

index.html： 项目主页面，这个页面目前不需要改，当你需要引入别的js或者css是可以在这里添加；

templates/*.html： 各个模块对应的模板，会在 /www/js/app.js 中指定；

app.js： 定义项目module,routers,template 等一些配置 ，后面要修改配置都会在这个文件里，大致代码所示；

javascriptangular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])// [ ... ]可以引入别的module
    .run(function ($ionicPlatform) {
        $ionicPlatform.ready(function () {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }
        });
    })

    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            /* ... */
            .state('tab.chat-detail', {
                url: '/chats/:chatId',//对应的 url规则， chatId可以在 ChatDetailCtrl  中使用$stateParams.chatId来获取
                views: {
                    'tab-chats': {
                        templateUrl: 'templates/chat-detail.html',//这里指定模板文件
                        controller: 'ChatDetailCtrl'//这里指定 的 controller 在 controller.js 中声明
                    }
                }
            });
        $urlRouterProvider.otherwise('/tab/dash');
    });

controllers.js： 编写每个controller对应的具体功能，页面要绑定什么事件、有哪些功能都需要在这里添加；

services.js： 通过factory的方式，定义一些服务，如加载数据等；

ionic 预定义了很多常用的组件如：Lists、Loading、Popover、Tabs等；具体可以在 http://ionicframework.com/docs/ 查看；

之外的就是AngularJs的知识，比如指令；

html<ion-view view-title="Chats">
  <ion-content>
    <ion-list>
      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
        <img ng-src="{{chat.face}}">
        <h2>{{chat.name}}</h2>
        <p>{{chat.lastText}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">
          Delete
        </ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

ng-repeat 可以遍历数组，语法和模板语言差不多；

ng-src 对应img的src，这么写好处是避免在html初始化时去加载无效的img路径{{chat.face}}；

ng-click 可以绑定点击事件，remove方法在对应的controller中声明；

原文地址：http://nero-zou.com/use-ionic-build-hybrid-mobile-app/

    原文作者：Nero_Zzz
    原文地址: https://segmentfault.com/a/1190000002705121
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞