小程序开发 组件定义(封装)、组件调用、父子组件方法调用、父子组件传值通讯

在小程序开发中,为了提高代码效率,和代码使用率,我们也用到了组件封装,

今天我介绍下如何在小程序中封装一个头部公用组件

首先,所有父组件(调用页面)的json文件都要引用子组件:index.json

{
  "usingComponents": {
    "header": "../../component/header/header",
  }
}

一,组件定义(封装)

子组件:header.wxml

<view  name=‘header‘ class="header" id=‘header‘>
    <text>{{userInfo.nickName}}</text>
    <view class=‘icon-box-r‘><image class=‘icon-img‘ src=‘{{userInfo.avatarUrl}}‘></image></view>
</view >

子组件:header.js

// component/header/header.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    userInfo:[
        {nickName:‘username‘,avatarUrl:‘userImg.jpg‘}
    ],
  },

  /**
   * 组件的方法列表
   */
  methods: {

  },

})

在父组件(调用页面)使用我们封装好的组件:index.wxml

<view class=‘header-box‘>
  <header></header>
</view>

———————————————————————————————————————————————————————————————————————————————————————————————————————————————————

二,父组件(调用页面)向子组件传值通讯

父组件(调用页面):index.wxml

<view class=‘header-box‘>
  <header userInfoName="{{userInfo.nickName}}" userInfoImg="{{userInfo.avatarUrl}}" ></header>
</view>

父组件(调用页面):index.js

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
     userInfo:[
        {nickName:‘username‘,avatarUrl:‘userImg.jpg‘}
     ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

})

子组件:header.wxml

<view  name=‘header‘ class="header" id=‘header‘>
    <text>{{userInfo.nickName}}</text>
    <view class=‘icon-box-r‘><image class=‘icon-img‘ src=‘{{userInfo.avatarUrl}}‘></image></view>
</view >

子组件:header.js

// component/header/header.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
     userInfoName: {
       type: String
     },
     userInfoImg: {
       type: String
     }
  },

  /**
   * 组件的初始数据
   */
  data: {
    userInfo:[
        {nickName:‘username‘,avatarUrl:‘userImg.jpg‘} //若父组件无值传来,此处值可作默认值
    ],
  },

  /**
   * 组件的方法列表
   */
  methods: {

  },

})

———————————————————————————————————————————————————————————————————————————————————————————————————————————————————

二,子组件向父组件(调用页面)传值通讯

子组件向父组件传值会有2种情况

1,手动触发传值

2,自动触发传值

先来说第一种:手动触发

子组件:header.wxml

<view  name=‘header‘ class="header" id=‘header‘>
    <text>{{userInfo.nickName}}</text>
    <view class=‘icon-box-r‘ ><image class=‘icon-img‘ src=‘{{userInfo.avatarUrl}}‘></image></view>
</view >

我们这动手动触发是在父组件点击头部组件来触事件,我们还可以稍微改动下,在子组件中添加方法就可以同时触发父组件的触发方法

【在子组件有表单的时候,该方法就很明显,如果在父组件中的子组件引用区域填写表单就可以触发表单验证】

// component/header/header.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    userInfo:[],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    getCode:function(e){
        //处理逻辑。。。。
        this.userInfo(e)  //一定传参数  e
    },
    userInfo:function(){
      var that = this;
      var that = this;
      var val = e.detail.value == undefined ? that.data.codes : e.detail.value;
      var userInfo = wx.getStorageSync(‘userInfo‘); //获取本地缓存中的用户信息
      var myUserInfo = {
         val: userInfo,
         nickNameTo:val
       }
       this.triggerEvent(‘userInfo‘, myUserInfo);

      if (userInfo) {
        this.setData({ userInfo: userInfo, })
      } else {
        wx.redirectTo({ url: ‘../../pages/menu/menu‘ })
      }

      // console.log("userInfo-----///---->", userInfo);
    },

  },

})

