sqliteIonic-wechat项目边开发边学(三):自定义样式,指令,服务

#摘要
上一篇著作首要介绍了一个ionic项目之正规化目录结构,header标签的用,以及页面内的切换。这篇稿子实现的效应有:
音讯数据的拿走, 音讯列表的展现, 音信标为已读/未念,
重要涉嫌的及的知识点有:

  1. ion-list的使用
  2. ion-popup的使用
  3. 经sass自定义样式
  4. localStorage的使用
  5. 由定义指令与劳动

先押功能图: sqlite 1

#效率分析 在开班在此以前, 最好先想一下音页面的显要效用, 和大约什么实现.
这样后写序才无会晤乱. 我大致列了转
sqlite 2

音信之多少暂用localStorage存储, 但这不是好的章程,
localStorage可能相会受文件清理掉, 后边会换sqlite存储
#页面布局 首先在’tab-message.html’中增长聊天音信之布局

<ion-view>
    <ion-content on-swipe-left="onSwipeLeft()">
        <!--这里的rj-close-back-drop是自定义指令, 后面会讲是干嘛的-->
        <ion-list rj-close-back-drop>
          <ion-item class="item-avatar" on-hold="popupMessageOpthins($index)" rj-hold-active ng-repeat="message in messages">
              <img ng-src="{{message.pic}}">
              <!--这个就是来了新消息, 头像上的小红数字-->
              <p ng-bind="message.noReadMessages"></p>
              <h2 ng-bind="message.name"></h2>
              <p class="rj-list-p" ng-bind="message.lastMessage.content"></p>

          </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

我们在试是的当儿, 由于’messages’还不定义, 先不绑定,
用实际的值代替,像这样

<img src="img/ben.png">
<p>1</p>
<h2>小王</h2>
<p class="rj-list-p">你在干什么?</p>
12:30

这样虽然会看效果了 sqlite 3
#打定义样式 可以望上图有硌丑, 需要我们团结一心修改样式,
可以自己添加css文件link进来, 但官方推荐使用sass的计修改,
关于sass的语法,
可以关押这个,
看罢就大多得了.

第一在类型目录下,运行命令

$ionic setup sass
$ionic serve

运作之后, 就会师针对scss/ionic.app.scss文件监控, 有涂改, 会自动编译该文件,
输出及css/ionic.app.css

故此你每一回修改保存scss文件后, 浏览器会看到实时的机能, 异常方便.

打开scss/ionic.app.scss文件, 如下

/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

可观察官方预定义的水彩几单颜色, 即便要改预定义的颜料,
间接改动那里就足以了.

俺们协调的体裁, 直接当前面加加. 我们于前边长

$item-avatar-border-radius: 0;

得发现头像变成方的了, 这怎么亮修改是变量呢?

打开www/lib/ionic/scss/目, 可以看出多scss文件

├── _action-sheet.scss
├── _animations.scss
├── _backdrop.scss
├── _badge.scss
├── _bar.scss
├── _button-bar.scss
├── _button.scss
├── _checkbox.scss
├── _form.scss
├── _grid.scss
├── ionicons
├── ionic.scss
├── _items.scss
├── _list.scss
├── _loading.scss
├── _menu.scss
├── _mixins.scss
├── _modal.scss
...

这几个都是法定的体文件, 找到items.scss文本,
那多少个虽然是ion-item相关的样式, 再搜border-radius疾便会找到啦

切切实实的底细我便非说啊, 另外的修改都类似,
可以参照自我的代码
#popup的以 关于$ionicPopup的详实使用,
可以参照官网

首先在controllers.js文本被补充加一个controller:

