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,详细文档请看官方文档

  • 相关阅读:
    OPPO R9sPlus MIFlash线刷TWRP Recovery ROOT详细教程
    OPPO R11 R11plus系列 解锁BootLoader ROOT Xposed 你的手机你做主
    努比亚(nubia) M2青春版 NX573J 解锁BootLoader 并进入临时recovery ROOT
    华为 荣耀 等手机解锁BootLoader
    青橙 M4 解锁BootLoader 并刷入recovery ROOT
    程序员修炼之道阅读笔03
    冲刺8
    典型用户模板分析
    学习进度八
    冲刺7
  • 原文地址:https://www.cnblogs.com/zhnaglei/p/6653098.html
Copyright © 2011-2022 走看看