小程序 - 模板语法

一、小程序结构目录

1. 全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。

1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序⻚⾯定义在哪个⽬录。
2. window字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
3. tabBar字段 - 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

2. 页面配置page.json

page.json其实⽤来表⽰⻚⾯⽬录下的 page.json这类和⼩程序⻚⾯相关的配置。

开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。

3. sitemap配置sitemap.json

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引

二、小程序模板语法

text相当于span标签，行内元素
view相当于div标签，块元素
checkbox 复选框

1. 数据绑定

普通写法

2. 运算

<!--
  运算：
  1. 数字的加减
  2. 字符串拼接
  3. 三元表达式
-->
<view>{{1+2+3}}</view>
<view>{{'1' + '1'}}</view>
<view>{{isChecked ? true : false}}</view>

3. 列表渲染和对象渲染

1. 列表渲染

1. 基本语法 ： wx:for="{{数组或对象}}"
2. wx:for-item ： 指定数组当前元素的变量名, 不写默认为item
3. wx:for-index ：指定数组当前下标的变量名，不写默认为index
4. wx:key ：⽤来提⾼数组渲染的性能

<!--
  列表：books: ['js高级程序设计', 'css权威指南', 'html与css入门']
  列表循环
  1. wx:for="{{数组或对象}}"
  2. wx:for-item="项的名称"
  3. wx:for-index="下标的变量名"
  4. wx:key⽤来提⾼数组渲染的性能，必须是循环数组中唯一的值
-->
<view wx:for="{{books}}" wx:for-item="book" wx:for-index="index" wx:key="index">
  书名 ：{{book}}
  索引 ：{{index}}
</view>

2. 对象渲染

对象渲染时，
wx:for-item=“值”
wx:for-index=“键”

<!--
  person: {
    name: "张飞",
    age: 128,
    hobby: "俺也一样"
  }
  对象渲染
  1. wx:for="{{对象}}"
  2. wx:for-item="值"
  3. wx:for-index="键"
-->
<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key">
  {{key}} -- {{value}}
</view>

4. block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

5. 条件渲染

1. wx:if

使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块

<!--
  isShow: true
  条件渲染
-->
<view wx:if="{{isShow}}">111</view>
<view wx:if="{{!isShow}}">222</view>
  
<!--
  isShow: false
  条件渲染
-->
<view wx:if="{{isShow}}">111</view>
<view wx:if="{{!isShow}}">222</view>

wx:if 直接不显示该标签

2. hidden

<!--hidden-->
<view hidden="{{isHidden}}">
  我不会显示
</view>
<view hidden="{{!isHidden}}">
  我会显示
</view>

hidden相当于给标签添加 dispaly:none 属性

6. 事件的绑定

input事件 ：给input标签绑定的事件，输入的时候触发

<!--
  给input标签绑定input事件、
  绑定关键字：bindinput  
-->

<input type="text" value="{{num}}" bindinput="handleInput">
  
</input>

<view>
  {{num}}
</view>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    num: 0
  },
  // 给input绑定的事件
  handleInput(e) {
    console.log("...")
  }
})

1. 如何获取页面的值

通过事件源对象

Page({
  /**
   * 页面的初始数据
   */
  data: {
    num: 0
  },
  // 给input绑定的事件
  handleInput(e) {
    // 获取页面的值
    console.log(e.detail.value)
  }
})

2. 把输入框的值赋值到data中

Page({
  /**
   * 页面的初始数据
   */
  data: {
    num: 0
  },
  // 给input绑定的事件
  handleInput(e) {
    // 获取页面的值，并赋值给data中的num
    this.setData({
      num: e.detail.value
    })
  }
})

7. 事件的绑定（按钮）

tap事件 ：点击事件，点击的时候触发
点击事件 ：bindtap
无法在小程序中的事件直接传参 通过自定义属性的方式来传递参数

<!--
  点击事件
  bindtap
  无法在小程序中的事件直接传参
  通过自定义属性的方式来传递参数
  在事件源中获取自定义属性
-->
<!--
错误
<button bindtap="handleClick(1)">+</button>
<button bindtap="handleClick(-1)">-</button>
-->

<button bindtap="handleClick" data-operation="{{1}}">+</button>
<button bindtap="handleClick" data-operation="{{-1}}">-</button>

在事件源中获取自定义属性

Page({
  /**
   * 页面的初始数据
   */
  data: {
    num: 0
  },
  // 点击事件
  handleClick(e) {
    // 获取自定义属性operation
    console.log(e.currentTarget.dataset.operation);
  }
})

1. num添加传递的数据

// pages/demo02/demo02.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    num: 0
  },
  // 点击事件
  handleClick(e) {
    // 获取自定义属性operation
    const operation = e.currentTarget.dataset.operation
    // data中的num加上自定义属性
    this.setData({
      num: this.data.num += operation
    })
  }
})