页面导航
页面导航就是页面之间的跳转，小程序中页面之间的导航有两种方式：
① 声明式导航：通过点击 navigator 组件实现页面跳转的方式；
② 编程式导航：通过调用小程序的 API 接口实现跳转的方式；
声明式导航
导航到非 tabBar 页面
非
tabBar页面指的是没有被当作tabBar进行切换的页面。
<navigator url="/pages/about/about">跳转到 about 页面</navigator>
注意事项
-
url属性设置需要跳转的路径 - 页面路径应该以 / 开头，
- 路径必须提前在
app.json的pages节点下声明
导航到 tabBar 页面
navigator组件单纯使用
url属性，无法导航到tabBar页面，必须需要结合open-type属性进行导航。
<navigator url="/pages/person/person" open-type="switchTab">跳转到 tabBar 页面</navigator>
后退导航
小程序如果要后退到上一页面或多级页面，需要把
open-type设置为navigateBack，同时使用delta属性指定后退的层数
<navigator open-type='navigateBack' delta='1'> 返回上一页 </navigator>
<navigator open-type='navigateBack' delta='2'> 返回上上一页 </navigator>
编程式导航
导航到非 tabBar 页面
通过
wx.navigateTo(Object object)方法，可以跳转到应用内的某个页面。
但是不能跳到tabbar页面。
参数文档wx.navigateTo 详细文档
// 跳转到非导航页面
handle: function () {
wx.navigateTo({
url: '/pages/about/about',
success: function () {
console.log('Hello about')
}
})
},
导航到 tabBar 页面
通过
wx.switchTab(Object object)方法，可以跳转到tabBar页面，
并关闭其他所有非tabBar页面
参数文档wx.switchTab 详细文档
// 跳转到 tabBar 页面
tabBarHandle: function () {
wx.switchTab({
url: '/pages/person/person',
success: function() {
console.log('Hello Person')
}
})
},
后退导航
通过
wx.navigateBack(Object object)方法，关闭当前页面，返回上一页面或多级页面。
参数文档wx.navigateBack 详细文档
handle: function () {
wx.navigateBack({
delta: 1
})
},
twoHandle: function () {
wx.navigateBack({
delta: 2
})
},
小程序导航 -- 导航传参
####### 声明式导航传参
navigator组件的url属性用来指定导航到的页面路径，同时路径后面还可以携带参数，参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔。
<navigator url="/pages/about/about?age=18&name=shuji">跳转到 about 页面</navigator>
编程式导航传参
wx.navigateTo(Object object)方法的object 参数中，url属性用来指定需要跳转的应用内非tabBar的页面的路径, 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔。
// 跳转到 tabBar 页面
tabBarHandle: function () {
wx.switchTab({
url: '/pages/person/person?age=18&name=shuji',
success: function() {
console.log('Hello Person')
}
})
},
接受传递的参数
不论是声明式导航还是编程式导航，最终导航到的页面可以在
onLoad生命周期函数中接收传递过来的参数。
onLoad: function (options) {
// 打印传递出来的参数
console.log(options)
},
导航栏自定义编译模式快速传参
小程序每次修改代码并编译后，会默认从首页进入，但是在开发阶段，我们经常会针对特定的页面进行开发，为了方便编译后直接进入对应的页面，可以配置自定义编译模式，步骤如下：
- 单击工具栏上的“普通编译”下拉菜单
- 单击下拉菜单中的“添加编译模式”选项
-
在弹出的“自定义编译条件窗口”，按需添加模式名称、启用页面、启动参数、进入场景等。
image.png
网络数据请求
配置服务器域名
- 每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名进行网络通信。
- 服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置，配置时需要注意：
- 域名只支持
https(request、uploadFile、downloadFile) 和wss(connectSocket) 协议 - 域名不能使用
IP地址或localhost - 域名必须经过
ICP备案 - 服务器域名一个月内可申请5次修改
注意： 网络配置详情
- 域名只支持
跳过域名校验
- 在微信开发者工具中，可以临时开启 「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」 选项，跳过服务器域名的校验。此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验。
注意：在服务器域名配置成功后，建议开发者关闭此选项进行开发，并在各平台下进行测试，以确认服务器域名配置正确。
注意： 网络配置详情
小程序发送 get 与 Post 请求
小程序发送请求使用
wx.request()方法，
- 发起 get 请求:
getData: function () {
wx.request({
url: 'xxxx',
method: 'get',
success: function (res) {
console.log(res)
}
})
},
- 发起 post 请求:
postData: function () {
wx.request({
url: 'https://www.liulongbin.top:8082/api/post',
method: 'post',
data: {
name: 'shuji'
},
success: function (res) {
console.log(res)
}
})
},
注意： method 如果不进行配置，默认参数是 get 请求方式
wx.request 详细文档说明
小程序中没有跨域限制
- 在普通网站开发中，由于浏览器的同源策略限制，存在数据的跨域请求问题，从而衍生出了 JSONP 和 CORS 两种主流的跨域问题解决方案。
-
注意：小程序的内部运行机制与网页不同，小程序中的代码并不运行在浏览器中，因此小程序开发中，不存在数据的跨域请求限制问题
关于微信小程序更多的数据请求内容，请翻阅 wx.request() 的相关文档：
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
组件及组件之间的通讯
组件的创建
- 在项目的根目录中，鼠标右键，创建 components 文件夹 --> test
- 在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”
- 为新建的组件命名之后，会自动生成组件对应的 4 个文件，后缀名分别为
.js，.json，.wxml和.wxss
注意：应当尽量将不同的组件，存放到单独的文件夹中，从而保证清晰的目录结构
组件的引用
- 在需要引用组件的页面中，找到页面的
.json配置文件，新增usingComponents节点 - 在
usingComponents中，通过键值对的形式，注册组件；键为注册的组件名称，值为组件的相对路径 - 在页面的
.wxml文件中，把注册的组件名称，以标签形式在页面上使用，即可把组件展示到页面上
{
"usingComponents": {
"first-com": "../../component/com01/com01"
}
}
注册组件名称时，建议把组件名称使用中横线进行连接，例如 vant-button 或 custom-button
使用样式美化组件
- 组件对应
wxss文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点： - 组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器，请改用
class选择器。 - 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
- 子元素选择器(.a>.b)，只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
- 继承样式，如
font、color，会从组件外继承到组件内。 - 除继承样式外，
app.wxss中的样式、组件所在页面的样式对自定义组件无效。
使用 data 定义组件的私有数据
- 小程序组件中的
data与小程序页面中的data用法一致，区别是： - 页面的
data定义在Page()函数中 - 组件的
data定义在Component()函数中 - 在组件的
.js文件中： - 如果要访问
data中的数据，直接使用this.data.数据名称即可 - 如果要为
data中的数据重新赋值，调用this.setData({ 数据名称: 新值 })即可 - 在组件的 .wxml 文件中
- 如果要渲染 data 中的数据，直接使用 {{ 数据名称 }} 即可
使用 methods 定义组件的事件处理函数
- 和页面不同，组件的事件处理函数，必须定义在 methods 节点中
methods: {
handle: function () {
console.log('组件的方法要定义在 methods 中')
this.setData({
num: this.data.num + 1
})
console.log(this.data.num)
}
}
组件的 properties
properties 的作用
类似于 vue 组件中的 props， 小程序组件中的 properties，是组件的对外属性，用来接收外界传递到组件中的数据。
在小程序中，组件的 properties 和 data 的用法类似，它们都是可读可写的，只不过：
data 更倾向于存储组件的私有数据
properties 更倾向于存储外界传递到组件中的数据
properties 语法结构
Component({
properties: {
// 完整的定义方式
propA: { // 属性名
type: String, // 属性类型
value: '' // 属性默认值
},
propB: String // 简化的定义方式
}
})
注意：type 的可选值为 Number，String、Boolean、Object、Array、null(表示不限制类型)
为组件传递 properties 的值
使用数据绑定的形式，向子组件的属性传递动态数据
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
</component-tag-name>
</view>
注意：
- 在定义 properties 时，属性名采用驼峰写法（propertyName）；
- 在 wxml 中，指定属性值时，则对应使用连字符写法（property-name=“attr value”），
- 应用于数据绑定时，采用驼峰写法（attr="{{propertyName}}"）。
在组件内修改 properties 的值
properties 的值是可读可写的，可以通过
setData修改properties中任何属性的值，
properties: {
count: Number
},
methods: {
add: function () {
this.setData({ count: this.properties.count + 1 })
} }
数据监听器
数据监听器可以用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。作用类似于 vue 中的watch。
数据监听器从小程序基础库版本 2.6.1 开始支持。
数据监听器的基本语法格式如下：
observers: {
'propPrice, num': function (newPropPrice, newNum) {
console.log(newPropPrice)
console.log(newNum)
}
}
案例1：监控某个子数据的代码
// 监控某个子数据的代码
Component({
observers: {
'some.subfield': function (subfield) {
// 使用 setData 设置 this.data.some.subfield 时触发
// （除此以外，使用 setData 设置 this.data.some 也会触发）
},
'arr[12]': function (arr12) {
// 使用 setData 设置 this.data.arr[12] 时触发
// （除此以外，使用 setData 设置 this.data.arr 也会触发）
}
}
})
案例2： 使用通配符 ** 监听所有子数据字段的变化
Component({
observers: {
'some.field.**': function (field) {
// 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
// （除此以外，使用 setData 设置 this.data.some 也会触发）
field === this.data.some.field
}
}
})
组件的生命周期
组件的主要生命周期
组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
- 最重要的生命周期是
created,attached,detached，包含一个组件实例生命流程的最主要时间点。- 组件实例刚刚被创建好时，
created生命周期被触发。此时还不能调用setData。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。 - 在组件完全初始化完毕、进入页面节点树后，
attached生命周期被触发。此时，this.data已被初始化完毕。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。 - 在组件离开页面节点树后，
detached生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则detached会被触发。
- 组件实例刚刚被创建好时，
组件可用的全部生命周期函数
定义生命周期函数
- 生命周期方法可以直接定义在 Component 构造器的第一级参数中。
- 自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。
Component({
lifetimes: {
attached() {}, // 在组件实例进入页面节点树时执行
detached() {}, // 在组件实例被从页面节点树移除时执行
},
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
attached() {}, // 在组件实例进入页面节点树时执行
detached() {}, // 在组件实例被从页面节点树移除时执行
// ...
})
组件所在页面的生命周期
有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称
为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：
Component({
pageLifetimes: {
show() { // 页面被展示
},
hide() { // 页面被隐藏
},
resize(size) { // 页面尺寸变化
}
}
})
组件插槽
默认插槽
001 - 默认插槽
在组件的
wxml中可以包含slot节点，用于承载组件使用者提供的wxml结构。
- 默认情况下，一个组件的
wxml中只能有一个slot。需要使用多slot时，可以在组件js中声明启用。 - 注意：小程序中目前只有默认插槽和多个插槽，暂不支持作用域插槽。
- 案例代码:
1.组件模板
// 组件模板
<view>
<view>我是组件</view>
<slot></slot>
</view>
- 引用组件的页面模板
// 引用组件的页面模板
<second-com>
<view>你好，我是引用组件</view>
</second-com>
多个插槽
在组件中，需要使用多 slot 时，可以在组件 js 中声明启用。示例代码如下:
Component({
options: {
multipleSlots: true
},
})
可以在组件的 wxml 中使用多个 slot 标签，以不同的 name 来区分不同的插槽。示例代码如下：
<view>~~~~~~~~~~~~~~~~</view>
<slot name="before"/>
<view>~~~~~~~~~~~~~~~~</view>
<slot name="after"/>
使用时，用 slot 属性来将节点插入到不同的 slot 中。示例代码如下：
<!-- 引用组件的页面模板 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</component-tag-name>
</view>
组件间的通信
- 组件之间的三种基本通信方式
-
WXML数据绑定：用于父组件向子组件的指定属性传递数据，仅能设置JSON兼容数据 - 事件：用于子组件向父组件传递数据，可以传递任意数据。
- 父组件通过
this.selectComponent方法获取子组件实例对象，便可以直接访问组件的任意数据和方法。
this.selectComponent(string)
<!-- wxml -->
<component-a class="customA" id= "cA" ></component-a>
<!--父组件的 .js 文件中，可以调用 selectComponent 函数并指定 id 或 class 选择器，获取子组件对象-->
Page({
onLoad(){
// 切记下面参数不能传递标签选择器（component-a），不然返回的是 null
var component = this.selectComponent('.customA'); // 也可以传递 id 选择器 #cA
console.log(component);
}
})
通过事件监听实现子向父传值
事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。
通过事件监听实现子组件向父组件传值的步骤：
① 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
② 在父组件的 wxml 中，通过自定义事件的形式，将步骤一中定义的函数引用，传递给子组件
③ 在子组件的 js 中，通过调用 this.triggerEvent('自定义事件名称', { /* 参数对象 */ }) ，将数据发送到父组件
④ 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据
