微信小程序开发框架

微信小程序开发框架

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

WXML(winxin makeup language)

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

语法：

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

严格闭合，大小写敏感。

语言特性

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

• 数据绑定
• 运算符绑定
• 等等

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

项目目录结构：

项目目录.png

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

//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" } 
    ]
  }
})

3. 条件渲染

//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效果会更好一点。

4. 模板引用
   使用标签<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"
    }
  }
})

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

• import
• include