微信小程序：04-声明式导航、编程式导航、导航传参、网络数据请求、组件的创建与引用、组件的样式、组件

发表时间：2020-10-19

发布人：葵宇科技

浏览次数：133

文章目录

- - - 小程序基础第四天
    - - 一、小程序导航 -- 声明式导航
      - 001 - 导航到非 `tabBar` 页面
        002 - 导航到 `tabBar` 页面
        003 - 后退导航
      - 二、小程序导航 -- 编程式导航
      - 001 - 导航到非 `tabBar` 页面
        002 - 导航到 `tabBar` 页面
        003 - 后退导航
      - 三、小程序导航 -- 导航传参
      - 001 - 声明式导航传参
        002 - 编程式导航传参
        003 - 接受传递的参数
        004 - 导航栏自定义编译模式快速传参
      - 四、网络数据请求
      - 001 - 小程序后台配置
        002 - 跳过域名校验
        003 - 小程序发送 get 与 Post 请求
        004 - 小程序中没有跨域限制
      - 五、小程序组件 -- 创建与引用
      - 001 - 组件的创建
        002 - 组件的引用
      - 六、小程序组件 -- 组件的样式
      - 七、小程序组件 -- 数据与方法
      - 001 - 使用 data 定义组件的私有数据
        002 - 使用 methods 定义组件的事件处理函数
      - 八、小程序组件 -- properties
      - 001 - properties 简介
        002 - properties 语法结构
        003 - 向组件传递 properties 的值
        004 - 案例代码
        005 - 组件内修改 properties
      - 九、小程序组件 -- 数据监听器
      - 001 - 基本使用方法
        002 - 监听子数据字段语法
      - 十、组件的生命周期
      - 十一、小程序插槽的使用
      - 001 - 默认插槽
        002 - 多个插槽
      - 十二、组件间的通信
      - 001 - 组件之间的三种基本通信方式
        002 - `this.selectComponent` 使用
        003 - 通过事件监听实现子向父传值

小程序基础第四天

一、小程序导航 – 声明式导航

001 - 导航到非 `tabBar` 页面

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

案例代码：

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

注意事项
- url 属性设置需要跳转的路径
- 页面路径应该以 / 开头，
- 路径必须提前在 app.json 的 pages 节点下声明

002 - 导航到 `tabBar` 页面

navigator组件单纯使用 url 属性，无法导航到 tabBar 页面，必须需要结合 open-type 属性进行导航。

案例代码

<navigator url="/pages/person/person" open-type="switchTab">跳转到 tabBar 页面</navigator>

003 - 后退导航

小程序如果要后退到上一页面或多级页面，需要把 open-type 设置为 navigateBack，同时使用 delta 属性指定后退的层数

案例代码

<navigator open-type='navigateBack' delta='1'> 返回上一页 </navigator>

<navigator open-type='navigateBack' delta='2'> 返回上上一页 </navigator>

二、小程序导航 – 编程式导航

001 - 导航到非 `tabBar` 页面

通过 wx.navigateTo(Object object) 方法，可以跳转到应用内的某个页面。

但是不能跳到 tabbar 页面。

参数文档
- wx.navigateTo 详细文档
代码案例

// 跳转到非导航页面
handle: function () {
  wx.navigateTo({
    url: '/pages/about/about',
    success: function () {
      console.log('Hello about')
    }
  })
},

002 - 导航到 `tabBar` 页面

通过 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面，

并关闭其他所有非 tabBar 页面

参数文档
- wx.switchTab 详细文档
案例代码

// 跳转到 tabBar 页面
tabBarHandle: function () {
  wx.switchTab({
    url: '/pages/person/person',
    success: function() {
      console.log('Hello Person')
    }
  })
},

003 - 后退导航

通过 wx.navigateBack(Object object)方法，关闭当前页面，返回上一页面或多级页面。

参数文档
- wx.navigateBack 详细文档
案例代码

handle: function () {
  wx.navigateBack({
    delta: 1
  })
},

twoHandle: function () {
  wx.navigateBack({
    delta: 2
  })
},

三、小程序导航 – 导航传参

001 - 声明式导航传参

navigator 组件的 url 属性用来指定导航到的页面路径，同时路径后面还可以携带参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔。

案例代码

<navigator url="/pages/about/about?age=18&name=shuji">跳转到 about 页面</navigator>

002 - 编程式导航传参

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

003 - 接受传递的参数

不论是声明式导航还是编程式导航，最终导航到的页面可以在 onLoad 生命周期函数中接收传递过来的参数。

案例代码

 >: function (options) {
    // 打印传递出来的参数
    console.log(options)
  },

004 - 导航栏自定义编译模式快速传参

小程序每次修改代码并编译后，会默认从首页进入，但是在开发阶段，我们经常会针对特定的页面进行开发，为了方便编译后直接进入对应的页面，可以配置自定义编译模式，步骤如下：
- 单击工具栏上的“普通编译”下拉菜单
- 单击下拉菜单中的“添加编译模式”选项
- 在弹出的“自定义编译条件窗口”，按需添加模式名称、启用页面、启动参数、进入场景等。

