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

2021-01-13  本文已影响0人  东邪_黄药师

页面导航

页面导航就是页面之间的跳转，小程序中页面之间的导航有两种方式：
① 声明式导航：通过点击 navigator 组件实现页面跳转的方式；
② 编程式导航：通过调用小程序的 API 接口实现跳转的方式；

声明式导航

导航到非 tabBar 页面

非 tabBar 页面指的是没有被当作 tabBar 进行切换的页面。

<navigator url="/pages/about/about">跳转到 about 页面</navigator>

注意事项

导航到 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)
  },
导航栏自定义编译模式快速传参

小程序每次修改代码并编译后，会默认从首页进入，但是在开发阶段，我们经常会针对特定的页面进行开发，为了方便编译后直接进入对应的页面，可以配置自定义编译模式，步骤如下：

网络数据请求

配置服务器域名
跳过域名校验
小程序发送 get 与 Post 请求

小程序发送请求使用 wx.request() 方法，

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

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 详细文档说明

小程序中没有跨域限制

组件及组件之间的通讯

组件的创建
组件的引用
{
  "usingComponents": {
    "first-com": "../../component/com01/com01"
  }
}

注册组件名称时，建议把组件名称使用中横线进行连接，例如 vant-button 或 custom-button

使用样式美化组件

小程序组件样式 详细文档

使用 data 定义组件的私有数据
使用 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 的值

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

组件的生命周期

组件的主要生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

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

组件所在页面的生命周期

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


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

组件插槽

默认插槽
001 - 默认插槽

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

// 组件模板

<view>
  <view>我是组件</view>
  <slot></slot>
</view>
  1. 引用组件的页面模板
// 引用组件的页面模板

<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>
组件间的通信

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 获取到子组件传递过来的数据

上一篇下一篇

猜你喜欢

热点阅读