开发框架:
- wxml 描述页面内容 (weixin markup language):
小程序设计的标签语言
语法:(区分大小写)
< 标签名 属性名="属性名1" ... >
...(内容)
</标签名>
wxml能进行:
1.数据绑定:实现数据的动态更新,使用Mustache方法:{{变量名}}
在wxml中:
<view>
<text>{{message}}</text>
</view>
在js中:
Page({
data: {
message: '你好'
}
})
在属性值中使用:
#属性名要小写
在wxml中:
<view>
<text data-name="{{theName}}"></text>
</view>
在js中:
Page({
data:{
theName:'jiaody'
}
})
在运算符中使用:
在wxml中:
<view hidden="{{flag?true:false}}">
Hidden
</view>
#当传入的flag是true时隐藏view文本标签中的内容,false时不隐藏
在js中:
Page({
data:{
flag:true #隐藏
}
})
属性:
id:String类型 组件的唯一表示(保持整个页面唯一)
class:String类型 在WXSS中定义的样式类
style: String类型 内联样式(可动态设置)
hidden:Boolean类型 默认显示
data-*: Any类型 自定义属性,组件上触发的事件时,会发送给事件处理函数。
2.列表渲染
- wxss 描述页面样式
- wxs 帮助wxml快速构建出页面的内容结构
- JavaScript 交互逻辑以及数据通信
使用<block>对数组进行渲染,
wx:key = 字符串时,用来代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
wx:key = 保留关键字*this ,代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
wx:if和hidden的区别:
1.都有显示隐藏的作用
2.if条件在切换时框架会有一个局部渲染的过程,条件会销毁并重新渲染;
hidden初始化渲染消耗比较高,通过hidden可以控制在视图上的显示和隐藏,始终都会渲染
3.wx:if有切换消耗更高,切换效果频繁的建议使用hidden
3. 模板引用
使用template标签可以定义自己的代码片段
小程序中文件引用,有两种方法:include和import
import用来引入目标文件中的template模板,而且import具有作用域(只能引用一级):
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template。
include用来引入除了template之外的内容。
在wxml中:
<template name = "tempItem">
<view>
<view>收件人:{{name}}</view>
<view>联系方式:{{phone}}</view>
<view>地址:{{address}}</view>
</view>
</template>
<template is="tempItem" data="{{...item}}"></template>
# name属性是template的名称,is属性来声明我们使用的是哪个模板。{{...item}}中前面的三个点是es6语法中的扩展运算符,可以将对象或数组进行解构赋值。
在js中:
Page({
data:{
item:{
name:"张三",
phone:"1234567",
address:"中国"
}
}
})
4.WXSS优先级排序
(1) ! important 优先级最高
(2) 内联样式
(3)id属性
(4) class属性
(5)标签属性
5. 页面路由
路由方式 | 触发机制 | 路由前页面 | 路由后页面 |
初始化 | 小程序打开时的第一个页面 | onLoad onShow | |
打开新页面 | 调用API wx.navigateTo或使用组件 <navigator open-type='navigateTo'> | onHide | onLoad onShow |
页面重定向 | 调用API wx.redirectTo或使用组件<navigator open-type='redirectTo'> | onUnload | onLoad onShow |
页面返回 | 调用API wx.navigateBack或使用组件 <navigator open-type='redirectTo'>或用户按左上角返回按钮 | onUnload | onShow |
Tab切换 | 调用API wx.switchTab或使用组件<navigator open-type='redirectTo'>或用户切换Tab | ||
重启动 | 调用API wx.reLaunch 或使用组件 <navigator open-type='reLaunch'>
| onUnload | onLoad onShow |
6. 事件:
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
捕获 --> 处理 --> 冒泡
捕获: 从父容器向子容器传递
捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时,可以采用capture-bind
、capture-catch
关键字,后者将中断捕获阶段和取消冒泡阶段。
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
</view>
#捕获在前,冒泡在后。
bind:* : 绑定事件, 事件会冒泡, 优先目标触发, 然后逐级向父节点传递
catch:* : 绑定事件, 阻止冒泡
capture-bind:* : 反向冒泡, 优先根节点, 逐级派发到目标
capture-catch:* : 阻止反向冒泡, 只会触发绑定了事件的根节点
执行顺序是:handleTap2 --> handleTap4 --> handleTap3 --> handleTap1
<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
</view>
# 将上面代码中的第一个capture-bind改为capture-catch,将只触发handleTap2。
冒泡:从子容器到父容器传递
bind: 处理冒泡事件, 不拦截冒泡传递,继续传递事件
catch: 处理冒泡事件, 拦截冒泡传递, 不传递给父控件