zoukankan      html  css  js  c++  java
  • 微信小程序:第五天

    微信小程序:第五天

    1.视图层层

    视图层主要有页面描述文件和页面样式文件组成。
    创建示例项目index页面的视图如下:

    <!--index.wxml-->
    <view class="container">
      <view  bindtap="bindViewTap" class="userinfo">
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>
    

    可以看到,其和html文件基本大致一样,后面我们需要实战的时候掌握其组件,所以我们需要自己将其都熟悉一下,方面便于我们以后的项目开发,也利于我们以后的工作,可以做到心中有数。

    2.数据绑定

    示例代码中有如下代码:

    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    

    这就是小程序中的数据绑定。

    3.条件渲染

    条件渲染其实高级的数据绑定,在绑定的时候加以判断。

    <view wx:if="{{condition}}"> True </view>
    
    <view wx:if="{{length > 5}}"> 1 </view>
    <view wx:elif="{{length > 2}}"> 2 </view>
    <view wx:else> 3 </view>
    
    <block wx:if="{{true}}">
      <view> view1 </view>
      <view> view2 </view>
    </block>
    

    4.列表渲染

    列表渲染就是循环绑定数据

    <view wx:for="{{array}}">
      {{index}}: {{item.message}}
    </view>
    

    5.模板

    在微信小程序中,如果需要重复使用几个组件,这时,我们应该想到模板。

    5.1定义模板

    <template name="msgItem">
      <view>
        <text> {{index}}: {{msg}} </text>
        <text> Time: {{time}} </text>
      </view>
    </template>
    

    5.2使用模板

    <template is="msgItem" data="{{...item}}"/>
    Page({
      data: {
        item: {
          index: 0,
          msg: 'this is a template',
          time: '2016-09-15'
        }
      }
    })
    
    <template name="odd">
      <view> odd </view>
    </template>
    <template name="even">
      <view> even </view>
    </template>
    
    <block wx:for="{{[1, 2, 3, 4, 5]}}">
        <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
    </block>
    

    6.引入

    我们不仅可以引入当前文件下的模板文件,我们还可以引入其他模板的文件,小程序为我们提供了两个引入方式:

    6.1import

    import可以在该文件中使用目标文件定义的template,如:

    在 item.wxml 中定义了一个叫item的template:

    <!-- item.wxml -->
    <template name="item">
      <text>{{text}}</text>
    </template>
    

    在 index.wxml 中引用了 item.wxml,就可以使用item模板:

    <import src="item.wxml"/>
    <template is="item" data="{{text: 'forbar'}}"/>
    

    C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。

    <!-- A.wxml -->
    <template name="A">
      <text> A template </text>
    </template>
    <!-- B.wxml -->
    <import src="a.wxml"/>
    <template name="B">
      <text> B template </text>
    </template>
    <!-- C.wxml -->
    <import src="b.wxml"/>
    <template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
    <template is="B"/>
    

    6.2include

    include可以将目标文件除了template的整个代码引入,相当于是拷贝到include位置,如:

    <!-- index.wxml -->
    <include src="header.wxml"/>
    <view> body </view>
    <include src="footer.wxml"/>
    <!-- header.wxml -->
    <view> header </view>
    <!-- footer.wxml -->
    <view> footer </view>
    

    7.页面的事件

    7.1页面事件分为两大类型:

    1.冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
    2.非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

    7.2冒泡事件的类型:

    • touchstart 手指触摸动作开始
    • touchmove 手指触摸后移动
    • touchcancel 手指触摸动作被打断,如来电提醒,弹窗
    • touchend 手指触摸动作结束
    • tap 手指触摸后马上离开
    • longtap 手指触摸后,超过350ms再离开

    7.3事件的绑定如下:

    <view id="outter" bindtap="handleTap1">
      outer view
      <view id="middle" catchtap="handleTap2">
        middle view
        <view id="inner" bindtap="handleTap3">
          inner view
        </view>
      </view>
    </view>
    

    这一天主要在学习视图层的wxml,详细文档请看官方文档

  • 相关阅读:
    awk命令
    计算机基础
    python基础-条件判断
    jmeter分布式负载
    jmeter之JSON Path Extractor取值关联
    3.regsvr32 使用说明
    2.NPS代理
    1.正向代理和反向代理
    Calendar 获取指定日期所在月份的第一天、最后一天、下个月第一天等
    mysql 数据库 小知识
  • 原文地址:https://www.cnblogs.com/zhnaglei/p/6653098.html
Copyright © 2011-2022 走看看