微信公众号开发

微信小程序02

本文主要是介绍微信小程序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
这篇关于微信小程序02的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!