在这里插入图片描述

四、网络数据请求

001 - 小程序后台配置

每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名进行网络通信。
服务器域名请在「小程序后台-开发-开发设置-服务器域名」中进行配置，配置时需要注意：
- 域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 协议
- 域名不能使用 IP 地址或 localhost
- 域名必须经过 ICP 备案
- 服务器域名一个月内可申请5次修改

注意：网络配置详情

002 - 跳过域名校验

在微信开发者工具中，可以临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过服务器域名的校验。此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验。

注意：在服务器域名配置成功后，建议开发者关闭此选项进行开发，并在各平台下进行测试，以确认服务器域名配置正确。

注意：网络配置详情

003 - 小程序发送 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 详细文档说明

004 - 小程序中没有跨域限制

在普通网站开发中，由于浏览器的同源策略限制，存在数据的跨域请求问题，从而衍生出了 JSONP 和 CORS 两种主流的跨域问题解决方案。
注意：小程序的内部运行机制与网页不同，小程序中的代码并不运行在浏览器中，因此小程序开发中，不存在数据的跨域请求限制问题

五、小程序组件 – 创建与引用

组件创建详细文档

001 - 组件的创建

在项目的根目录中，鼠标右键，创建 components 文件夹 --> test
在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”
为新建的组件命名之后，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss

注意：应当尽量将不同的组件，存放到单独的文件夹中，从而保证清晰的目录结构

002 - 组件的引用

在需要引用组件的页面中，找到页面的 .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 中的样式、组件所在页面的样式对自定义组件无效。

注意：以上语法不推荐死记硬背，建议使用 class 选择器

七、小程序组件 – 数据与方法

组件详细的参数含义和使用

001 - 使用 data 定义组件的私有数据

小程序组件中的 data与小程序页面中的 data 用法一致，区别是：
- 页面的 data 定义在 Page() 函数中
- 组件的 data 定义在 Component() 函数中
在组件的 .js 文件中：
- 如果要访问 data 中的数据，直接使用 this.data.数据名称 即可
- 如果要为 data 中的数据重新赋值，调用 this.setData({ 数据名称: 新值 }) 即可
在组件的 .wxml 文件中
- 如果要渲染 data 中的数据，直接使用 {{ 数据名称 }} 即可

002 - 使用 methods 定义组件的事件处理函数

组件间通信与事件详细文档

和页面不同，组件的事件处理函数，必须定义在 methods 节点中

methods: {
  handle: function () {
    console.log('组件的方法要定义在 methods 中')

    this.setData({
      num: this.data.num + 1
    })

    console.log(this.data.num)
  }
}

八、小程序组件 – properties

001 - properties 简介

组件的对外属性，用来接收外界传递到组件中的数据。类似于 Vue 中的 props

组件的 properties 和 data 的用法类似，它们都是可读可写的，只不过：
- data 更倾向于存储组件的私有数据
- properties 更倾向于存储外界传递到组件中的数据

002 - properties 语法结构

properties: {
  a: {				// 属性名
    type: String,	// 属性的数据类型
    value: ''		// 默认值
  }
}

注意：type 的可选值为 Number，String、Boolean、Object、Array、null(表示不限制类型)

003 - 向组件传递 properties 的值

使用数据绑定的形式，向子组件的属性传递动态数据

<second-com prop-price="{{ priceData }}"></second-com>

注意：

在定义 properties 时，属性名采用驼峰写法（propertyName）；
在 wxml 中，指定属性值时，则对应使用连字符写法（property-name=“attr value”），
应用于数据绑定时，采用驼峰写法（attr="{{propertyName}}"）。

004 - 案例代码

// 组件 com02.js

properties: {
  propPrice: {
    type: Number,
    value: 1
  }
},

<!-- 引用组件的页面 -->

<second-com prop-price="{{ priceData }}"></second-com>

<!-- 组件 com02.html -->

<view>{{ propPrice }}</view>

005 - 组件内修改 properties

properties 的值是可读可写的，可以通过 setData 修改 properties 中任何属性的值，

案例代码

methods: {
  handle: function () {
    this.setData({
      propPrice: this.properties.propPrice + 1
    })

    console.log(this.properties.propPrice)
  }
}

九、小程序组件 – 数据监听器

001 - 基本使用方法

数据监听器可以用于监听和响应任何属性和数据字段的变化，从而执行特定的操作

数据监听详细文档

observers: {
  'propPrice, num': function (newPropPrice, newNum) {
    console.log(newPropPrice)
    console.log(newNum)
  }
},

002 - 监听子数据字段语法

案例代码

// 监控某个子数据的代码
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 也会触发）
    }
  }
})

// 使用通配符 ** 监听所有子数据字段的变化
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 会被触发。

其他：组件生命周期详解

十一、小程序插槽的使用

001 - 默认插槽

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

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

// 组件模板

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

// 引用组件的页面模板

