微信小程序——基本语法

WXML语法

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

1. 数据绑定

  
  <view> {{ message }} view>
  <view id="item-{{id}}"> view>
  <view wx:if="{{condition}}"> view>
  <checkbox checked="{{false}}"> checkbox>
  
  Page({
    data: {
      message: 'Hello 微信小程序!',
  	id:0,
  	condition:false
    }
  })

注意事项: 小程序中为单项数据流 model —> view
修改数据： this.setData({message: ‘修改之后的数据’}, callback)

2. 列表渲染

   
   
   <view wx:for="{{array}}">
     {{index}}: {{item.name}}
   view>
   
   <view wx:for="{{array}}" wx:for-index="id" wx:for-item="itemName">
     {{id}}: {{itemName.name}}
   view>
   
   Page({
     data: {
       array: [{
         name: '微信',
       }, {
         name: '小程序'
       }]
     }
   })

wx:for 也可以嵌套

   <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
     <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
       <view wx:if="{{i <= j}}">
         {{i}} * {{j}} = {{i * j}}
       view>
     view>
   view>

在 标签上用wx:for，可以渲染一个包含多节点的结构块。

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性 。

   <block wx:for="{{[1, 2, 3]}}">
     <view> {{index}}: view>
     <view> {{item}} view>
   block>

wx:key用来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供：1. 字符串，数组中的一个item的属性，如id（唯一的字符串或者数字）；2. 保留关键字*this,表示for循环中item本身（item本身需要是唯一的）。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
3. 条件渲染
wx:if="" 用来判断是否需要渲染该代码块。

   <view wx:if="{{condition}}">显示view>
   
   <view wx:if="{{num>=90}}">Aview>
   <view wx:elif="{{num>=70}}">Bview>
   <view wx:elif="{{num>=60}}">Cview>
   <view wx:else>Dview>
   
   <block wx:if="{{condition}}">
     <view> view1 view>
     <view> view2 view>
   block>
   
   Page({
   	data:{
   		condition:true,
   		num:85
   	}
   })

wx:if VS hidden

hidden 用法:

wx:if条件为 false 的时候不加载，条件切换的时候决定元素销毁或者重新加载渲染 。

hidden 始终加载元素, 条件切换的时候决定元素的显示和隐藏 。

注意： 1. 频繁切换时，建议使用hidden；2. 控制条件复杂时，建议使用 wx:if 搭配wx:elif、wx:else进行展示与隐藏的切换。

4. 模板（template）

在模板中定义代码片段，然后子啊不同的地方调用。

   
   <template name="msg">
   	<view>
       	<text> {{index}}: {{msg}} text>
       	<text> Time: {{time}} text>
       view>
   template>
   
   
   <template is="msg" data="{{...item}}">template>
   
   Page({
     data: {
   	//数据源
       item: {
         index: 1,
         msg: '测试信息',
         time: '2022-05-20'
       }
     }
   })

1. is 属性可以使用{{item % 2 == 0 ? ‘even’ : ‘odd’}}( Mustache 语法)，来动态决定具体需要渲染哪个模板
2. 模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 模块。
3. 引用
   WXML 提供两种文件引用方式import和include。
   1. import 只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
   2. include 可以将目标文件除了