小程序模板语法

---

前言

在小程序中没有H5提供的那些标签了，这里我们需要使用小程序给我们提供的组件。

一、标签的使用

1.view

view相当于Html中的div，是块元素

2.text

text相当于Html中的span，是行内元素

3.image

image相当于我们Html中的img，是行内块元素
mode属性常用值

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

二、数据

1.数据的定义

在界面对应的JS文件中的data属性上定义数据

data:{
    msg:"hell world",
}

2.引用数据

通过{{}}的方式可以引用数据。
{{}}里还可以进行一些计算，最终显示的结果是计算之后得到的结果。

data:{
    msg:"hell world",
    num:10,
}

<view>{{msg}}--{{num +10}}</view>

小程序中任何需要获取数据的地方都需要用{{}},包括标签内的属性。

三、逻辑渲染

1.wx:if

wx:if是通过添加和删除元素实现显示和隐藏
一般用于不频繁切换的场景

<view wx:if="{{age < 18}}">少年</view>
<view wx:elif="{{age < 30}}">青年</view>
<view wx:elif="{{age < 80}}">中年</view>
<view wx:else>老年</view>

2.hidden

hidden是隐藏，值为true时会隐藏元素，为false时显示元素
hidden通过改变元素的display属性实现显示和隐藏
一般用于需要频繁切换元素的场景

<view hidden="{{flag}}">隐藏</view>

四、列表渲染

1.wx:for

默认数组下标变量名默认为 index，变量名默认为 item。

<view wx:for="{{list}}" wx:key="id">{{index}}：{{item.title}}</view>

可以使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名。

<view wx:for="{{item.child}}" wx:key="id" wx:for-index="index1" wx:for-item="item1">
    {{index1}}：{{item1.sect}}
  </view>

2.wx:key

作用：指定列表中项目的唯一的标识符，提高重排效率
wx:key 的值有两种形式：
1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2.保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

五、模板

Template
name ：作为模板的名字
is：声明需要的使用的模板
data：模板需要的数据

<template name="demo">
  <view>
    <text>模板内容：</text>
    <text>{{msg}}</text>
  </view>
</template>
<template name="demo1">
  <view>
    <text>{{title}}</text>
    <text>{{id}}</text>
  </view>
</template>
<template is="demo" data="{{msg}}"></template>
<view wx:for="{{list}}" wx:key="id">
  <template is="demo1" data="{{...item}}"></template>
</view>

Import
1、import只导入template
2、import 不具有递归的特性。
即：C 引用 B，B 引用A，在C中可以使用B定义的 template，在B中可以使用A定义的 template ，但是C不能使用A定义的template 。

<!-- course.wxml -->
<template name="course1">
  <view>{{title}}：{{price}}</view>
</template>
<view>
  模板中的view的内容
</view>

<!--import只导入template -->
<import src="./course"/>
<template is="course1" data="{{...course}}"></template>

include
include 可以将目标文件中除了 外的整个代码引入

<!-- include -->
<include src="./course"></include>

六、样式WXSS

1.尺寸单位

在wxss中引入新的尺寸单位----rpx，目的是适配不同宽度的屏幕
在小程序中，规定所有手机的屏幕宽度都是750rpx，所以在不同尺寸的屏幕下1rpx的宽度都不同。

1rpx = （屏幕宽度/750）px

2.样式导入

在wxss文件中引入其他样式文件

@import ‘./test_0.wxss’