微信小程序,学习笔记框架,视图层

Posted 若叶岂知秋vip

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序,学习笔记框架,视图层相关的知识,希望对你有一定的参考价值。

微信小程序,学习笔记(一)框架,视图层

学习链接:http://www.w3cschool.cn/weixinapp/

因为其实并非原创,但是并没有什么好的类别可选,所以修改成:“翻译”了。

熟悉

文档结构介绍

--- [D] pages
--- [D] utils
--- [F] app.js
--- [F] app.json
--- [F] app.wxss

全局变量、对象、方法

普通类型

对象

  • App

    应用程序全局实例,在app.js中定义,每个程序只有一个实例,可以通过如下方式获取

    var app = getApp();

    该对象内容,全局属性或全局方法可以在这里面定义

    App({
        onLaunch: function () { ...... },
    
        getUserInfo: function () { ...... },
    
        // 全局变量对象
        globalData: {
            userInfo: null
        },
    
        globalIndex: 0
    });

    使用方法:

    var app = getApp();
    
    // 保存用户信息
    var userInfo = app.globalData.userInfo;
    
    // 普通类型全局变量
    var index = app.globalIndex;

视图层(View)

数据绑定({{}})和条件渲染(wx:if

使用两个嵌套的大括号方式

Page({
    data: {
        name: ‘lizc‘,
        index: 0,
        condition: true,
        flag: 0,
        a: 1,
        b: 2,
        c: 3,
        str: ‘world‘
    }
});
  1. 普通绑定:

    <view>{{name}}</view>

  2. 组件属性绑定: 必须使用引号引起来,在js改变index值的时候,页面会自动刷新最新值

    <view id="item-{{index}}"></view>

  3. 控制属性:即属性值是需要通过满足一定条件达到目的

    <view wx:if="{{condition}}"></view>

    也可以是条件表达式,或运算表达式:
    <view hidden="{{flag ? true : false}}"></view>

    多级条件判断,如:if ... elif ... else

    <view wx:if="{{flag !== 0}}">flag不为0的时候才显示这个view</view>
    <view wx:elif="{{flag > 0 && flag < 8}}">flag取值在 0 ~ 8 之间的值时候显示这个</view>
    <view wx:else>上面两个都不满足显示条件的时候就会显示这个</view>
  4. 使用<block>块标签来使用条件判断控制多个组件的行为,<block>只起到分组的作用,并不会真的渲染到出来

    <block wx:if="{{flag > 0}}">
        <view>组件一</view>
        <view>组件二</view>
    </block>
  5. 算术运算

    <view>{{a}} + {{b}} + c</view>
    <view>‘hello‘ + {{str}}</view>
  6. 对象绑定

    其实和普通类型绑定差不多

    <view>{{obj.name}} + array[0]</view>

PS: 使用条件来控制view时候,和hidden属性的比较
- view的条件判断,会在条件中的值发生变化的时候,会先销毁原先的,然后满足条件的时候重新渲染和销毁
- hidden属性控制view的显示和隐藏,这个属性的组件始终会被渲染,只是在需要的时候控制它的隐藏和显示

最后比较得出:如果需要频繁频繁切换的情况下用hidden属性控制,如果在绑定的数据基本不变的情况下使用wx:if条件来控制

列表渲染(wx:for

  • wx:for,可以同时生成多个元素

    参数属性说明:

    • wx:key="unique...":指定组件的唯一标识,列表发生变化需要保持自身的状态和特征不发生变化,并且能在重新渲染的时候,重新排序;
    • wx:key="*this":功能同上,但这个是要求项目中的item本身是唯一的,也就是你需要用到的属性值是唯一;
    • wx:for-index="index":指定循环的下标变量名,默认:index
    • wx:for-item="item": 指定当前项变量名,默认:item

    例如:

    <view wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row">{{dates[index + idx].desc}}</view>
    
    // dates: 需要遍历的数据对象
    // ‘unique‘: 数据项的唯一标识符
    // ‘idx‘: 指定的下标变量名
    // ‘date‘:指定的当前数据的变量名
    // 指定之后可以在属性中直接使用‘idx‘, ‘date‘变量,例如,上例的‘id‘: "ctl-list-{{idx}},这里就用到了‘idx‘来添加属性‘id‘
    
    // 生成后的实际结果:
    <view class="ctl-list-row" id="ctl-list-0">1/4</view>
    <view class="ctl-list-row" id="ctl-list-1">1/3</view>
    <view class="ctl-list-row" id="ctl-list-2">1/2</view>
    <view class="ctl-list-row" id="ctl-list-3">1/1</view>
    <view class="ctl-list-row" id="ctl-list-4">12/31</view>
    <view class="ctl-list-row" id="ctl-list-5">12/30</view>
    <view class="ctl-list-row" id="ctl-list-6">12/29</view>

模版(template)

用来定义代码片段,完成之后可以在其他地方通过模版直接套用该模版中组件。

  • 模版定义:

    <!--
        index: Integer
        msg: String
        date: String
    
        参数可以是可用的任意类型
    -->
    <template name="tplName>
        <view>
            <text>{{index}}: {{msg}}</text>
            <text>Date: {{date}}</text>
        </view>
    </template>
  • 模版使用:通过模版名称

    <template is="tplName" data="{{...item}}" />
    
    // 数据,模版所需要的数据
    Page({
        data: {
            item: {
                index: 0,
                msg: ‘hello‘,
                date: ‘2017-1-4‘
            }
        }
    });
    
    // wxml结构中效果:
    <view>
        <text>0: hello template</text>
        <text>Date: 2017-1-4</text>
    </view>
    
    // 实际显示效果:
    0: hello template, Date: 2017-1-4
  • 模版和列表wx:for结合使用,同时生成多个模版

    使用的时候使用半闭合标签,以及需要使用到is=""来指定模版名称去使用的指定模版

    <template is="tplName" data="{{...item}}" wx:for="{{[0, 1, 2, 3]}}" wx:for-item="it" />
    
    // wxml结构中效果
    <view>
        <text>0: hello template</text>
        <text>, Date: 2017-1-4</text>
    </view>
    <view>...</view>
    <view>...</view>
    <view>...</view>
    
    // 显示效果,即多个重复模版
    
    0: hello template, Date: 2017-1-4
    0: hello template, Date: 2017-1-4
    0: hello template, Date: 2017-1-4
    0: hello template, Date: 2017-1-4
    
    // 尝试了下去修改 index 值,未成功,暂时还不知道怎么弄
    
    <template is="tplName" data="{{...item}}" wx:for="{{[0, 1, 2, 3]}}" wx:for-index="index" wx:for-item="it" />
    
  • 运行时通过条件判断来决定使用哪个模版

    <!-- 运行时决定使用哪种模版 -->
    <template name="tpl1">
        <view>template first</view>
    </template>
    
    <template name="tpl2">  
        <view>template first</view>
    </template>
    
    // 运行时根据`is=""`中的语句来判断,决定使用的是‘tpl1‘还是‘tpl2‘
    <block wx:for="{{[1, 2, 3, 4, 5, 6]}}">
        <template is="{{item % 2 === 0 ? ‘tpl2‘ : ‘tpl1‘}}" />
    </block>

PS: 生成的模版拥有自己独立的作用域,因此所使用的数据必须是data=中指定的数据

事件处理

  • 点击事件:bindtap

    例如:<button class="button button-refresh" bindtap="refreshDateTbl">refresh</button>

    // 绑定的函数在Page中定义,事件函数的参数为 event 事件对象
    
    Page({
        refreshDateTbl: function ( event ) {
            var that = this,
                index = that.data.index + 1,
                len = that.data.dates.length;
    
            if ( index >= len ) {
              index = 0;
            }
    
        that.setData({index: index});
    
        console.log( event );
      }
    });
    

    从输出结果得出,event 对象主要包含以下部分

    changedTouches:Array[1]
    currentTarget:Object
    detail:Object
    target :Object
    timeStamp:2881
    touches:Array[1]
    type:"tap"
    
  • 事件对象:event

    原生事件属性列表:

    1. type: 即当前事件类型(tap / touch);
    2. currentTarget:表示当前组件信息集合;
    3. target: 通过打印看了下,console.log( event.currentTarget == event.target ); 结果:false,说明 currentTargettarget 不是同一个对象,但是里面的东西应该都是当前目标的属性(不是很确定);看文档解释是:触发事件的组件的属性集合currentTarget是当前,target是触发事件的组件,不是很明白区别在哪??
    4. timeStamp: 这个时间也不知道是啥,应该不是点击动作时间也不是响应时间,有2.8秒之久。(理解错误,正确:事件生成的时间戳

    自定义事件对象属性列表:

    1. detail: 当前组件的坐标(x, y);

    触摸事件对象属性列表:

    1. touches:这个接触的对象数组,难道是和事件冒泡有关?表示网上冒泡的父对象集合??瞎猜,应该是:当前触摸事件的触摸点信息数组
    2. changedTouches: 应该和上面的touches有联系,解释为:当前变化的触摸点信息的数组;

    以下是各事件属性的内容,很容易理解

    1. target: id, dataset, offsetLeft, offsetTopdataset要解释下:表示事件源组件上的自定义属性data-的集合;
    2. currentTarget: id, ‘dataset,tagName`;

      dataset:自定义属性集合,其中自定义属性 data- 中必须都为小写,需要使用 - 作为连接符, 自定义后的属性都会出现在事件对象的dataset对象上,举例:

      <view data-my-name="lizc" data-myAge="30"></view>

      最终 nameage 可以通过如下方式去调用

      event.target.dataset.myName === ‘lizc‘; // `-` 连接的都会转成驼峰式
      event.target.dataset.myage === ‘30‘; // 而驼峰式写法会被转成全小写形式

      因此推荐使用 - 连接符去书写自定义数据属性

    3. touches:触摸点数组,触摸点对象 TouchCanvasTouch 的集合,表示当前页面上所有触摸点的集合,包含属性:

      Touch 对象

      • identifier: 触摸点标识符,类型:Number,应该是个类似标记的东西,或者索引之类的,唯一;
      • pageX, pageY:相对于整个文档而言,距离文档左上角的 xy 轴的距离;
      • clientX, clientY:相对于可是区域而言,xy 轴的距离

      CanvasTouch对象:

      • identifier: 同上;
      • x, y:这个只有一个坐标,即相对画布左上角而言的坐标;
    4. changedTouches:表示发生变化的触摸点对象集合,比如该触摸点发生了touchstart, touchmove, touchend, touchcancel变化;

    5. detail:跟自定义事件有关,自定义事件携带的数据,不是很明白,具体内容有待考证。

PS1: 中午休息了会,打开代码,随便点击了几下按钮,突然发现这个timestamp可能是什么鬼了!!!

下面是打印

```

Object {type: "tap", timeStamp: 5053127, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5053311, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5053496, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5054722, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5054936, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5055120, target: Object, currentTarget: Object, detail: Object…}

new Date() 一下:

new Date(0)
Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
new Date(5053127)
Thu Jan 01 1970 09:24:13 GMT+0800 (中国标准时间) 

结果发现相差了 1:24:13,这不是刚刚启动程序那会!!!!

```

从而得出结论:这个timestamp应该就是程序运行的时间,单位:(ms)

PS2: 好傻!!看完事件大概,居然没继续往下看,文档下面就有每个属性的明确解释

timeStamp: 事件生成时的时间戳;我还把它当成了程序运行时间~~~~, 也就是该页面打开到事件触发时的这段时间。
  • 事件类型:冒泡和非冒泡

    冒泡事件:(除以下冒泡事件之外的其他事件均为非冒泡事件)

    1. touchstart: 手指刚碰触到屏幕的时候触发的事件;
    2. touchmove:手指触摸后移动时触发;
    3. touchcancel:手指触摸动作被打断,即非正常退出触摸,如来电或短信等;
    4. touchend:手指触摸结束;
    5. tap:手指触摸,即点击事件,触摸即离开;
    6. longtap:手指触摸后超过350ms再离开,会被判定为长按。

    非冒泡事件

    1. <form/>标签的submit事件
    2. <input/>标签的input事件
    3. <scroll-view/>标签的scroll事件

    特殊事件:

    1. <canvas />的触摸事件不可冒泡,因此没有 currentTarget,理解:因为不存在冒泡行为,也就是说被点击事件和当前事件组件永远只可能是同一个组件。
  • targetcurrentTarget 对比分析

    测试代码:日期列表,点击日期行,通过事件冒泡去触发父组件的tapDateRow事件

    <view  bindtap="tapDateRow" id="ctl-list-date" class="ctl-list-date">
      <view wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row">{{dates[index + idx].desc}}</view>
    </view>
    
    // tap 后输出:
    
    // 点击的当前行,即:event.target
    Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}
    
    // 绑定事件的组件,即:event.currentTarget
    Object {id: "ctl-list-date", offsetLeft: 0, offsetTop: 0, dataset: Object}

    从输出可知,target即你点击的那个组件,也就是触发点击事件的组件,而 currentTarget 是你绑定点击事件的那个组件,如果点击事件句柄同时绑定在被点击的那个组件上,那么这两个对象是不是应该是指同一个组件呢?(猜测对一半错一半,验证如下:)

    // 日期列表
    <view bindtap="tapDateRow" wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row">{{dates[index + idx].desc}}</view>
    </view>
    
    // 点击日期行事件处理句柄
    tapDateRow: function ( event ) {
      console.log( event.target );
      console.log( event.currentTarget );
      console.log( event.currentTarget === event.target );
    }
    
    // 输出
    Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}
    Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}
    false
    

    结论:通过输出可知,两个对象的内容是一模一样的,说明这两个属性都是代表着当前被点击的组件,但是两者却不是指向同一个空间,即该组件。说明这两个对象具有自己独立的内存空间,而非在绑定事件和触发事件对象相同时都指向同一个内存空间。

  • 事件绑定:bindcatch,即冒泡和非冒泡

    bind:

    bindtap, bindtouchstart, bindtouchmove, bindtouchcancel, 
    bindtouchend, bindlongtap, ......

    catch:

    catchtap, catchtouchstart, catchtouchmove,catchtouchcancel, 
    catchtouchend, catchlongtap, ......

    例如:

    <view id="view1" bindtap="f3">
        <view id="view2" catchtap="f2">
            <view id="view3" bindtap="f1">
            </view>
        </view>
    </view>
    
    1. 点击 view3 会调用 f1, 然后调用 f2,到此结束,因为 view2 用的是非冒泡绑定,阻止了事件继续往上冒泡到 view1;
    2. 点击 view2 只会调到 f2;
    3. 点击 view1 只会调到 f1;

事件总结:

  1. 事件对象:event;
  2. 事件类型:冒泡和非冒泡;
  3. 事件绑定:bindtap, bindtouch*;
  4. 事件源和触发源:event.currentTargetevent.target;
    a. id:事件组件对象的id
    b. target:自定义属性集合 dataset(属性定义:data-my-name,使用:event.target.dataset.myName);
    c. offsetLeft/offsetTop: 事件组件的 left/top 实际值。
  5. 事件戳: event.timeStamp,单位:(ms);
  6. 触摸点对象:event.touchesTouch: identifier, pageX/pageY, clientX/clientY; CanvasTouch: identifier, x/y );
  7. 变化的触摸点对象:event.changedTouches
  8. 自定义事件携带的数据对象:event.detail

引用

引用外部文件方式:importinclude,两个引入刚好相反或者说互补,前者是引入文件中的模版代码template,而后者是引入文件中除了template定义的之外的所有代码完整拷贝到当前位置。

  • import

    使用import引入时不能嵌套引入,即:加入 a.wxml 中引入了 b.wxml 中的模版,然后 b.wxml 引入了 c.wxml 中的模版,那么 a.wxml 中也无法直接引入 c.wxml 中的模版。

    <!-- a.wxml -->
    <template name="tplA">
        <view id="id_a"></view>
    </template>
    <!-- b.wxml -->
    <import src="a.wxml" />
    <template name="tplB">
        <view id="id_b"></view>
    </template>
    
    // 引入 a.wxml 中模版
    <template is="tplA" />
    <!-- c.wxml -->
    <import src="b.wxml" />
    <template is="tplB" />  <!-- 引用模版生效 -->
    <template is="tplA" /> <!-- 引用模版无效 -->

    未报错,只是警告,但也可知import无法嵌套跨文件引入:

    Fri Jan 06 2017 15:53:55 GMT+0800 (中国标准时间) WXML Runtime warning
    Template "tplA" not found.
  • include

    这个引入的是除了template定义之外的所有代码,相当于将代码拷贝到当前位置。

    <!--a.wxml-->
    <template name="tplA">
        <view>AAAAAAAAAAAAAAAAAAAAAAAA</view>
    </template>
    
    <view>header</view>
    <!--b.wxml-->
    <template name="tplB">
        <view>BBBBBBBBBBBBBBBBBBBBBB</view>
    </template>
    
    <view>footer</view>
    <!--c.wxml-->
    <include src="a.wxml" />
    <view>body</view>
    <include src="b.wxml" />

    结果: 如下,只是单纯引入了除 template 之外的代码,并且是拷贝到 inlucde 使用的当前位置

    <page>
    <view>header</view>
    <view>body</view>
    <view>footer</view>
    </page>

总结:该文主要是根据 W3CSchool 上的资料,学习记录下来的(后续也会一直学习微信小程序的东西)其实也基本差不多是 copy 到一起了吧,不过这样有助于记忆,没有什么技术含量的东西。最近一段时间有点忙,博客什么的压根都没上过,一个人在负责一块还是感觉有点人手不足的,这段时间几乎每天都是10点,11点多下班,周六还要加班。

忍不住要吐槽,不吐不快。。。。。。

  1. 槽点1:组内来了两个应届生,组长之前就说好了让我一个跟着我让我带着,一起帮忙负责这一块,可是说是这么说,中途不停的给他安排其他任务,我总感觉是说安排到我这,就是来打酱油的,最后还是的自己去弄,后面又新接了一个开发的任务,搞的人都快搞虚了,不过也算是乐在其中吧,还是比较喜欢创造新东西,每天不停的去给别人填坑也是种苦,宝宝心里苦~!)

新开发任务总算完结了,后期测试也算告终,其实也不是什么复杂的东西,只是今年刚进公司对公司业务这块并不是非常熟悉,所以花了点时间。现在搞完了自己也算有点成就感,嘿嘿~~!!!

  1. 槽点2:来了快一年,接触过无数厂家的前端代码,有些写的复杂的让人头疼,给人感觉就是:我就是要写的这么复杂,甚至对象嵌套多达6-7层(Σ( ° △ °|||)︴),显得我牛逼呀,哈哈~~~,是SB吧 - -!。还有一些厂家代码确实非常不错,对象,原型,闭包,命名等等,都是用的溜溜转,也学到不少东西。

  2. 槽点3:代码风格,代码格式,代码规范,规范,规范啊,重要的事情说三遍,包括本公司的代码,和大多数其他厂家的代码,代码几乎没有任何规范,格式缩进命名等等,每次看到那种代码,我真想跳楼,
    本来就一个很小的BUG,因为代码问题,硬是要花半天甚至一天才能找到问题点,然后发现其实就是个变量用错地方,或者是哪个单词写错了。

这一年来,经历了很多事情和看了很多代码,对自己要求也严格了

  1. 变量名可以稍微长点(不能太长哦,:-)),但一定要表达清楚其意义,让人一看到就知道是干什么的(继续吐槽:全局变量漫天飞,还命名毫无语义感,不找找还真不知道是干嘛的,另外也很少见过全局变量用一种约定方式去定义,比如说:前面统一加上个公司英文符号也好撒,或者你前面加个g/global什么的也好啊,个人比较喜欢用g开头去定义全局变量);
  2. 代码风格,包括缩进,空格的使用,有了进一步的认知和运用;
  3. 另外还就是一种思想:面向对象思想,真的很重要,包括新开发的任务上也运用上了,不过水平有限,也只是简单的运用而已;

好了,很久没记录什么了,也快放假回去过年了,虽然最近烦心事多,还是要好好努力下去不是,30岁或许是道砍,也或许不是,端看自己怎么去看待和对待自己的人生了,多年来的感受只有一点:做自己最热爱的事情,让你能彻夜不眠还乐在其中的事情,那才是人生的乐趣,一味的为了生活而生活何尝不是行尸走肉般的活着。

给自己加把油,加油!

这一年来很艰辛,也很感谢我的兄弟朋友们能一直给与我帮助和鼓励,感谢你们!

最后感谢我的老婆,这几年不管风雨不管中间有多少苦难都不离不弃从无怨言,还一直鼓励着我,同时还给我带来一个很可爱的小闺女,谢谢我的老婆,有你的陪伴和鼓励,我会一直努力下去,加油!

2017年,我来了,哈哈哈哈!








以上是关于微信小程序,学习笔记框架,视图层的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序入门笔记6(视图层)

微信小程序学习笔记-2-常用组件介绍

微信小程序视图层WXML_小程序条件渲染

微信小程序框架

微信小程序框架

微信小程序学习Course 2 事件