.controller('messageCtrl', function($scope, $state, $ionicPopup, localStorageService, messageService) {
    $scope.popup = {
        isPopup: false,
        index: 0
    };
    $scope.onSwipeLeft = function() {
        $state.go("tab.friends");
    };
    $scope.popupMessageOpthins = function($index) {
        $scope.popup.index = $index;
        //这里通过$ionicPopup.show()方法创建了一个自定义的popup
        $scope.popup.optionsPopup = $ionicPopup.show({
            templateUrl: "templates/popup.html",
            scope: $scope,
        });
        $scope.popup.isPopup = true;
    };
    //实现标为已读/未读, 注意$scope.popup.optionsPopup.close()方法
    //用来关闭弹窗, 我竟然找了很久才发现这个接口
    $scope.markMessage = function() {
        var index = $scope.popup.index;
        var message = $scope.messages[index];
        if (message.showHints) {
            message.showHints = false;
            message.noReadMessages = 0;
        }else{
            message.showHints = true;
            message.noReadMessages = 1;
        }
        $scope.popup.optionsPopup.close();
        $scope.popup.isPopup = false;
        messageService.updateMessage(message);
    };

这边而留意少触及

  1. 要在routes.js中将该controll传进去
  2. 消通过打定义样式, 去丢起带的题和按钮

//routes.js
.state('tab.message', {
    url: '/message',
    views: {
        'tab-message': {
            templateUrl: 'templates/tab-message.html',
            controller: "messageCtrl"
        }
    }
})

#自从定义指令 细心的总人口会见发现个别个问题:

  1. 弹来popup时, 联系人列表没有动画效果
  2. 弹有popup后, 点击popup以外的地点, popup不可知没有, 这有限个问题,
    就因而打定义指令来化解

首先在directives.js文本中上加rjCloseBackDrop指令,
用来化解点第二单问题

.directive('rjCloseBackDrop', [function() {
        return {
            scope: false,//共享父scope
            restrict: 'A',
            replace: false,
            link: function(scope, iElm, iAttrs, controller) {
                //要在html上添加点击事件, 试了很久- -!
                var htmlEl = angular.element(document.querySelector('html'));
                htmlEl.on("click", function(event) {
                    if (event.target.nodeName === "HTML" &&
                        scope.popup.optionsPopup &&
                        scope.popup.isPopup) {
                        scope.popup.optionsPopup.close();
                        scope.popup.isPopup = false;
                    }
                });
            }
        };
    }])

再创建rjHoldActive令, 用来解决第一独问题

.directive('rjHoldActive', ['$ionicGesture', '$timeout',
        function($ionicGesture, $timeout, $ionicBackdrop) {
            return {
                scope: false,
                restrict: 'A',
                replace: false,
                link: function(scope, iElm, iAttrs, controller) {
                    $ionicGesture.on("hold", function() {
                        iElm.addClass('active');
                        //300ms后恢复
                        $timeout(function() {
                            iElm.removeClass('active');
                        }, 300);
                    }, iElm);
                }
            };
        }
    ])

末段分别以ion-listion-item落得助长指令

<ion-list rj-close-back-drop>
    <ion-item class="item-avatar"rj-hold-active ng-repeat="message in messages">

ok, 问题迎刃而解, 有硌多少感动~ sqlite 4

#自定义服务 前边讲的都是界面的东西, 这聊天记录的多寡哪儿来?
此地大家从定义一个假json数据, 用来学,
www目录下创办文件data/json/messages.json

"messages": [{
        "id": 0,
        "name": "李明",
        "pic": "img/adam.jpg",
        "lastMessage": {
            "time": "2015-10-12 15:34:55",
            "content": "你在干什么?",
            "isFromeMe": false
        },
        "noReadMessages": 2,
        "showHints": true
    },...

近来利用的数额还定义在即时, 前边还待什么数据更补充加
咱拿数量存到localstorage蒙,
我们都知晓localstorage是基于keyvalue存储的
说到底不克拿用人的信息还有同样长条key中, 所以我定义八只劳务

  1. 拿一切json数据拆成单独的message, 把独立的message合并成一个目标
  2. 封装setItem, 基本数据的囤获取

切切实实我哪怕非糊代码了, 讲下服务概念好了, 怎么动,
比如定义了一个test服务:

.factory('test', ['', function(){
    return{
        dosomething: function(){
            return 0;
        }
    };
}])

因此的时段一向把test注入, test.dosomething()调用:

.controller('someCtrl', function($scope, test) {
    test.dosomething();
    ...
}

凡是不是深粗略?

#终极 那篇写的良充足, 其实实现的功力异常简单, 重假诺倘若学会怎么定义样式,
自定义指令, 自定义服务
这么于前面实现更扑朔迷离的效益时, 不至于纠结那么些细致节.

我发现一个总人口自学, 确实有头不便, 一些多少题目百度根本搜不顶,
google上才于靠谱

用小伙伴等遭逢困难, 不妨google一下, 基本还有答案的哦
出问题欢迎大家评论, 我会的相会即时苏醒~

Git代码

网站地图xml地图