2022-01-01 微信小程序笔记(二) 设置页面单独样式,模板语法和遍历wx-for,条件渲染wx-if,block标签

一.页面的单独样式设置

以barmovie页为例,设置单独的标题文本和背景色

barmovie.json

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#121a2a",
  "navigationBarTitleText": "热门电影",
  "backgroundTextStyle": "light"
}

效果

更改前,使用app.json的全局样式和文字
app.json

...
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },

更改后,设置单独的样式和文本

其他属性配置(重要)

二.小程序的模板语法和遍历以及条件渲染

1.小程序的模板语法

text标签

相当于web中的span标签 是不会换行的

view标签

view标签相当于web中的 div 独占一行

2.小程序中的模板数据渲染

基本和vue一样:依次用模板语法显示以下几种数据结构
js文件:

  data: {
        msg:"hello",
	}

wxml文件:

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

区别:小程序中没有vue中的v-bind
还是用胡子表达式(插值表达式{{}})绑定变量添加属性,如下例:

小程序使用{{}}绑定变量添加属性示例

wxml文件

<view  class="{{msg1}}">
    {{20%2==0?'偶数':'奇数'}}
</view>

js文件

  data: {
        msg1:"box",
      }

wxss文件

.box{
    width: 190px;
    height: 100px;
    background: #f05b72;
}

结果:

3.小程序的遍历:wx-for,和自定义形参

小程序的遍历可分为分为遍历数组和遍历对象,
自定义形参设置格式:

 wx:for-item="自定义item形参"
 wx:for-index="自定义index形参"

直接上代码
js文件

    data: {
        list:['apple','banana','melon'],
        list1:[{id:0,name:'刘备'},{id:1,name:'关羽'},{id:2,name:'张飞'}],
        person:{ name:'张三',age:18}
     },

wxml文件

<!-- wx-for遍历 -->

<!-- 1.遍历数组 -->
<!-- 使用系统固定的形参 -->
<view wx:for="{{list}}">
    index--{{index}}
    value--{{item}}
</view>
<view wx:for="{{list1}}">
    老{{item.id+1}}是{{item.name}}
</view>
<!-- 自定义形参:idx1和val1 -->
<view
 wx:for="{{list1}}"
 wx:for-item="val1"
 wx:for-index="idx1"
 >
    老{{idx1+1}}是{{val1.name}}
</view>
<!-- 2.遍历对象 -->
<!-- 给index加唯一值:wx-key='index' -->
<view wx:for="{{person}}" wx-key='index'>
    属性:{{index}}
    值:{{item}}
</view>
<!-- 自定义形参:idx2和val2  -->
<view 
wx:for="{{person}}"
wx-key='idx2'
wx:for-item="val2"
wx:for-index="idx2"
>
    属性:{{idx2}}
    值:{{val2}}
</view>

结果:

4.小程序的条件渲染:wx-if

1.只用wx-if

 <view wx:if="{{bol}}">显示</view>
<view wx:if="{{!bol}}">显示2</view>

2.使用wx-if和wx-else

   <view wx:if="{{bol}}">显示</view>
   <view wx:elif="{{bol}}">显示2</view>
   <view wx:else>显示3</view>

3.使用hidden

   <view hidden="{{bol}}">显示</view>
   <view hidden="{{!bol}}">显示2</view>

三.block标签:可以像vue中的template标签一样 作为占位 渲染的时候移除

用法 当你在渲染某些数据 不想额外的加上某些标签 就可以用block标签包裹

<block>
   <view wx:key='index' wx:for="{{person}}"   wx:for-item="value" wx:for-index="key">
      属性 {{key}}
      值 {{value}}
   </view>
</block>