微信小程序开发框架

微信小程序开发框架

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

WXML(winxin makeup language)

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

语法：

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

严格闭合，大小写敏感。

语言特性

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

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

//index.wxml

//index.js
Page({
  data:{
    flag:true
  }
})
//index.json
{}

项目目录结构：

项目目录.png

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

//index.wxml
//block不是一个组件，只是一个"包含块"


    {{index}}:{{item.name}}


//index.js
Page({
  data:{
    items:[
      { name: "商品1" },
      { name: "商品2" },
      { name: "商品3" },
      { name: "商品4" },
      { name: "商品5" },
      { name: "商品6" } 
    ]
  }
})

3. 条件渲染

//index.wxml
今天吃什么？
饺子
米饭
面食
//index.js
Page({
  data:{
    condition:Math.floor(Math.random()*3+1)
  }
})

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

4. 模板引用
   使用标签