【小程序】渲染与引用

主要是巩固一波，基础之前讲的都差不多了

1. if语句

判断成绩是否及格，js中用if🉑，wxml中用wx:if=🉑

const app=getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    answer:"否",
  },
  countgrade:function(e){
    var num=e.detail.value;
    if(num>100 || num<0){
      this.setData({
        answer:"成绩有误",
      })
    }
    else if(num>=60){
      this.setData({
        answer:"是",
      })
    }
    else{
      this.setData({
        answer:"否",
      })
    }

  }

})

2. for语句

wx:for={{一个数组}}，就相当于for item in 这个数组，执行模块中的代码，如果在模块中需要引用数组当前遍历到的元素，则{{item}}，如果要引用数组当前遍历的下标，则{{index}}

<view class="box">
  <view>
    <view>
      绑定数组渲染
    </view>
    <view wx:for="{{arry}}">
      arry{{index}}:{{item}}
    </view>
  </view>
  <view>
    <view>
      直接数组渲染
    </view>
    <view wx:for="{{['Spring','Summer','Fall','Winter']}}">
      arry{{index}}:{{item}}
    </view>
  </view>
  <view>
    <view>
      对象渲染
    </view>
    <view wx:for="{{object}}">
      {{index}}:{{item}}
    </view>
  </view>
  <view>
    <view>
      字符串渲染
    </view>
    <view wx:for="Wang" wx:for-index='i' wx:for-item='t'>
      arry[{{i}}]:{{t}}
    </view>
  </view>
  <view>
    
  </view>
</view>

3. 循环嵌套——九九乘法表

双重循环，索引都叫{{index}}，元素都叫{{item}}，不方便使用，所以给其重新命名，wx:for-key={{"i"}}给索引命名，wx:for-item={{"j"}}给数组中的值命名。

想要一个大段落不同小段落中的显示在一行，在wxss中有display:inline-block，大段落中的东西就都在同一行了。

<view class="p">
  <view wx:for="{{nums}}" wx:for-item="i">
    <view wx:for="{{nums}}" wx:for-item="j" class="inline">
      <view wx:if="{{i>=j}}">
        {{i}}x{{j}}={{i*j}}
      </view>
    </view>
  </view>
</view>

.inline{
  display:inline-block;
  margin: 10rpx;
}
.p{
  font-size: 20rpx;
}

4. template模版使用

这就相当于映射函数，可以在同一个xml文件中写也可以单开一个写，单开一个需要import文件名。

这是主文件

<view class="box">
  <import src="template.wxml"/>
  <view >
    <template is="student" data="{{...st01}}"/>
  </view>
  <view >
    <template is="student" data="{{...st02}}"/>
  </view>
  <view>
    <template is="student" data="{{s_name:'Zhang',s_age:19,s_gender:'M'}}"/>
  </view>
</view>

这是模版文件

<template name="student" >
  <view class="inline">
  <view>
    name:{{s_name}} 
  </view>
  <view>
    age:{{s_age}} 
  </view>
  <view>
    gender:{{s_gender}} 
  </view>
</view>
</template>

const app=getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    st01:{
      s_name:"Wang",
      s_age:14,
      s_gender:"M",
    },
    st02:{
      s_name:"Song",
      s_age:17,
      s_gender:"W",
    }
  },
  
})

.inline{
  display:inline-flex;
  margin: 10rpx;
}

另外试了一下inline-block和inline，很奇怪，给你们看下inline-block的效果

再看下inline的效果

尊滴很奇怪，可能因为是在主xml文件中用的，没有在templates中用？

然后我把inline放到了app.css即全局定义中，结果还是图二的样子

后来我又试了试，如果把inline-block/inline改成inline-flex：

哎，成了！

在往后做的过程中突然想起flex，flex-direction:row应该也是这个效果，再考虑如何均分空间

justify-content: space-evenly;

就获得了如下效果

所以这是修改后的inline函数

.inline{
  display: flex;
  flex-direction: row;
  margin: 10rpx;
  justify-content: space-evenly;
}

5. include使用

如果说templates像是自己写了一个函数，include就相当于自己写了一个完整模块，可以将一个页面分开来写，然后合起来展示。

语法长这样

<include src="wx1.wxml"/>