微信小程序黑马学习笔记

微信小程序

模板语法

数据绑定

• 在页面.js中定义数据到data对象

Page({

data: {
	info: 'hello world',
	list: ['']
},

})

.wxxm文件中

{{info}}

Mustache 语法的主要应用场景如下： 绑定内容

绑定属性(src="{{}}") 不像vue3 :src="")

运算（三元运算、算术运算等）

{{age>=18 ? ‘成年’ : ‘未成年’}}

{{age*10}}

事件绑定

小程序中常用的事件

类型	绑定方式	事件描述
tap	bindtap 或 bind:tap	手指触摸后马上离开，类似于 HTML 中的 click 事件
input	bindinput 或 bind:input	文本框的输入事件
change	bindchange 或 bind:change	状态改变时触发

事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象 event，它的详细属性如下表所示：

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

target 和 currentTarget 的区别全局配置

bindtap 的语法格式

通过 bindtap，可以为组件绑定 tap 触摸事件，语法如下：

在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（一般简写成 e） 来接收：

事件处理函数中为 data 中的数据赋值

事件传参

可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例代码如下：

在事件处理函数中，通过 event.target.dataset.参数名 即可获取到具体参数的值，示例代码如下：

条件渲染

在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

也可以用 wx:elif 和 wx:else 来添加 else 判断：

结合 使用 wx:if,一次性控制多个组件的展示与隐藏

注意： 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。

hidden

在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的显示与隐藏：

运行方式不同 wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏 hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏

列表渲染

wx:for

默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。

使用 wx:for-index 可以指定当前循环项的索引的变量名 使用 wx:for-item 可以指定当前项的变量名

wx:key 的使用

模板样式

与 CSS 相比，WXSS 扩展的特性有： rpx 尺寸单位 @import 样式导入

WXSS 和 CSS 的关系

rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。

@import 的语法格式

@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。示例如下：

全局配置

window-导航栏

window 节点

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

tabBar

注意：tabBar中只能配置最少 2 个、最多 5 个 tab 页签当渲染顶部 tabBar 时，不显示 icon，只显示文本

tabBar的属性	含义
backgroundColor	tabBar的背景颜色
selectedIconPath	选中时的图片路径
borderStyle	tabBar 上边框的颜色
iconPath	未选中时的图片路径
selectedColor	tab 上的文字选中时的颜色
color	tab 上文字的默认（未选中）颜色

3. tabBar 节点的配置项

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar 的位置，仅支持 bottom/top
borderStyle	String	否	black	tabBar 上边框的颜色，仅支持 black/white
color	HexColor	否		tab 上文字的默认（未选中）颜色
selectedColor	HexColor	否		tab 上的文字选中时的颜色
backgroundColor	HexColor	否		tabBar 的背景色
list	Array	是		tab 页签的列表，最少 2 个、最多 5 个 tab

4. 每个 tab 项的配置选项

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在 pages 中预先定义
text	String	是	tab 上显示的文字
iconPath	String	否	未选中时的图标路径；当 postion 为 top 时，不显示 icon
selectedIconPath	String	否	选中时的图标路径；当 postion 为 top 时，不显示 icon

页面配置

2. 页面配置和全局配置的关系

小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

3. 页面配置中常用的配置项

   属性	类型	默认值	描述
   navigationBarBackgroundColor	HexColor	#000000	当前页面导航栏背景颜色，如 #000000
   navigationBarTextStyle	String	white	当前页面导航栏标题颜色，仅支持 black / white
   navigationBarTitleText	String		当前页面导航栏标题文字内容
   backgroundColor	HexColor	#ffffff	当前页面窗口的背景色
   backgroundTextStyle	String	dark	当前页面下拉 loading 的样式，仅支持 dark / light
   enablePullDownRefresh	Boolean	false	是否为当前页面开启下拉刷新的效果
   onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为 px

网络数据请求

只能请求 HTTPS 类型的接口必须将接口的域名添加到信任列表中

配置 request 合法域名

需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名注意事项：域名只支持 https 协议域名不能使用 IP 地址或 localhost域名必须经过 ICP 备案服务器域名一个月内最多可申请 5 次修改

POST请求

在页面刚加载时请求数据

跳过 request 合法域名校验

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名的校验。

① 声明式导航

在页面上声明一个 导航组件

通过点击 组件实现页面跳转

② 编程式导航

调用小程序的导航 API，实现页面的跳转

类型	绑定方式	事件描述
tap	bindtap 或 bind:tap	手指触摸后马上离开，类似于 HTML 中的 click 事件
input	bindinput 或 bind:input	文本框的输入事件
change	bindchange 或 bind:change	状态改变时触发

页面导航

声明式导航

导航到 tabBar 页面

tabBar 页面指的是被配置为 tabBar 的页面。

在页面上声明一个 导航组件通过点击 组件实现页面跳转

导航到消息页面

url 表示要跳转的页面的地址，必须以 / 开头 open-type 表示跳转的方式，必须为 switchTab

导航到非 tabBar 页面

导航到消息页面

