05微信小程序-视图与逻辑3

页面导航

页面导航就是页面之间的跳转，小程序中页面之间的导航有两种方式：
① 声明式导航：通过点击 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() 方法，

• 1. 发起 get 请求:

getData: function () {
  wx.request({
    url: 'xxxx',
    method: 'get',
    success: function (res) {
      console.log(res)
    }
  })
},

• 2. 发起 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 会被触发。

组件可用的全部生命周期函数

image.png

定义生命周期函数

• 生命周期方法可以直接定义在 Component 构造器的第一级参数中。
• 自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。

Component({
 lifetimes: {
 attached() {}, // 在组件实例进入页面节点树时执行
 detached() {}, // 在组件实例被从页面节点树移除时执行
 },
 // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
 attached() {}, // 在组件实例进入页面节点树时执行
 detached() {}, // 在组件实例被从页面节点树移除时执行
 // ...
})

组件所在页面的生命周期

有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称
为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：

image.png

Component({
 pageLifetimes: {
 show() { // 页面被展示
 },
 hide() { // 页面被隐藏
 },
 resize(size) { // 页面尺寸变化
 }
 }
})

组件插槽

默认插槽

001 - 默认插槽

在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构。

• 默认情况下，一个组件的 wxml 中只能有一个 slot。需要使用多 slot 时，可以在组件 js 中声明启用。
• 注意：小程序中目前只有默认插槽和多个插槽，暂不支持作用域插槽。
• 案例代码:
  1.组件模板

// 组件模板

<view>
  <view>我是组件</view>
  <slot></slot>
</view>

2. 引用组件的页面模板

// 引用组件的页面模板

<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>

组件间的通信

• 1. 组件之间的三种基本通信方式
• 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 获取到子组件传递过来的数据