微信小程序开发框架

wxl（页面内容）
wxss（页面样式）
wxs（filter处理，展示页面内容）
JavaScript（页面交互和逻辑处理）

WXML(winxin makeup language)

是框架设计的一套标签语言。结合组件、WXS和事件系统，可以构建出页面的结构。

语法：

<标签名 属性名="属性1" 属性名="属性2"...>
...
</标签名>

严格闭合，大小写敏感。

语言特性

数据绑定
界面需要数据动态更新，利用js文件中的data属性
{{变量名}}---Mustache方式进行绑定

数据绑定
运算符绑定
等等

//index.wxml
<view hidden="{{flag ? true:false }}">
hello world!
</view>
//index.js
Page({
  data:{
    flag:true
  }
})
//index.json
{}

项目目录结构：

项目目录.png

列表渲染
当不确定列表的数量

//index.wxml
//block不是一个组件，只是一个"包含块"
<view>
<block wx:for="{{items}}" wx:for-item="item" wx:key="index">
    <view>{{index}}:{{item.name}}</view>
</block>
</view>
//index.js
Page({
  data:{
    items:[
      { name: "商品1" },
      { name: "商品2" },
      { name: "商品3" },
      { name: "商品4" },
      { name: "商品5" },
      { name: "商品6" } 
    ]
  }
})

条件渲染

//index.wxml
<view>今天吃什么？</view>
<view wx:if="{{conditon===1}}">饺子</view>
<view wx:elif="{{condition===2}}">米饭</view>
<view wx:else>面食</view>
//index.js
Page({
  data:{
    condition:Math.floor(Math.random()*3+1)
  }
})

wx.在切换时有渲染的过程，更高的切换消耗
hidden也会渲染，有更大的初始化渲染消耗，视图上的效果
一般的用hidden效果会更好一点。

模板引用
使用标签<template>
is决定了使用哪个模板。

注意：模板拥有自己的定义域，只能通过data去传数据

{{...item}} ...被称为扩展运算符

//index.wxml
<template name="tempItem">
<view>
<view>收件人：：{{name}}</view>
<view>联系方式：{{phone}}</view>
<view>地址：{{address}}</view>
</view>
</template>
<template is="tempItem" data="{{...item}}"></template>
//index.js
Page({
  data:{
    item:{
      name:"guo",
      phone:"18813452780",
      address:"china"
    }
  }
})

不仅可以使用模板引用，还有两种方法