<view  name=‘header‘ class="header" id=‘header‘>
    <text>{{userInfo.nickName}}</text>
    <view class=‘icon-box-r‘ ><image class=‘icon-img‘ src=‘{{userInfo.avatarUrl}}‘></image></view>
    <view class="section">
      <view class="section__title">你输入的用户名是:{{userInfo.nickName}}</view>
      <input bindinput="bindKeyInput" placeholder="输入同步到父组件中" />
    </view>
</view >

<view class=‘header-box‘>
  <header id="header" bind:userInfo="onUserInfo"></header>
</view>
<text>{{userInfo.nickName}}</text>
<view class=‘icon-box-r‘><image class=‘icon-img‘ src=‘{{userInfo.avatarUrl}}‘></image></view>
<text>{{userInfo.nickNameTo}}</text>

子组件:header.js

// component/header/header.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    userInfo:[],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    userInfo:function(){
      var that = this;
      var userInfo = wx.getStorageSync(‘userInfo‘); //获取本地缓存中的用户信息
      var myUserInfo = {
         val: userInfo
       }
       this.triggerEvent(‘userInfo‘, myUserInfo);

      if (userInfo) {
        this.setData({ userInfo: userInfo, })
      } else {
        wx.redirectTo({ url: ‘../../pages/menu/menu‘ })
      }

      // console.log("userInfo-----///---->", userInfo);
    },

  },

})

父组件(调用页面):index.wxml

<view class=‘header-box‘>
  <header id="header" bind:userInfo="onUserInfo"></header>
</view>
<text>{{userInfo.nickName}}</text>
<view class=‘icon-box-r‘><image class=‘icon-img‘ src=‘{{userInfo.avatarUrl}}‘></image></view>

父组件(调用页面):index.js

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
     userInfo:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  onUserInfo: function (e) {
    this.setData({
      userInfo:e.detail.myUserInfo   //赋值到父组件的data集合
    })
  },

})

第二种自动触发

先来说第一种:自动触发

子组件:header.wxml

<view  name=‘header‘ class="header" id=‘header‘>
    <text>{{userInfo.nickName}}</text>
    <view class=‘icon-box-r‘ ><image class=‘icon-img‘ src=‘{{userInfo.avatarUrl}}‘></image></view>
</view >

子组件:header.js

// component/header/header.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    userInfo:[],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    userInfo:function(){
      var that = this;
      var userInfo = wx.getStorageSync(‘userInfo‘); //获取本地缓存中的用户信息 

      if (userInfo) {
        this.setData({ userInfo: userInfo, })
      } else {
        wx.redirectTo({ url: ‘../../pages/menu/menu‘ })
      }
      return userInfo;
      // console.log("userInfo-----///---->", userInfo);
    },

  },

})

父组件(调用页面):index.wxml

<view class=‘header‘>
  <header id="header"></header>
</view>
<text>{{userInfo.nickName}}</text>
<view class=‘icon-box-r‘><image class=‘icon-img‘ src=‘{{userInfo.avatarUrl}}‘></image></view>

父组件(调用页面):index.js

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
     userInfo:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    var that = this;
    var userInfo = this.selectComponent("#header").userInfo(); //调用头部组件用户状态

    if (userInfo){
      this.setData({ userInfo:userInfo })
    }
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

})

原文地址:https://www.cnblogs.com/zhixi/p/10298053.html

时间: 2024-09-29 03:28:45

小程序开发 组件定义(封装)、组件调用、父子组件方法调用、父子组件传值通讯的相关文章

微信小程序开发——使用promise封装异步请求

前言: 有在学vue的网友问如何封装网络请求,这里以正在写的小程序为例,做一个小程序的请求封装. 关于小程序发起 HTTPS 网络请求的Api,详情可以参考官方文档:wx.request(Object object). 如果直接使用官方提供的个Api,那么每次在进行网络请求调用时,我们都要按官方文档上说的那样传递需要设置的请求参数,然后对不同的请求相应结果做不同的处理.但是前端同服务器端的接口请求中有大部分的请求参数以及响应结果处理都是很类似的,也就没有必要对所有请求代码都重新敲敲一遍,那么对原