url 表示要跳转的页面的地址，必须以 / 开头open-type 表示跳转的方式，必须为 navigate

此时open-type=“navigate” 属性可以省略。

后退导航

如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中： open-type 的值必须是 navigateBack，表示要进行后退导航 delta 的值必须是数字，表示要后退的层级

注意：为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1。

编程式导航

调用小程序的导航 API，实现页面的跳转

调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下：

导航到 tabBar 页面

属性	类型	是否必选	说明
url	string	是	需要跳转的 tabBar 页面的路径，路径后不能带参数
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

1 //页面结构
2<button bindtap="gotoMessage">跳转到消息页面</button>
4 //通过编程式导航,跳转到message页面 
gotoMessage(){
  wx.switchTab({
	url: '/pages/message/message'
})
}

导航到非 tabBar 页面

1 //页面结构
2<button bindtap="gotoInfo">跳转到消息页面</button>
4 //通过编程式导航,跳转到info页面 
gotoInfo(){
  wx.navigateTo({
	url: '/pages/info/info'
})
}

后退导航

<button bindtap="gotoBack">后退</button>

gotoBack(){

wx.navigateBack()

}

调用 wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下：

属性	类型	默认值	是否必选	说明
delta	number	1	否	返回的页面数，如果 delta 大于现有页面数，则返回到首页
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

导航传参

声明式导航传参

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

参数与路径之间使用 ? 分隔

参数键与参数值用 = 相连

不同参数用 & 分隔代码示例如下：

<navigator url="/pages/info/info?id=10001&page=20">跳转到info页面</navigator>

编程式导航传参

<button bindtap="gotoInfo2">跳转到info页面</button>
通过编程式导航，跳转到info 页面，并携带参数 
gotoInfo2() {
wx.navigateTo({
url: '/pages/infolinfo?name=ls&gender=男'
}) }  

/*生命周期函数--监听页面加载*/
 onLoad: function(options) {
 //options就是导航传递过来的参数对象
 console.log(options)
 }

页面事件

下拉刷新事件

启用下拉刷新有两种方式：

全局开启下拉刷新

在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true

局部开启下拉刷新在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。

在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式，其中： backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值 backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

配置下拉刷新窗口的样式

在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式，其中： backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值 backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

监听页面的下拉刷新事件

onPullDownRefresh()

停止下拉刷新的效果

wx.stopPullDownRefresh()

上拉触底事件

监听页面的上拉触底事件

onReachBottom()

配置上拉触底距离

通过 onReachBottomDistance 属性来配置上拉触底的距离

生命周期

//页面的 .js文件

Page({
onLoad : function(options){ }, //监听页面加载，一个页面只调用1次
onShow : function() { }, //监听页面显示
onReady : function() { }, //监听页面初次渲染完成,一个页面只调用1次
onHide : function() { }, //监听页面隐藏
onUnload: function(){} //监听页面卸载，一个页面只调用1次
8 })

WXS 脚本

wxs 和 JavaScript 的关系*

虽然 wxs 的语法类似于 JavaScript，但是 wxs 和 JavaScript 是完全不同的两种语言：wxs 有自己的数据类型 number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、 function 函数类型、array 数组类型、 date 日期类型、 regexp 正则wxs 不支持类似于 ES6 及以上的语法形式 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc… 支持：var 定义变量、普通 function 函数等类似于 ES5 的语法wxs 遵循 CommonJS 规范 module 对象 require() 函数 module.exports 对象

内嵌 wxs 脚本

定义外联的 wxs 脚本

使用外联的 wxs 脚本

在 wxml 中引入外联的 wxs 脚本时，必须为 标签添加 module 和 src 属性，其中： module 用来指定模块的名称 src 用来指定要引入的脚本的路径，且必须是相对路径示例代码如下：

day4自定义组件

创建组件

在项目的根目录中，鼠标右键，创建 components -> test 文件夹在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中，例如：

局部引用组件

页面.json文件

{
  "usingComponents": {
    "my-test1": "/components/test/test"
  }
}

页面.wxml

<my-test1></my-test1>

全局引用组件

app.json

组件和页面的区别

从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，

组件和页面的 .js 与 .json 文件有明显的不同：

组件的 .json 文件中需要声明 “component”: true 属性组件的 .js 文件中调用的是 Component() 函数

组件的事件处理函数需要定义到 methods 节点中

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的 UI 结构，如图所示：

组件样式隔离

组件样式隔离的注意点

app.wxss 中的全局样式对组件无效只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！

3. 修改组件的样式隔离选项

   默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项，用法如下：

styleIsolation 的可选值

data 数据

在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中，示例如下：

methods 方法

在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中，示例代码如下：

properties 属性

在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下：

data 和 properties 的区别

在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过：data 更倾向于存储组件的私有数据properties 更倾向于存储外界传递到组件中的数据

使用 setData 修改 properties 的值

由于 data 数据和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于页面渲染，或使用 setData 为 properties 中的属性重新赋值，示例代码如下：

数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下：

数据监听器的基本用法

监听对象属性的变化

组件的生命周期

小程序组件可用的全部生命周期如下表所示

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行