wx小程序（wxml）

简介

WXML-->HTML（一种用来制作超文本（带图片视频）文档的简单标记语言）

WXSS-->CSS（CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和显示的方式。）

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

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

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

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

WXML的功能
1.数据绑定

//表示看见的数据
<!--wxml-->
<view>{{message}}</view>

//在Page.js里，以js为后缀，是JavaScript写的
Page({
    data: {
        message: 'Hellod MINA!'
    }    
})
//在网页上看到的效果应该就是“Hellod MINA!”这个亚子

2.列表渲染

<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>
//在Page.js里，以js为后缀，是JavaScript写的
//底下是一个数组，然后从数组里面for循环拿每一个数，我猜item是关键字
Page({
    data: {
        array: [1,2,3,4,5]
    }    
})

3.条件渲染

<!--wxml-->
//就是用条件判断来写这个代码
//如果view包裹的是WEBVIEW，那我就可以看到WEBVIEW
<view wx:if="{{view=='WEBVIEW'}}">VEBVIEW</view>
//如果view包裹的是APP，那我就可以看到APP
<view wx:elif="{{view=='APP'}}">APP</view>
//如果view包裹的是MINA，那我就可以看到MINA
<view wx:else="{{view=='MINA'}}">MINA</view>
//在Page.js里，以js为后缀，是JavaScript写的
Page({
    data: {
        view: "MINA"
    }
})

4.写一个页面所需要的模版

//view你可以记成一个可以看见的关键词，以如下形式写就可以。
//至于templaye，你可以大概理解成template.js是一个基于 jquery 的前端 javascript 模板，插件主要解决数据渲染时的繁琐的数据处理。模板解决了html片段连接效率低下和繁琐的问题，因为我也不清楚呜呜呜
<!--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里，以js为后缀，是JavaScript写的
//这里data就是来存数据的，然后firstName就是staffA里的数据，lastName也是staffA里的数据。
//具体的效果图等我发给你。
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})