<second-com>
  <view>你好，我是引用组件</view>
</second-com>

002 - 多个插槽

在组件中，需要使用多 slot 时，可以在组件 js 中声明启用。
- 案例代码

Component({

  options: {
    multipleSlots: true
  },
    
})

在组件的 wxml 中使用多个 slot 标签，以不同的 name 来区分不同的插槽
- 案例代码

// 引用组件的页面模板

<second-com prop-price="{{ priceData }}">
  <view slot="name">你好，这是 name 插槽 </view>
  <view slot="age">你好，这是 age 插槽</view>
</second-com>

使用多个插槽

// 组件插槽

<view>
  <view>我是组件</view>
  <slot name="name"></slot>
  <slot name="age"></slot>
</view>

十二、组件间的通信

001 - 组件之间的三种基本通信方式

WXML 数据绑定：用于父组件向子组件的指定属性传递数据，仅能设置 JSON 兼容数据
事件：用于子组件向父组件传递数据，可以传递任意数据。
父组件通过 this.selectComponent 方法获取子组件实例对象，便可以直接访问组件的任意数据和方法。

002 - `this.selectComponent` 使用

父组件的 .js 文件中，可以调用 this.selectComponent(string) 函数并指定 id 或 class 选择器，获取子组件对象调用，可以返回指定组件的实例对象

案例代码

// 使用组件的页面模板

<second-com class="second" id="second" prop-price="{{ priceData }}">
  <view slot="name">你好，这是 name 插槽 </view>
  <view slot="age">你好，这是 age 插槽</view>
</second-com>

// 使用组件的 .js 文件，使用方法触发

changeData: function () {
  // console.log(this.selectComponent('#second'))
    
  console.log(this.selectComponent('.second'))
},

注意事项
- 不能传递标签选择器（component-a），不然返回的是 null

003 - 通过事件监听实现子向父传值

事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。

实现步骤
- 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
- 在父组件的 wxml 中，通过自定义事件的形式，将步骤一中定义的函数引用，传递给子组件
- 在子组件的 js 中，通过调用 this.triggerEvent('自定义事件名称', { /* 参数对象 */ }) ，将数据发送到父组件
- 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据
案例代码

// 使用组件的页面模板自定义 myEvent 事件,接收 getCount 方法

<second-com bind:myEvent="getCount" class="second" id="second" prop-price="{{ priceData }}">
  <view slot="name">你好，这是 name 插槽 </view>
  <view slot="age">你好，这是 age 插槽</view>
</secondcom>

// 使用组件页面 js，生命 getCount 方法

getCount: function (e) {
  console.log(e.detail)
},

// 组件页面

this.triggerEvent('myEvent', {
  count: this.data.num
})

微信小程序：04-声明式导航、编程式导航、导航传参、网络数据请求、组件的创建与引用、组件的样式、组件 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

微信小程序：04-声明式导航、编程式导航、导航传参、网络数据请求、组件的创建与引用、组件的样式、组件

文章目录

小程序基础 第四天

一、小程序导航 – 声明式导航

001 - 导航到非 tabBar 页面

002 - 导航到 tabBar 页面

003 - 后退导航

二、小程序导航 – 编程式导航

001 - 导航到非 tabBar 页面

002 - 导航到 tabBar 页面

003 - 后退导航

三、小程序导航 – 导航传参

001 - 声明式导航传参

002 - 编程式导航传参

003 - 接受传递的参数

004 - 导航栏自定义编译模式快速传参

四、网络数据请求

001 - 小程序后台配置

002 - 跳过域名校验

003 - 小程序发送 get 与 Post 请求

004 - 小程序中没有跨域限制

五、小程序组件 – 创建与引用

001 - 组件的创建

002 - 组件的引用

六、小程序组件 – 组件的样式

七、小程序组件 – 数据与方法

001 - 使用 data 定义组件的私有数据

002 - 使用 methods 定义组件的事件处理函数

八、小程序组件 – properties

001 - properties 简介

002 - properties 语法结构

003 - 向组件传递 properties 的值

004 - 案例代码

005 - 组件内修改 properties

九、小程序组件 – 数据监听器

001 - 基本使用方法

002 - 监听子数据字段语法

十、组件的生命周期

十一、小程序插槽的使用

001 - 默认插槽

002 - 多个插槽

十二、 组件间的通信

001 - 组件之间的三种基本通信方式

002 - this.selectComponent 使用

003 - 通过事件监听实现子向父传值

相关案例查看更多

宝莱校尉-灵活用工平台

温泉山谷物业服务

云装网

中金泽报废车回收系统

君品居直销分红新零售商城

丽江旅游服务中心

迪欧供应链-综合电商平台app

云霸梯具

相关阅读

友情链接

小程序基础第四天

001 - 导航到非 `tabBar` 页面

002 - 导航到 `tabBar` 页面

001 - 导航到非 `tabBar` 页面

002 - 导航到 `tabBar` 页面

十二、组件间的通信

002 - `this.selectComponent` 使用