简单入门
参考文档部分：WXML
这里新建立一个demo2作为主页:
打开查看demo2里面的WXML查看:
基本知识：
- text标签里面的文本不会换行，相当于web里面的span标签
- view相当于web里面的div标签，能换行
做一个简单测试：
<!--pages/demo2/demo2.wxml-->
<text>川川帅哥</text>
<text>是川川菜鸟</text>
<view>CSDN</view>
<view>川川菜鸟</view>
保存效果:
数据绑定
文件为：ts文件
编辑器中文件如下：
文档介绍如下：
页面需要初始化的内容，在data里面添加即可，例如：
view引用过去，用两对花括号：
效果：
类似同理，WXML如下：
<!-- 字符串 -->
<view>{
{
name}}</view>
<!-- 数字 -->
<view>{
{
num}}</view>
<!-- 布尔类型 -->
<view>是为：{
{
sex}}</view>
<!-- object类型 -->
<view>年龄为：{
{
person.age}}</view>
<view>身高为：{
{
person.hight}}</view>
<view>体重为：{
{
person.weight}}</view>
<view>名字为：{
{
person.name}}</view>
<!-- 标签属性中使用 -->
<view data-num="{
{num}}">自己定义的属性</view>
<!-- 布尔充当属性 checkshu'xing-->
<view>
<checkbox checked="{
{check}}"></checkbox>
</view>
page部分设置如下：
效果为：
表达式的使用
表达式运算 花括号中加入表达式：
<!-- 加法 -->
<view>{
{
10+10}}</view>
<!-- 字符拼接 -->
<view>{
{
'2'+'2'}}</view>
<!-- 三元 奇偶判断 -->
<view>{
{
10%2===0 ? "偶数" : "奇数"}}</view>
<view>{
{
num%2===0 ? "偶数" : "奇数"}}</view>
效果：
列表渲染
官方文档有介绍：
添加一个list列表如下：
语法：
wx:for={
{
"数组或者对象"}} wx:for-item="项目名称" wx:for-index="循环项索引"
添加列表循环语句：
<view wx:for="{
{list}}" wx:for-item="item" wx:for-index="index">
索引：{
{
index}}
--
值：{
{
item.name}}
</view>
效果：
嵌套循环：当出现数组嵌套的时候，尤其注意不要重名字wx:for-item=“item”
，wx:for-index=“index”，item是项目名，index是索引。只有一层循环的话，这两个属性可省略。
对象循环： wx:for=“对象" key对应index修改，item修改为values
测试案例：
<view wx:for="{
{person}}" wx:for-item="value" wx:for-index='key' wx:key='age'>
属性：{
{
key}}
---
值：{
{
value}}
</view>
</view>
效果如下：
再比如九九乘法表：
<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>
效果：
block标签
1-占位符标签
2-写代码能看到标签，页面渲染会把它移除
测试：
<block wx:for="{
{[1, 2, 3]}}">
<view> {
{
index}}: </view>
<view> {
{
item}} </view>
</block>
条件渲染
语法：
wx:if={
{
true/false}} 表示显示和隐藏
wx:if
wx:elif
wx:else
hideen 设置隐藏
1-在标签三直接添加hidden
2-hidden="true"
场景选择：
1-标签频繁切换显示，用hidden 通过切换样式隐藏
2-不频繁用wx:if 直接把标签从页面结构移除，暴力
测试案例：
<view>
<view>条件渲染</view>
<view wx:if="{
{true}}">显示</view>
<view wx:if="{
{false}}">隐藏</view>
<!-- wx:if案例 -->
<view wx:if="{
{false}}">1</view>
<view wx:elif="{
{false}}">2</view>
<view wx:else="{
{true}}">3</view>
<!-- hidden案例 -->
<view>-----</view>
<view >hidden</view>
<view hidden>hidden</view>
<view hidden="true">hidden</view>
<!-- 场景案例 -->
<view>----</view>
<view wx:if="{
{false}}">test</view>
<view hidden>test</view>
</view>
效果：
