微信小程序框架视图层 View

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

WXML

    WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

数据绑定

<!--wxml-->
<view>{{message}}</view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
<view wx:elif="{{view == 'APP'}}">APP</view>
<view wx:else="{{view == 'MINA'}}">MINA</view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

模板

<!--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'}
  }
})

数据绑定

<!--wxml-->
<view>{{message}}</view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
<view wx:elif="{{view == 'APP'}}">APP</view>
<view wx:else="{{view == 'MINA'}}">MINA</view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

模板

<!--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'}
  }
})

 

简单的例子源码

<!--pages/cinema/cinema.wxml-->
  <!-- 下面是属性绑定简单绑定
数据绑定使用"Mustache"语法（双大括号）将变量包起来 -->

<text>pages/cinema/cinema.wxml</text>
<view>{{name}}</view>
<view>{{sex}}</view>
<view> {{ message }} </view>

 <!-- 下面是组建绑定 -->
<view id="item-{{id}}"> </view>

<!-- 控制属性(需要在双引号之内) -->
<!-- 这也是单行的条件渲染 -->
<view wx:if="{{condition}}">1 </view>

<block wx:if="{{condition}}">
<view>多行渲染</view>
<view>多行渲染</view>
</block>




<!-- 关键字的绑定 -->
<checkbox checked='{{true}}'></checkbox>

<!-- 两种写法
<checkbox checked='{{checked}}'></checkbox> -->

<!-- 运算的数据绑定 -->
<view> {{a + b}} + {{c}} 等于 {{a+b+c}} </view>

<!-- 三元运算 -->
<view hidden="{{flag ? true : false}}"> Hidden </view>

<!-- 字符串运算 -->
<view>{{"hello" + name1}}</view>

<!-- 数据路径运算 -->
<view>{{object.key}} {{array[0]}}</view>


<!-- 数组 -->
<!-- <view wx:for-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view> -->


<!-- 模板的调用 -->
<import src="../template/template.wxml"/>


<template is="msgItem" data="{{moban:'小姐姐'}}"/>

<template is="a"data="{{moban:'哥'}}"/>

<template is="m"data="{{mo:'小哥哥'}}"/>

<!-- 接下来演示引用的另一种形式include
  他是位置进行渲染的，你放哪里，他就会显示在哪个地方
 -->
<include src="../movie/movie.wxml"/>

 

还有js的画面

// pages/cinema/cinema.js
Page({
  data:{
    name:'一把手',
    sex:'男',
    message: 'Hello dalao!',
    // moban:'模板数据',
    id:1,
    condition: true,
    checked:true,


  //  数据的运算
    a: 1,
    b: 2,
    c: 3,

   flag:false,


    name1: "MINA",

    
     object: {
      key: 'Hello '
    },
    array: ['MINA'],

     zero: 0


  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

 

还有一个模板的

<template name="m">
   <view>
    
    <text>{{mo}}</text>

   </view>
</template>



<template name="msgItem">
  <view>
  
    <text>{{moban}}</text>
    
  </view>
</template>

<template name="a">
  <view>
  
    <text>{{moban}}</text>
    
  </view>
</template>

 

还有一个可以演示那个全部引用 的文件

<!--pages/movie/movie.wxml-->
<text>pages/movie/movie.wxml</text>

<view>
我是头部文件，电影
</view>