微信小程序开发如何获取定位信息

当我们在使用微信小程序时,会弹出一个获取你的定位信息.那么这个功能是怎样实现的,下面木鱼小铺(https://www.muyu007.cn)就和大家科普一下微信小程序开发如何获取定位信息? 我们一般通过调用wx.getLocation()获取当前的地理位置,为了能够获得准确的定位信息,我们还需要借助第三方地图服务API来实现.比如腾讯地图或百度地图. 下面我们就以借助腾讯地图为例,看看如何获取定位信息. 第一步:你需要去腾讯地图平台上注册一个账号,在管理后台中创建密钥. 第二步:登录进入有一个界

手摸手教你微信小程序开发之自定义组件

前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现呢.可能你会去看官方文档,但是微信的官方文档也是说的不太清楚,所以写起来也是非常痛苦.今天就带大家手摸手开发微信组件,坐稳了,马路杀手要开车了. 具体实现 我们先实现个简单的弹窗组件,详情图如下: 1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,

微信小程序开发05-日历组件的实现

接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是相对复杂的组件了,然后一般的日历组件又会有很多的变化,所以我们这里实现最基本的标签即可: 1 let View = require('behavior-view'); 2 const util = require('../utils/util.js'); 3 4 // const dateUtil

微信小程序开发-地图map组件上使用input组件

微信小程序开发-地图map组件上使用input组件 标签: 微信小程序 uni-app 原生组件层级关系 微信小程序在最高层级 在微信小程序中原生组件包括camera canvas input(仅在focus时表现为原生组件) live-player live-pusher map textarea video 在微信小程序开发中原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 后插入的原生组件可以覆盖之前的原生组件. 原生组件还无法在 pic

微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理

前言: 小程序开发中诸如获取用户手机号码.调起微信支付.领取卡券等api都是会有一定的延迟的.也就是说通过点击按钮调用这些api的时候,从点击按钮调用api,到支付页面或者领取卡券界面展示出来是需要一定时间的,连续点击按钮,还是有可能会重复调用的. 虽然这种情况有点极端,正常用户是不会这么连续快速的点击按钮的,但是也不能排除有用户手抖,连续点了两下.如果重复调用的话,不仅体验不好,单击事件中涉及到后端接口操作的也可能引起其他异常.所以这个问题还是要处理下的. 刚开始想到的是使用loading开启

微信小程序开发入门与实践

基础知识---- MINA 框架 为方便微信小程序开发,微信为小程序提供了 MINA 框架,这套框架集成了大量的原生组件以及 API.通过这套框架,我们可以方便快捷的完成相关的小程序开发工作. MINA 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,因此我们主要聚焦于数据与逻辑上. 响应的数据绑定 框架的核心是一个响应的数据绑定系统. 整个系统分为两块:视图层(View)和逻辑层(App Ser

武装你的小程序——开发流程指南

前端工程本质上是软件工程的一种.软件工程化关注的是性能.稳定性.可用性.可维护性等方面,注重基本的开发效率.运行效率的同时,思考维护效率.一切以这些为目标的工作都是"前端工程化".工程化是一种思想而不是某种技术. 本篇文章你可以学到: 如何使小程序支持scss: 怎样通过gulp编译你的项目: 项目常用的模块封装: 小程序同webview之间如何优雅的进行交互: 集中式管理你的项目提高可维护性: 提升开发效率的小工具编写: 全文全部基于原生的小程序开发所阐述,各种第三方框架开发不在此列

小程序开发另类小技巧 --用户授权篇

本文主要帮助大家解决部分功能接口二次授权+统一管理(包含对于wx对象的扩展)问题,例如获取地理位置信息,收获地址,录音等授权问题 小程序开发另类小技巧 --用户授权篇 getUserInfo较为特殊,不包含在本文范围内,主要针对需要授权的功能性api,例如:wx.startRecord,wx.saveImageToPhotosAlbum, wx.getLocation 原文地址:https://www.yuque.com/jinxuanzheng/gvhmm5/arexcn 仓库地址:https