微信小程序学习(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_22844483/article/details/53886908

视图层

  • MINA的视图层由WXML与WXSS编写。
  • 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
  • WXML(WeiXin Markup language)用于描述页面的结构。
  • WXSS(WeiXin Style Sheet)用于描述页面的样式。
    组件(Component)是视图的基本组成单元。

WXML

数据绑定

  • WXML中的动态数据均来自对应Page的data。
  • 数据绑定使用”Mustache”语法(双大括号)将变量包起来
  • 支持运算
    • 算数运算
    • 三元运算
    • 逻辑运算
    • 字符串运算
    • 数据路径运算
  • 组合
    • 数组
      • <view wx:for-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
    • 对象
      • <template is="objectCombine" data="{{for: a, bar: b}}"></template>
    • …拓展运算符:将一个对象展开,复制到一个新的对象
      • <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

  • 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
  • 使用wx:for-item可以指定数组当前元素的变量名
  • 使用wx:for-index可以指定数组当前下标的变量名
    • -后面是名
  • 可以嵌套
  • wx:key如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如<input/>中的输入内容,<switch/> 的选中状态),需要使用wx:key来指定列表中项目的唯一的标识符。
<!--wxml-->
<view wx:for-items="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

  • 在MINA中,我们用wx:if="{{condition}}"来判断是否需要渲染该代码块
  • wx:elif="{{}}",wx:else="{{}}"
  • 如果我们想一次性判断多个组件标签,我们可以使用一个<block/>标签将多个组件包装起来,并在上边使用wx:if控制属性。
  • <block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
  • wx:if vs hidden

因为wx:if之中的模板也可能包含数据绑定,所有当wx:if的条件值切换时,MINA有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时wx:if也是惰性的,如果在初始渲染条件为false,MINA什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好。

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA IS NOT APP </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

模版

  • 使用name属性,作为模板的名字。然后在内定义代码片段
  • 使用is属性,声明需要的使用的模板,然后将模板所需要的data传入
  • is属性可以使用Mustache语法,在运行时来决定具体需要渲染哪个模板
  • 模板拥有自己的作用域,只能使用data传入的数据。
<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

事件

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息,如id, dataset, touches。
  • WXML的冒泡事件列表:

    类型 触发条件
    touchstart 手指触摸
    touchmove 手指触摸后移动
    touchcancel 手指触摸动作被打断,如来电提醒,弹窗
    touchend 手指触摸动作结束
    tap 手指触摸后离开
    longtap 手指触摸后,超过350ms再离开

    注:除上表之外的其他组件自定义事件都是非冒泡事件,如的submit事件,的input事件,的scroll事件,(详见各个组件)

  • 事件绑定
    • bind事件绑定不会阻止冒泡事件向上冒泡
    • catch事件绑定可以阻止冒泡事件向上冒泡。
  • 事件对象

    • 如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。
    属性 类型 说明
    type String 事件类型
    timeStamp Integer 事件生成时的时间戳,该页面打开到触发事件所经过的毫秒数。
    target Object 触发事件的组件的一些属性值集合,触发事件的源组件。
    currentTarget Object 当前组件的一些属性值集合,事件绑定的当前组件。
    touches Array 触摸事件,触摸点信息的数组,touches 是一个数组,每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches 是 CanvasTouch 数组)。 表示当前停留在屏幕上的触摸点。
    detail Object 额外的信息.
<!--wxml-->
<view bindtap="add"> {{count}} </view>
Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      data: this.data.count + 1
    })
  }
})

引用

  • WXML提供两种文件引用方式importinclude
  • import可以在该文件中使用目标文件定义的template
import的作用域
  • import有作用域的概念,即只会import目标文件中定义的template,而不会import目标文件import的template
  • 如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的emplate,但是C不能使用A定义的template
include
  • include可以将目标文件除了<template/>的整个代码引入,相当于是拷贝到include位置

wxss

  • WXSS(WeiXin Style Sheets)是MINA框架设计的一套样式语言,用于描述WXML的组件样式。
  • WXSS用来决定WXML的组件应该怎么显示。
  • WXSS具有CSS大部分特性

尺寸单位

  • rpx:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
  • rem:规定屏幕宽度为20rem;1rem = (750/20)rpx 。

样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

@import 'style.wxss';

内联样式

  • MINA组件上支持使用style、class属性来控制组件的样式。
  • style接收动态的样式,静态的样式写到wxss文件中
  • 动态的样式写到wxss中

选择器

选择器 样例 样例描述
.class .intro 选择所有拥有class=”intro”的组件
&#id firstname 选择拥有id=”firstname”的组件
element view 选择所有view组件
element, element view checkbox 选择所有文档的view组件和所有的checkbox组件
::after view::after 在view组件后边插入内容
::before view::before 在view组件前边插入内容
展开阅读全文

没有更多推荐了,返回首页