一、微信模板语言WXML
? 微信模板语言：文件后缀是.wxml.和HTML类似，主要作用:内容展示，数据渲染
<!--WXML非常类似于HTML-->
<!-- <view><image src="/img/1.jpg"></image></view> -->
<view>
<checkbox checked></checkbox>
</view>
二、数据绑定
<!-- 动态数据渲染
1、内容渲染：尖括号中间
2、属性值的数据渲染
3、数据来自于配套的.js文件中page的data属性的值
4、如果获取data里面的值,使用{{}}插值表达式
5、可以直接获取配套js数据
尖括号中间内容渲染-->
?
?
<!-- 1、内容渲染：尖括号中间 -->
<view>
<view>我叫：{{name}}</view>
<view>今年：{{age}}</view>
<view>月薪：{{salary}}</view>
<view>爱好：{{likes}}</view>
<view>婚否：{{isMarry==false? "大龄青年":"有对象"}}</view>
<view>女朋友标准：</view>
<view>{{girl.name}}</view>
<view>{{girl.sala}}</view>
</view>
?
<!-- 2、属性值的数据渲染
A、常规属性：class、id、name、checked
B、自定义属性：-->
<!-- 1、直接写值 -->
<view id="123"></view>
?
<!-- 2、渲染data里面的参数作为属性值 注意：切记使用插值表达式{{}}获取data参数-->
<view id="{{salary}}">动态参数值</view>
?
<!-- 3、自定义数字属性 -->
<view data-num="123"></view>
<view data-str="{{name}}"></view>
?
<!-- 4、直接写值会默认为字符串类型 如果要使用boolean,使用写法：{{布尔值}} ""和{}之间不能有空格-->
<checkbox checked="{{false}}">复选框</checkbox>
<checkbox checked="false">不写插值</checkbox>
?
三、逻辑语法
? 逻辑运算：取值渲染还是逻辑运算都要写在插值表达是中 数字运算 字符串拼接 三元表达式
<!-- 数字运算 -->
<view>每月总收入：{{salary + girl.sala}}</view>
?
<!-- 字符串拼接 -->
<view>{{name + "===" + girl.name}}</view>
?
<!-- 三元表达式 -->
<view>{{isMarry == false ? "大龄青年":"有对象"}}</view>
四、列表渲染
<!--
for(var i=0;i<10;i++){
只能拿到i下标
}
?
for(value of arr){
value是数组的值
}
?
for(key in arr)
?
wx:for
1、语法：wx:for="{{数组|对象}}"
2、下标：默认名叫index 使用加{{}}
3、循环项：默认名叫item 使用加{{}}
4、修改下标和循环项的默认名
修改下标：wx:for-index="名"
修改默认循环项：wx:for-item="名"
5、wx:key
A、即使不写也不会出现任何问题，只是调错方便
B、为数组制定一个唯一标识，提升遍历效率
C、写法: wx:key="index"对于普通数组
wx:key="唯一值的属性" 对于对象
wx:key="*this" 一般加给数组，this指代数组中遍历出的唯一的item
-->
for循环
<view>
<!-- 1、写数字：效果是循环n次 index === item 循环出都是下标值-->
<view wx:for="{{10}}">{{index}} ==== {{item}}</view>
<!-- 循环普通数组 index下标 item是循环项-->
<view wx:for="{{arr}}" wx:key="index">{{index}} ==== {{item}}</view>
?
<view>=====循环对象=====</view>
<!-- 2、循环对象 index属性名 item属性值
修改下标：wx:for-index="名"
修改默认循环项：wx:for-item="名"
建议：循环对象时一定改index和item
-->
<view wx:for="{{girl}}" wx:for-index="key" wx:for-item="value">
{{key}} ==== {{value}}
</view>
?
<!-- 3、循环对象数组 先循环数组，再循环对象 -->
<!-- 外层循环数组 -->
<view>======循环对象数组======</view>
<view wx:for="{{girls}}" wx:for-item="obj">
<!-- 内层循环对象 -->
<view wx:for="{{obj}}" wx:for-index="key" wx:for-item="value">{{key}} === {{value}}</view>
</view>
?
<!-- 4、block：写的时候存在，编译的时候不存在 -->
<block wx:for="{{girls}}" wx:for-item="obj" wx:key="*this">
<!-- 内层循环对象 -->
<view wx:for="{{obj}}" wx:for-index="key" wx:for-item="value" wx:key="age">{{key}} === {{value}}</view>
</block>
</view>
五、共有属性： wx:if|hidden
<!-- 逻辑判断： wx:if|hidden
if(条件表达式){
语句
}else if(条件表达式){
语句
}else{
?
}
?
1、条件表达式的结果是true|false
2、条件表达式之间要有顺序
3、if一定是只执行某一个
4、wxif语法: wx:if="{{条件表达式}}" wx:elif="{{条件表达式}}" wx:else
5、w:if非常类似于vue的if
原理是根据条件表达式的结果进行创建渲染,(通过|true)或 销毁页面(失败|false)元素
6、弊端：消耗过大
可以实现组合判断
?
>=10000 换一个
>=8000 卖一个
>=5000 不吃饭
>=3000 再买一车
-->
?
<view>
<view wx:if="{{sum >= 10000}}">换一个</view>
<view wx:elif="{{sum >= 8000}}">卖一个</view>
<view wx:elif="{{sum >= 5000}}">不吃饭</view>
<view wx:else>再买一车</view>
</view>
hidden:
<!-- hidden 隐藏 1、类似于vue的v-show,通过表达式的结果，来设置指定元素的display:none|block
2、基本语法：hidden="{{条件表达式}}" true隐藏 false显示
3、默认写法：只写hidden代表隐藏当前元素
false 不隐藏要显示 display:block;
true 要隐藏不显示 display:none;
-->
<view hidden="{{false}}">hidden隐藏测试</view>
两者区别
<!-- wx:if 和 hidden区别
1、wx:if根据条件表达式的结果进行创建渲染,(通过|true)或 销毁页面(失败|false)元素
hidden通过表达式的结果，来设置指定元素的display:none|block 结果是false设置display:block显示
2、wx:if创建和销毁，销毁过大，hidden是设置display，销毁小
频繁切换用hidden,切换次数少用wx:if
-->
六、微信样式语法WXSS：
? 微信样式语法WXSS和css基本一致，例如选择器，样式设置，微信样式语法的文件后缀是.wxss
选择器
注意：‘通配选择器无法在微信小程序中使用，可以使用’
小程序组件与事件处理
? 组件是在 WXML 模板文件声明中使用的，WXML 的语法和 HTML 语法相似，小程序使用标签名来引用一个组件， 通常包含开始标签和结束标签，该标签的属性用来描述该组件
? 组件是来构造WXML页面结构。组件类似HTML标签，但组件是HTML标签封装版，增加了很多的属性和方法
? 组件分类：1、基础组件(微信小程序自带组件) 2、自定义组件
<image mode="scaleToFill" src="img.png"></image>
? 对于一些容器组件，其内容可以声明在其开始标签和结束标签之间，也就是我们常说的组件嵌套
<view>
<image mode="scaleToFill" src="img.png"></image>
<view>
<view>1</view>
<view>2</view>
<view>3</view>
</view>
</view>
注意：所有组件名和属性都是小写，多个单词会以英文横杠 "-" 进行连接。
一、基础组件
基础组件分为以下八大类：
（1）、视图容器(View Container)
（2）、基础内容(Basic Content)
（3）、表单(Form)
（4）、导航(Navigation)
（5）、多媒体(Media)
（6）、地图(Map)
（7）、画布(Canvas)
（8）、客服会话
1、 view：代替原来的div标签，块级容器
<view hover-class="h_class">点我试试</view>
2、text:
(1)文本标签
? (2)只能嵌套text
? (3)长按文字可以复制(只有该标签有这个功能)
? (4)可以对空格 回车进行编码
? space合法性
<!-- 1、长按文字复制selectable
2、对文本内容 进行 解码decode
-->
<text selectable decode>
text 123 < >
</text>
<!--1、view 块级容器，类似于div标签 内部嵌套其他组件的
2、hove-class 当按下是给view增加一个样式类 增加一个class值
具体的样式类的wxss效果还需要设置
3、hover-stay-time 效果持续时间 默认400毫秒
4、hover-start-time 点击多久出现效果，默认50毫秒
5、hover-stop-propagation 阻止hover-class 冒泡 阻止当前组件向上进行hover-class冒泡
-->
<!-- text 1、类似于span行级容器
2、text只能嵌套自身，不能嵌套其他组件
3、user-select 设置文字选择功能 默认false
用法：1、user-select="{{true}}" 2、user-select
4、space 显示连续空格
space="ensp|emsp|nbsp"
5、decode 开启解码转义功能 默认false
-->
3、image：mode、lazy-load 与 bindload 属性 都是十分便捷的实现，可以说经过小程序的改造后，这个标签的功能大大超过了 img 标签。
A、图片标签，image组件默认宽度320px,高度240px
B、支持懒加载
<!-- image
1、封装了img图片的组件
2、src图片路径 建议来自于网络 服务器 oss 七牛云 默认会对图片进行缩放
3、image 无法直接设置高度的 图片本身的高度就是最根本的
4、mode 进行图片的缩放和裁剪
scaleToFill默认值
aspectFit 保持纵横比缩放 长边完全显示 短边自适应
widthFix 缩放模式，宽度不变，高度自动变化 保持原来宽高比不变
-->
<image src="https://img.alicdn.com/imgextra/i1/6000000006807/O1CN01LUYFBI209eeYxvibd_!!6000000006807-0-octopus.jpg" mode="widthFix"></image>
?
4、swiper：微信内置轮播图组件，其中只可放置 swiper-item 组件
<!-- swiper
1、轮播图组件容器
2、内部能且仅能嵌套swiper-item 组件
3、autoplay 是否自动切换 默认false
4、interval 自动切换时间间隔 默认5000毫秒
5、circular 是否采衔接滑动 默认false
6、swiper容器高度不能通过内部的容器给撑起来，只能自己设置 默认宽高：100% 150px
设置高度公式： calc(750rpx * 图片高度 / 图片宽度) 750rpx是屏幕宽度
-->
<swiper autoplay interval="5000" circular>
<swiper-item>
<image src="https://img.alicdn.com/imgextra/i1/6000000006807/O1CN01LUYFBI209eeYxvibd_!!6000000006807-0-octopus.jpg"></image>
</swiper-item>
<swiper-item>
<image src="https://img.alicdn.com/imgextra/i1/6000000001477/O1CN01YK3KnA1MmVcmKVGAC_!!6000000001477-2-octopus.png"></image>
</swiper-item>
<swiper-item>
<image src="https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"></image>
</swiper-item>
</swiper>
5、swiper-item: 仅可放置在 swiper 组件中，宽高自动设置为 100%。
6、 navigator: 导航组件类似超链接标签。
<!-- navigator
1、导航组件类超链接
2、target 跳转目标：self(默认)跳转当前项目 miniProgram跳转其他小程序
3、url 地址
4、open-type 跳转方式 默认navigate
navigate保留当前页面，跳转到应用的某个页面，到不能跳转tabBar页面，保留页面回退
redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabBar 页面。保留页面回退
switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
-->
<navigator url="/pages/demo1/demo1" >跳转轮播图</navigator>
<navigator url="/pages/demo1/demo1" open-type="redirect">跳转轮播图1(redirect)</navigator>
<navigator url="/pages/omments/comments" open-type="switchTab">跳转轮播图2(switchTab)</navigator>
7、 button: 按钮组件。
8、 icon：图标组件。组件属性的长度单位默认为 px，2.4.0 起支持传入单位(rpx/px)。
9、radio 单选组件，可以通过 color 属性来修改颜色。
? radion-group 组件为单项选择器，内部由多个 radio 组成。
10、checkbox 为多选组件，可以通过 color 属性来修改颜色
? checkbox-group 为多项选择器，checkbox 需要搭配 checkbox-group ?起使?，
二、小程序事件
? 事件机制是一种非常典型的通讯方式。可以令代码中的不同对象互相传递信息，也可以在应用的，不同层面进行沟通协作。
? 什么是事件？
? (1)事件是视图层到逻辑层的通讯方式；
? (2)事件可以将用户的行为反馈到逻辑层进行处理；
? (3)事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数；
? (4)事件对象可以携带额外信息，如 id, dataset, touches。
1、小程序事件绑定
? A、我们为一个组件绑定一个事件处理函数，通过 bind 关键字来实现。如 bindtap、bindinput、bindchange 等，不同的组件?持不同的事件
<!--事件绑定bind-->
<!-- 1、需要给input标签绑定input事件 绑定关键字bindinput
2、如何获取 输入框的值： 通过事件源来获取的 e.detail.value
3、把输入框的值 赋值给data当中
不能直接 1、this.data.num =e.detail.value
2、this.num =e.detail.value
正确写法：this.setData({num:e.detail.value})
4、需要加入一个点击事件
1、bindtap
2、无法在小程序当中 事件中 直接传参
3、通过自定义属性的方式来传递参数
4、事件源中获取 自定义属性
-->
<input type="text" bindinput="handInput"/>
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>
注意：1、handleinput 是自定义的 index.js 里自定义的函数，通过属性 bindinput 绑定了该函数
? 2、handleinput 函数和 data 是平级的；
? 3、事件绑定函数可以是一个数据绑定，如：<input bindinput="{{}}" placeholder="请输入姓名："/>
? 4、在大多数组件和自定义组件中，bind 后可以紧跟一个冒号，其含义不变，如： bind:input
? 5、绑定事件时不能带参数，不能带括号
? 6、事件传值通过标签?定义属性的?式和 value：<input bindinput="handleInput" data-item="100" />
? 7、事件触发时获取数据，
? 案例：
==================================wxml==========================================================
<view>小程序事件</view>
?
<!-- 1、数据绑定
通过事件触发对应的函数来绑定函数
2、bindinput当输入框输入内容时会触发
事件="处理函数" 处理函数：1、不能写() 2、不传参
3、普通页面的事件处理函数要写在.js文件中，和data同级
默认参数event事件对象
4、输入框的值在value存着
使用event去获取 event.datail.value
5、修改data中的属性值
this.setData({要修改的属性 ： 值})
6、在小程序中没有class事件 替代是tap事件
7、对于事件传参，可以通过自定义属性来传参
8、event.currentTarget.dataset 获取所有自定义属性的键值对的对象
9、在js中使用data的参数 this.data.参数
-->
<input type="text" bindinput="getNum"/>
<view>输入框的值:{{num}}</view>
<button bindtap="add" data-add="{{1}}">+</button>
<button bindtap="sub" data-sub="{{-1}}">-</button>
?
?
========================================js==========================================
// pages/demo3/demo3.js
Page({
?
/**
* 页面的初始数据
*/
data: {
num:0
},
//event事件对象
getNum(event){
const value = event.detail.value;
// const {value} = event.detail;
// console.log(event.detail);
// console.log(event.detail.value);
// 设置data的num值等于value
// wx修改data的属性值
this.setData({
num : value
})
},
?
add(event){
//自定义属性传参还有使用event获取
console.log(event);
// const add = event.currentTarget.dataset
let {add} =event.currentTarget.dataset;
this.setData({
//*1字符串转数字
num : this.data.num * 1 + add
})
},
sub(event){
console.log(event);
let {sub} =event.currentTarget.dataset;
this.setData({
//*1字符串转数字
num : this.data.num * 1 + sub
})
}
})
2、事件冒泡
? WXML 中分别提供了两种方式，用来绑定事件处理函数：
? A、使用 bind 开头的事件绑定，这种绑定不会阻止冒泡事件向上冒泡；
? B、使用 catch 开头的事件绑定，这种绑定可以阻止冒泡事件向上冒泡
3、事件分类
? 事件主要分为这两类：
? A、冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
? B、非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
注意：子级元素触发的非冒泡事件是不能向父级元素逐层向上传递
4、事件对象
5、小程序生命周期
? 生命周期就是指一个对象的生老病死。 从软件的角度来看，生命周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程，这个过程主要是由小程序生命周期函数来完成的。
应用生命周期 ：首先我们的应用生命周期是在App.js里面的一系列函数
页面生命周期
组件生命周期
自定义组件和周期
微信小程序组件分类：
? 组件分类：(1)、基础组件(微信小程序自带组件view|text|icon|image)
? (2)、自定义组件(重用)
1、创建组件
? 创建步骤： 1、新建components文件夹
? 2、新建自定义组件的文件夹(tabs)
? 3、选中自定义组件文件右键新建components(tabs)
解析自定义组件结构
1、由四个部分：.js|.json|.wxml|.wxss 页面就是一个大的组件或者自定义组件就是一个页面
2、自定义组件的.js文件
? App.js 构造方法：App
? 页面.js 构造方法：Page
? 自定义组件的.Js 构造方法：Component
3、自定义组件的.json文件
{
//用于声明当前文件是组件
//对于创建自定义组件是必须的
"component": true,
//用于引用其他自定义组件
"usingComponents": {
"自定义组件":"路径"
}
}
1.1.2、引入并使用自定义组件
<tabs tabsArr="{{tabsArr}}" binditemChange="itemChange">
<view>slot插槽就是一个占位符，父组件调用子组件的时候再传递标签过来最终这些被传递的标签</view>
</tabs>