微信小程序 wxml 快速入土

适用于有一定WEB前端基础的，通过实例快速了解wxml的语法和作用原理

我们需要先新建一个js和一个wxml后缀的文件

<text> {{msg}} </text>

不换行，行内元素，插入文本,这里的文本可以是直接表示的字符串，也可以是页面js文件data中自定义的字符串变量，后面出现的字符串的同理。

---

<view> {{msg}} </view>

view属于视图容器元素，文本会换行

---

  <checkbox checked="{{isChecked}}"> </checkbox>`  

复选框，isChecked为页面js文件data中自定义的Bool类型的变量，花括号和字符串之间不能有空格

---

列表渲染

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供
1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

2.保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

<view wx:for="{{list}}"  wx:for-item="i" wx:for-index="num" wx:key="id">  

</view>

list为页面js文件data中自定义的数组,例如：

list:[
    {
        id:0,
        name:"abc"
    },
    {
        id:1,
        name:"def"
    },
    {
        id:2,
        name:"ghi"
    }
]

i 和 num为自定义的临时变量名，表示遍历数组时当前的对象与其对应的索引, view中均可使用，如果只有一层循环，可以省略对wx:for-item和wx:for-index的赋值，其默认值为"item"和"index"

wx:key用来指定数组中对象的某个唯一属性，以提高渲染性能，如果数组是基本类型数组（比如[1,2,3,4,5]，[“a”,“bb”,“ccc”,“d”]）,则写: wx:key="*this",不写wx:key也可以

如果把上面for循环的view标签替换成 block 标签，那么循环渲染数组的时候将不会渲染出多个标签,每个标签中渲染对应的每个数组元素, 而是直接将数组中的元素渲染在同一个标签中.

---

条件渲染

<view wx:if="{{is_visible}}"> </view>

is_visible 为一个布尔类型的值(变量/表达式),当值为true时渲染该标签,值为false时不渲染.

还可以接elif,或者else:

<view wx:if="{{is_a}}"> </view>
<view wx:elif="{{is_b}}"> </view>
<view wx:elif="{{is_c}}"> </view>
<view wx:else> </view>

当前面的三种条件都不满足时,就会渲染最后一个带有wx:else的标签

加入hidden属性也可以隐藏标签(不渲染)

<view hidden>abcde</view>
<view hidden="{{is_hidden}}">abcde</view>

以上两种写法都可行.第二种可以实现条件渲染,当is_hidden的值为true时隐藏标签

当标签频繁地显示/隐藏时优先使用hidden属性可以显著提高性能,该方法的作用方式是更改标签的样式来实现隐藏标签
对于单次切换显示/隐藏时使用wx:if,该方法的作用方式是从页面中移除标签元素.

---

组件

输入文本框 input

<input type="text" bindinput="handleInput"/>
<view>{{va}}</view>

用户输入时触发事件并调用页面js文件中定义的handleInput函数

data
{
    va = "",
},

handleInput:function(e)
{
    this.setData({
        va:e.detail.value
    })

}

其中e.detail表示组件的属性，并可以使用点运算符来访问其中的每一个属性，比如在官方文档里我们可以看到input组件所拥有的所有属性以及事件
微信官方文档 · 小程序 · input
其他的组件的事件绑定以及在事件处理函数中对组件属性的访问的实现均如此。

---

按钮 button

<button bindtap="handleTap">TAP</button>

这是一个最基本的按钮，bindtap属性指定了按下按钮时调用的事件处理函数。TAP是按钮上显示的文本
其他的属性可以看button | 微信开放文档
事件处理函数同上定义在同页面的js文件的page段中

handleTap:function()
{

}

一些特殊功能按钮

<button open-type="getUserInfo" bindgetuserinfo="getInfo">登录</button>

登录功能，获取用户登录授权。

<button open-type="share">分享小程序</button>

分享功能，分享该小程序给朋友
这种就不需要自己写事件处理函数了，已经是现成的了

---

不更了，
再也不想写微信小程序了，还是安卓开发好做。
可能是我太菜了吧