小程序/代码组成

- WXML

weixin markup language,小程序架构设计出来的一套标记语言，可以构建出页面的结构。
标签名必须闭合
属性大小写敏感
数据绑定：
通过{{}}来绑定视图层和逻辑层的数据
（1）绑定文本内容时：使用{{value}}
（2）绑定属性值时：src = “{{value}}” //要加双引号
这两种变量不会被同步到wxml：没有被定义、undefined
**逻辑语法：**可以在花括号里面进行js运算，比如三目运算、字符串拼接、数值相加减等等
条件逻辑：
wx:if属性来判断是否要渲染当前标签的内容。
可以使用wx:if、wx:elif、wx:else来添加else块。
当要控制多个view标签的是否显示时，可以使用<block wx:if="{{false}}">
通用的使用方法：<view wx:if="{{true}}">
列表渲染：
属性wx:for、wx:for-index、wx:for-item，（index和item是默认值）
通用的使用方法：<view wx:for="{{array}}" wx:for-index=“idx” wx:for-item=“person”>
可以使用<block>标签
若项目中的内容要保持原有状态：
（1）（input、switch等），可以使用wx:key=“unique”,unique是js的data的渲染数据的每一项的属性值，注意要设置成独一无二的。（联想到了react diff算法的key值）
（2）wx:key="*this": 若item本身是一个唯一的字符串或者数字
模板template:
模板是一个代码片段，写在wxml中，当需要的时候用以渲染
通用方法：

//定义模板，并不渲染
<template name="myName">
	<view>姓名：{{name}}</view>
	<view>年纪：{{age}}</view>
</template>
//使用模板并且渲染, ”...“可以保证对象内部的基础类型值的深拷贝
<template is="myName" data="{{...person}}"></template>
/*
	js里面的data:
	data:{
		person:{name: "李亚男"， age: 25}
	}
*/

引用：
（1）<import src=“item.wxml”>,使用该语句，可以在当前页面下使用item.wxml内部的模板template,但是不可以使用item.wxml内部import的文件的模板
（2）< include src=“item.wxml”/>可以将引入文件的除了template和wxs等代码复制到引入语句的位置，比如引入header或者footer等。
共有属性：
所有wxml标签都支持的属性class、id、style、bind*/catch*、hidden、data-*

- JSON

- JS

js组成：
web浏览器：ECMAScript+Dom+Bom
NodeJS: ECMAScript+NPM+Native
小程序：ECMAScript+小程序框架+小程序API
执行环境：
Andriod、IOS、开发者工具
模块化：
web中，作用域只有一个，不同的js文件可以共享变量，比如在首页的html中引入的第三方库文件，赋值给window变量后，就可以在子js文件中访问这个变量。小程序一个js文件就是一个作用域，可以使用moudle.exports = {}来向外暴露接口，通过require("./common.js")来引入。
脚本的执行顺序：
web浏览器：从上到下来执行
小程序： 先执行app.js，之后按照app.json里面的页面注册顺序来执行相应的js文件
作用域：
由于小程序一个js文件就是一个作用域：
（1）若是想和web一样使用全局变量的话：可以使用app.js里面的globalValue来访问，getApp()是app.js的一个实例。（我感觉这里好像是案例模式呢？）
（2）在不同的pages里面的js文件，可以定义一样的名字的变量，因为作用域不同，所以不会互相影响。

- WXSS

weixin style sheets小程序上的样式语言
文件组成：
页面样式：在pages里面定义的wxss文件
公共项目样式：app.wxss
其他样式文件：统一的文件夹里面写的wxss样式文件，可以上述两种样式文件引入
无需优化样式文件的请求数量，因为有编译优化
尺寸单位rpx：
responsive pixel
屏幕实际的物理像素表示为w
1rpx/375 = 1px/w
1rpx = 375/w(px)
开发时，无论是什么机型，都可以把屏幕的宽度理解为375px，设定宽度时，将其单位换为rpx
当需要根据屏幕不同的尺寸来调整才需要使用rpx
wxss引用：
@import ‘./style.wxss’;会被打包进项目中，不会引起多余的wxss网络请求
内联样式动态更新：
<view style=“color:{{color}}; fontsize:{{size}}”></view>
内联样式的属性值可以是js的data里面自定义的，所以可以动态更改
选择器
.class
#id
element
::after
::before
特指度遵循ICE，！important(无穷大)>style=""(1000)
官方样式库：
e:/study-work/小程序/weui-wxss-master/dist里面是微信团队给出来的官方样式库