微信小程序

基础内容学习

在小程序中JSON扮演的是静态配置的角色。
JSON文件都被包裹在一个大括号中，通过 key：value 的方式记录数据。JSON的key必须被双引号包裹。JSON文件中不能使用注释。

进入小程序开发工具的项目中，会看到如下结构，有一个pages文件这个是用来存放所有的页面的，在每一个页面的文件夹下还有.js.json.wxml.wxss文件。

WXML文件

wxml文件相当于html文件，用来写页面结构。需要注意的是wxml对大小写敏感，class和Class代表不同东西，xmls要求所有标签必须闭合，不然会报错。

在wxml文件中可以引用js文件data中定义的变量，引用方式{{变量名}}，需要注意的是如果这个变量不存在或者被复制undefined，则不会在视图中显示

// wxml代码
<text>{{time}}</text>

// js代码
Page({
  data: {
    time:(new Date()).toString()
  },
})

效果如下：

wxml中也可以把js中定义的变量当作属性值进行引用，代码如下：意思是把元素的类名定义为hello，在wxss中可以通过 .hello设置样式

// wxml代码：
<text class="{{test}}">{{time}}</text>

// js代码
Page({
  data: {
    test:'hello'
  },
})

// wxss代码
.hello{
  color:red;
}

和vue相同通过{{ }}引用不止可以引用变量，还可以在{{ }}中进行简单的逻辑运算，比如三元运算，算术运算，字符串拼接等
如果在{{ }}放的是一个数组，则会把数组中的内容渲染到视图中

// wxml代码
<text>{{ary}}</text>

// js代码
Page({
  data: {
    ary:['hello','world','你好']
  },
})

效果如下：

在小程序中通过wx：if来判断是否需要渲染该元素
wx：elif和wx：else用来设置else元素

<view wx:if="{{test.length > 6}}">我要不要显示呢?</view>

循环绑定数据的方法，wx：for，数据的下标默认是index，当前项的变量名默认是item，可以通过wx:for-index和wx:for-item对item和index重新指定名字，重新指定名字后再使用变量就需要使用指定的新名字
通过wx：key指定唯一标识符

// wxml
<view wx:for="{{forContent}}"  wx:key='index'>{{item}}</view>

// js
Page({
  data: {
    forContent:['内容1','内容2','内容3','内容4','内容5']
  },
})

效果如下：

// 重新指定名字的wxml代码
<view wx:for="{{forContent}}" wx:for-index="num" wx:for-item="name"  wx:key='num'>{{num}}:{{name}}</view>

效果如下：

wxml中可以通过template标签定义模板，还可以用name属性对这个模板进行命名，后面需要调用这个模板的时候，直接调用这个名字即可

// 定义的模板
<template name="first">
  <view>{{test}}</view>
</template>

// 调用模板
<template is="first" data="{{test}}"></template> // data是传过去的变量

效果如下：

也可以定义多个模板，根据条件判断显示哪个

// 定义的模板
<template name="first">
	<view>first</view>
</template>
<template name="seconed">
	<view>seconed</view>
</template>

// 调用模板
<block wx:for="{{[0,1,2,3,4,5,6,7]}}" wx:key='index'>
	<template is="{{item % 2 == 0?'first':'seconed'}}"></template>
</block>

效果如下：

不同于html的是在wxml中import是一个标签

// 引用wxml
<import src='../list/index.wxml'></import>// 通过import引用其他文件下的wxml文件，可以使用被引用文件下的模板
<template is='seconed'></template>

// 被引用wxml
<template name="seconed">
	<view>seconed</view>
</template>

效果如下：

微信小程序中另外一个引用标签是include，可以将另外一个文件的wxml中除template内的内容以外的内容引用

// 引用wxml
<text class="hello">hello</text>
<include src='../list/index.wxml'></include>

// 被引用wxml
<template name="seconed">
	<view>seconed</view>
</template>
<view>world</view>

效果如下：

wxss文件

wxss相当于css，用来描述wxml的样式
wxss中的单位是用rpx计算的，可以根据屏幕宽度自适应，1rpx=0.5px
定义在app.wxss中的样式是全局样式，在每个页面中的wxss是局部样式，只对当前文件下的wxml起作用，并且会覆盖全局下的app.wxss的相同样式

目前支持的选择器如下：