微信小程序之组件复用

最新推荐文章于 2025-02-22 21:51:28 发布

原创最新推荐文章于 2025-02-22 21:51:28 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #js #javascript

微信小程序同时被 3 个专栏收录

1 篇文章

订阅专栏

组件复用

1 篇文章

订阅专栏

自定义顶部导航

1 篇文章

订阅专栏

本文介绍了如何在微信小程序中实现自定义顶部导航栏，并通过自定义组件实现复用。首先，配置app.json以自定义导航栏。接着，创建自定义组件，包括nav.json、nav.js、nav.wxml和nav.wxss四个部分。最后，讲解如何在页面中注册并使用自定义组件，实现组件复用。

微信小程序之组件复用

最近又开始写微信小程序了。前段时间的微信小程序是用美团的框架mpvue写的。原因也很简单，同事们对vue的语法更熟悉一点，不需要重新了解小程序的语法。并且mpvue可以使用store管理全局状态，这正好是小程序所没有的。不过这次使用了微信小程序的原生语言，所以要用小程序的方式去解决一些问题

自定义顶部导航栏

写了几天小程序后，小程序已经有了一个基本的雏形。现在遇到了一个问题，就是，我需要一个自定义的顶部导航。之前用mpvue的时候也使用过自定义导航栏，但是基本上都是同事弄得，我直接捡了现成的，没有看怎么用。其次，自定义顶部导航应该也会涉及到组件复用，这刚好又是我的一个知识盲区。真的太兴奋了，一下子白捡两个知识点。
下面先来说一些自定义顶部导航栏吧：

使用自定义导航栏需要在 app.json 中做相关配置，配置也很简单：
app.json 是对小程序的整体规范做配置的文件。window字段则是对全局的默认窗口表现的一些设置。
将 navigationStyle 属性设置为 custom。navigationStyle
设置导航栏样式，仅支持两个值，default 和custom。

{
	"window":{
	    "navigationStyle": "custom"
	  },
}

设置navigationStyle为custom后，页面将去掉导航栏的位置。
在这里插入图片描述

自定义组件

到这里为止，自定义导航的设置已经做完了。下面我们开始自定义组件。
说到这里，小伙伴们可能已经蒙圈了，文章标题是要做组件复用，怎么现在扯到了自定义导航和自定义组件了呢。原因很简单，我们想要自定义导航，导航几乎在每个页面都会使用，所以肯定不能每个页面都写一遍，就需要将导航单独提出来当做一个组件，根据具体情况再不同的页面引用。所以这里面就包括了三个知识点：自定义组件、自定义导航、组件复用。

废话不多说，下面是自定义组件的方法：

pages目录同级，新建 components文件夹。因为后期可能会有很多个公共组件，所以我将导航组件的内容放到了nav文件夹下，下面是我的目录结构：
在这里插入图片描述
与page相同，.wxml是组件布局， .wxss是组件样式， .js是组件逻辑， .json用来声明当前文件是组件。

nav.json 声明这是一个组件：

{ "component": true }

nav.js 组件的逻辑部分

这里和vue定义组件的方式很像。
js文件最外层是 Component构造器，内部包含三部分内容： properties，接受组件外部传入的参数；data，组件内部自己使用的数据； methods ，定义组件内部的方法。

Component({
  // 接受外部传入的参数
  properties: {
    pageTitle: {
      type: String
    },
    navH: {
      type: Number,
      default: 0
    },
    pageLength: {
      type: Number,
      default: 0
    }
  },
  // 组件内部的数据
  data: {},
  // 组件的方法
  methods: {
    navBack () {
      wx.navigateBack()
    }
  }
})

nav.wxml 组件布局

<view class="nav-container" style='height:{{navH}}px;line-height:{{navH}}px'>
  <view class="left-icon">
    <image src='../../assets/images/nav/back_black.png' 
        mode='aspectFit' 
        class='back-img'
        wx:if="{{pageLength != 1}}"
        bindtap='navBack'>
    </image>
  </view>
  <view class="page-title">{{ pageTitle }}</view>
  <view class="space"></view>
</view>

nav.wxss 组件样式

.nav-container {
  width: 100vw;
  color: #333;
  font-size: 35rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.left-icon {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
}
.space {
  flex: 1;
}
.back-img {
  width: 60rpx;
  height: 60rpx;
}
.page-title {
  width: calc(100% - 200rpx);
  text-align: center;
  flex: 2;
}

到这里自定义组件就完成了。

组件复用

上面介绍了怎么实现一个自定义组件，现在我们来看一下怎么使用自定义组件。

在需要引入自定义组件的页面json文件中注册要使用的自定义组件

// index.json
{
  "usingComponents": {
    "custom-nav": "/components/nav/nav"
  },
}

在布局文件中使用组件：

<view class="container">
  <custom-nav pageTitle="{{pageTitle}}" navH="{{navH}}" pageLength="{{pageLength}}"></custom-nav>
</view>

js文件中定义需要的参数即可

//index.js
//获取应用实例
const app = getApp()
import request from '../../request/request'
Page({
  data: {
    navH: 0,
    pageTitle: '首页',
    pageLength: 0
  },
  onLoad: function () {
    this.setData({
      navH: app.globalData.navHeight
    })
  },
})

本次分享到此结束，如有错误还请各位大佬不吝赐教！谢谢大家

致谢

感谢提供支持的大佬。
[1]: https://www.cnblogs.com/jiangbeixiaoqiao/p/10826291.html
[2]:https://developers.weixin.qq.com/community/develop/doc/0006e8c236cd10d499b6217a351c09