微信小程序学习笔记(二)模板与配置

1. WXML 模板语法

1.1 数据绑定

1.1.1 数据绑定的基本原则

① 在 data 中定义数据
② 在 WXML 中使用数据

1.1.2 在 data 中定义页面的数据

在页面对应的 .js 文件中，把数据定义到 data 对象中即可：

Page({
   
  /* 页面的初始数据 */
  data: {
   
    info: "hello world", // 字符串类型
    arr: ["凉宫", "长门", "阿虚"], // 数组类型
  },
});

1.1.3 Mustache 语法的格式

把 data 中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量或表达式包起来即可。语法格式为：

<view>{
  { 变量或表达式 }}view>

1.1.4 Mustache 语法的应用场景

Mustache 语法的主要应用场景如下：

• 绑定内容
• 绑定属性
• 运算（三元运算、算术运算等）

1.1.5 动态绑定内容

页面的数据如下：

Page({
   
  data: {
   
    info: "hello world",
  },
});

页面的结构如下：

<view>{
  { info }}view>

1.1.6 动态绑定属性

页面的数据如下：

Page({
   
  data:{
   
    imgSrc:'./image/logo.png'
  }
})

页面的结构如下：

<image src="{
    {imgSrc}}">image>

1.1.7 三元运算

页面的数据如下：

Page({
   
  data:{
   
    randomNum: Math.random() * 10, // 生成10以内的随机数，
  }
})

页面的结构如下：

<view>{
  {randomNum > 5?'数字大于5': "数字小于等于5"}}view>

1.1.8 算数运算

数据的数据如下：

Page({
   
  data:{
   
    randomNum: Math.random().toFixed