微信小程序2

第二天
一个页面通常有四类文件
JS文件用来处理用户逻辑
json文件用于页面配置
wxml文件用来编写页面结构
wxss文件用来页面布局和样式设置
js wxml wxss 是微信小程序的三驾马车

wxml组件标签

1一个完整的wxml的标签由开始标签和结束标签组成，开始标签和结束标签之间可以编写标签内容，也可以嵌入其他标签。
helloword为例

<!--pages/dame14/dame14.wxml-->
<!--内容是wxml的注释帮助开发者阅读代码-->
<view class="container">
<text style="color:{{textColor}}">helloword</text>
<button bindtap="changeColor">变化颜色</button>
</view>

dame14wxml文件定义三个组件外层使用view组件作为容器，并将其class属性设置为container，container实际上就是wxss样式表中定义的一个全局的容器样式。
在view容器内部，我们有嵌套了text组件和button组件
text用来显示文本。其中style可以设置文本的颜色，字体，字号等属性
button组件用来渲染可以进行用户交互式按钮，其中bindtap属性用来绑定按钮单击方法。

将数据绑定到wxml界面中

以helloWorld为例，helloWorld是写在text组件内部的。如果要动态改变这个值。那就需要将定义在dame14.js文件中，并绑定到14.wxml的text组件中先修改14.js文件中data的属性值

// pages/dame14/dame14.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    textColor:"#ff0000",
    textData:"hi,小程序"

  },

修改14.wxml文件

<!--pages/dame14/dame14.wxml-->
<view class="container">
<text style="color:{{textColor}}">{{textData}}</text>
<button bindtap="changeColor">变化颜色</button>
</view>

结果：
组建的动态数据绑定。


标签绑定数据中加入逻辑运算
if——elif——else

<!--pages/dame14/dame14.wxml-->
<view class="container">
<text wx:if="{{textData.length>3}}" style="color:{{textColor}}">{{textData+"ヽ(￣ω￣(￣ω￣〃)ゝ"}}</text>
<text wx:elif="{{textData.length<2}}" style="color:{{textColor}}">{{textData+"一起来学习"}}</text>
<text wx:else style="color:{{textColor}}">{{textData+"认真"}}</text>
<button bindtap="changeColor">变化颜色</button>
</view>

block标签

<view class="container">
<block wx:if="{{textData.length>3}}">
<text style="color:{{textColor}}">{{textData+"一起来学习"}}</text>
<text>END</text></block>
<button bindtap="changeColor">变化颜色</button>
</view>

for遍历

// pages/dame14/dame14.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    textColor:"#ff0000",
    textData:"hi,小程序",
    listData:["JAVASCRIPT","PYTHON","C++"]
  },

<view class="container">
<text wx:for="{{listData}}">{{index}}:{{item}}</text>
<button bindtap="changeColor">变化颜色</button>
</view>

pages/logs/logs是查看启动日志的
在app.json文件的最后一行内

<view class="container">
<text wx:for="{{listData}}" wx:for-index="id" wx:for-item="len">{{id}}:{{len}}</text>
<button bindtap="changeColor">变化颜色</button>
</view>

<view class="container">
<block wx:for="{{listData}}" wx:for-index="id" wx:for-item="len">
<text style="margin:0" >{{id}}:{{len}}</text>
<button bindtap="changeColor">变化颜色</button>
</block>
</view>

wxml模板

<template name="item">
<text style="margin: 0;">{{id}}:{{lan}}</text>
<button>报名</button>
</template>
<view class="container">
<block wx:for="{{listData}}"><template is="item" data="{{id:index,lan:item}}"></template>
</block>
</view>

<import src="../template/item"></import>
<!--相对路径-->
<view class="container">
<block wx:for="{{listData}}"><template is="item" data="{{id:index,lan:item}}"></template>
</block>
</view>

<import src="../template/item"></import>
<include src="../../components"></include>
<view class="container">
<block wx:for="{{listData}}"><template is="item" data="{{id:index,lan:item}}"></template>
</block>
</view>

装裱与布局的——wxss的基础

WXSS的注释方式为：/内容/

单位	名称	解释
%	百分比	设置尺寸的百分比
in	英尺	英尺单位
cm	厘米	厘米单位
mm	毫末	毫米单位
em	字体单位	1em等于当前字体的尺寸，在严格控制文本高度时这个单位非常有用
ex	字体水平尺寸单位	1ex等于当前一个字体的水平宽度
pt	磅	1pt等于1/72in
pc	派卡	1pc=1/72pt
px	象素	1px为屏幕上的一点
rpx	自适应象素	规定屏幕为150rpx

列举

<!--pages/dame14/dame14.wxml-->
<text class="lable">helloWord</text>

/* pages/dame14/dame14.wxss */
.lable{
  background-color:greenyellow;
  width: 100%;
  display: inline-block;/*display属性设置组件的展示模式，默认text组建为行内元素，将其改为块级元素使尺寸生效。*>
}

wxss的选择器

选择器的作用是匹配文档中的元素。最简单的选择器是元素选择器，例如：

text{ class:green;}

上面的wxss代码设置页面中所有text组件文字的颜色为绿色。在元素选择其上也可以组合选择。

button,text{ class:green;}

上面的代码把页面中所有的text与button组件的文本颜色都为绿色。

<view class="container">
<text id="lable">helloWord</text>
<button id="lable">点击</button>
</view>

/* pages/dame14/dame14.wxss */
#lable{
  background-color:greenyellow;
  width: 100%;
  display: inline-block;
}

/* pages/dame14/dame14.wxss */
.lable{
  background-color:greenyellow;
  width: 100%;
  display: inline-block;
}
[id]{
  background-color:rgb(255, 47, 127);
  width: 50%;
  display: inline-block;
}

<view class="container">
<text class="lable">helloWord</text>
<button id="lable">点击</button>
</view>

/* pages/dame14/dame14.wxss */
.lable{
  background-color:greenyellow;
  width: 100%;
  display: inline-block;
}
[id]{
  background-color:rgb(255, 47, 127);
  width: 50%;
  display: inline-block;
}
view text{
  background-color: indigo;
  width: 100%;
  display: inline-block;
}

<view class="container">
<text>helloWord</text>
<button id="lable">点击</button>
</view>
<text class="lable">你好</text>

名称	意义	例子
后代选择器	后代选择器会选中父类标签中所有指定元素，无论层级结构如何	view text{}
子代选择器	子代选择器只会选择父标签中的子元素，子元素的子元素不会被选择	view >text{}
兄弟选择器	兄弟选择器用在同级元素的选择中	.view+text{}

背景相关属性

属性名	意义	值
background-color	设置背景颜色	颜色值（16进制）
background-image	设置背景图片	图片地址为url（网页图片）
background-repeat	设置图片的背景重复方式	repeat：背景图片将在垂直方向和水平方向重复repeat-x：图片背景将在水平方向重复，repeat-y：背景将在垂直方向重复，no-repeat：背景图像将显示一次
background-position	设置如何定位图片	水平和垂直方向分别有top，left，right，bottom，center五个关键字可以用，在设置时，可以组合使用，也可以使用百分比，象素的方式自定义图片位置
background-attachment	设置背景是否随页面滚动	scroll：背景随页面滚动，fiex

wxss的相关属性用来对元素中的文字进行设置。其可以对字体，字号，颜色对齐方式，缩进等属性进行配置。


wxss边距用来控制组件与组件之间，组件与组件内部子组件之间的的布局效果。wxss边框属性用来设置组件的边界显示效果。
边框属性