微信小程序02
作者：互联网
六、视图结构 wxml
6.1、wxml概述
从事过网页编程的人知道， HTML 是用来描述当前这个页面的结构，同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。
小程序提倡把渲染(页面展示)和逻辑分离，简单来说就是不要再让 JS 直接操控 DOM，JS只需要负责数据的处理，然后再通过一种模板语法来进行界面结构展示。
在视图层中通过 {{}}语法把一个变量绑定到视图界面上，称为数据绑定
<view>{{变量}}</view>
当然仅仅通过数据绑定还不够的，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用wx:开头的属性来表达。wx:if wx:for
数据绑定
逻辑层刷新数据到视图层
this.setData({key:value})
一定要手动触发
js逻辑
wxml
6.2、列表渲染 for
语法：wx:for 循环
●wx:for-index可以指定数组当前下标的变量名 默认名为 index
●wx:for-item 可以指定数组当前元素的变量名 默认名为 item
●wx:key 可以定义也可以不定义 唯一的标识符 提高性能
js逻辑
wxml循环
1000
测试数据
12--大米手机--2000
测试数据
23--红米手机--3000
测试数据
6.3、条件渲染
语法：wx:if
在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
也可以用 wx:elif和 wx:else来添加一个 else 块：
6.4、引用(包含)
把模板定义到外部，然后多个页面间可以共用使用定义的模板WXML结构显示。
https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF
WXML 提供两种文件引用方式import和include
6.4.1、模板
import 相当于PHP中公共函数 tp common.php
定义用 template
<template name=”名称”>
wxml语法
</template>
调用
<template is=”模板定义时name名称” [data=”{{传给模板的数据参数}}”] />
import和include区别
○定义方式不一样
○引用的方式不一样，include 相当于复制代码过来，import相当于调用函数
○数据的传递不一样 include 直接获取js中的数据，import必须通过template data属性获取
import定义的外部模板
include定义的名部模板
wxml中调用
七、小程序的样式
7.1、概述
WXSS 用来决定 WXML 的组件应该怎么显示。说白了就是样式
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
●新增了尺寸单位
WXSS 在底层支持新的尺寸单位 rpx 响应式尺寸单位
小程序中全屏尺寸数值是 :750rpx
●提供了全局的样式和局部样式
app.wxss 作为全局样式
局部页面样式 page.wxss 仅对当前页面生效 app.wxss<page.wxss<行级
●此外 WXSS 仅支持部分 CSS 选择器
7.2、选择器
目前支持的选择器有：
7.3、样式导入
使用 @import语句可以导入外联样式表，@import 后跟需要导入的外联样式表的绝对对路径，用 ; 表示语句结束。
在样式中引入@import 路径;
第1步：定义外部样式
第2步：在需要引用样式的文件中引入
@import 绝对地址
八、flex
8.1、概述
弹性布局
w3c在2009年提出来一个新的布局标准，也是现在目前主流的布局标准。
Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
8.2、容器
主轴和交叉轴
默认是以水平(x轴)为主轴，垂直(Y轴)为交叉轴
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
定位是不受影响 flex+position
8.2.1、flex-direction属性
8.2.2、主轴和交叉轴对齐方式
###### 主轴
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
###### 交叉轴
align-items: flex-start | flex-end | center
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
wxss
wxml
6.1、wxml概述
从事过网页编程的人知道， HTML 是用来描述当前这个页面的结构，同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。
小程序提倡把渲染(页面展示)和逻辑分离，简单来说就是不要再让 JS 直接操控 DOM，JS只需要负责数据的处理，然后再通过一种模板语法来进行界面结构展示。
在视图层中通过 {{}}语法把一个变量绑定到视图界面上，称为数据绑定
<view>{{变量}}</view>
当然仅仅通过数据绑定还不够的，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用wx:开头的属性来表达。wx:if wx:for
数据绑定
逻辑层刷新数据到视图层
this.setData({key:value})
一定要手动触发
js逻辑
wxml
6.2、列表渲染 for
语法：wx:for 循环●wx:for-index可以指定数组当前下标的变量名 默认名为 index
●wx:for-item 可以指定数组当前元素的变量名 默认名为 item
●wx:key 可以定义也可以不定义 唯一的标识符 提高性能
js逻辑
wxml循环
1000
测试数据
12--大米手机--2000
测试数据
23--红米手机--3000
测试数据
6.3、条件渲染语法：wx:if
在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
也可以用 wx:elif和 wx:else来添加一个 else 块：
6.4、引用(包含)把模板定义到外部，然后多个页面间可以共用使用定义的模板WXML结构显示。
https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF
WXML 提供两种文件引用方式import和include
6.4.1、模板import 相当于PHP中公共函数 tp common.php
定义用 template
<template name=”名称”>
wxml语法
</template>
调用
<template is=”模板定义时name名称” [data=”{{传给模板的数据参数}}”] />
import和include区别○定义方式不一样
○引用的方式不一样，include 相当于复制代码过来，import相当于调用函数
○数据的传递不一样 include 直接获取js中的数据，import必须通过template data属性获取
import定义的外部模板
include定义的名部模板
wxml中调用
七、小程序的样式7.1、概述
WXSS 用来决定 WXML 的组件应该怎么显示。说白了就是样式
为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
●新增了尺寸单位
WXSS 在底层支持新的尺寸单位 rpx 响应式尺寸单位
小程序中全屏尺寸数值是 :750rpx
●提供了全局的样式和局部样式
app.wxss 作为全局样式
局部页面样式 page.wxss 仅对当前页面生效 app.wxss<page.wxss<行级
●此外 WXSS 仅支持部分 CSS 选择器
7.2、选择器
目前支持的选择器有：
7.3、样式导入使用 @import语句可以导入外联样式表，@import 后跟需要导入的外联样式表的绝对对路径，用 ; 表示语句结束。
在样式中引入@import 路径;
第1步：定义外部样式
第2步：在需要引用样式的文件中引入@import 绝对地址
八、flex8.1、概述
弹性布局
w3c在2009年提出来一个新的布局标准，也是现在目前主流的布局标准。
Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
8.2、容器
主轴和交叉轴
默认是以水平(x轴)为主轴，垂直(Y轴)为交叉轴注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
定位是不受影响 flex+position
8.2.1、flex-direction属性
8.2.2、主轴和交叉轴对齐方式###### 主轴
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
###### 交叉轴
align-items: flex-start | flex-end | center
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
wxss
wxml
标签：02,flex,wxml,样式,微信,程序,对齐,import,wx 来源： https://www.cnblogs.com/itdabao/p/16106877.html