微信小程序head组件的封装与使用

简介: 微信小程序的head是可以进行默认配置head或者自定义封装head组件的,本文将从这两个方面开始进行使用讲解。

微信小程序head组件的封装与使用

微信小程序的head是可以进行默认配置head或者自定义封装head组件的,本文将从这两个方面开始进行使用讲解。

默认的head配置方式

微信小程序的head一般是开发者通过在app.json来设置统一的样式,又或者在每个页面的json中对对应的页面进行设置

全局页面配置

我们可以在app.json中进行系统默认的全局head配置

"window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#35d492",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
},
复制代码
  • navigationBarBackgroundColor:设置的head背景颜色
  • navigationBarTitleText:设置的默认head文字内容
  • navigationBarTextStyle:head文字内容颜色

更多配置请参考官方文档:页面配置 | 微信开放文档 (qq.com)

单页面配置

除此之外,在使用默认配置head的情况下,我们可以在想要自定义head内容的页面对应的json文字中进行配置,比如我想更改个人设置页面head文本内容,即在person.json中进行如下配置即可,其他相关设置默认为app.json中的配置。

{
  "usingComponents": {},
  "navigationBarTitleText": "个人"
}
复制代码

自定义封装head组件

首先,我们要进行自定义封装的目的是什么?

  1. 页面head部分包含特定的功能,比如说:搜索框,地理位置等。
  2. 应用中需要换肤功能,需要根据设置来更改head的背景颜色。

1.webp.jpg

比如说美团小程序这里的head就为封装的head组件,包含了地理位置的功能,接下来开始封装属于我们的head

获取系统的head高度

因为不同机型的顶部高度不同,所以我们必要根据不同的机型设置不同的head高度

我们需要在app.js即小程序的入口文件中调用wx.getSystemInfo来获取用户的机型信息还有wx.getMenuButtonBoundingClientRect()获取菜单按钮(右上角胶囊按钮)的布局位置信息,官方文档api介绍:wx.getSystemInfowx.getMenuButtonBoundingClientRect()

wx.getSystemInfo({
            success: (res) => {
                let capsule = wx.getMenuButtonBoundingClientRect();
                var statusBarHeight = res.statusBarHeight; //顶部状态栏高度
                this.globalData.capsule = capsule;
                this.globalData.titleHeight = statusBarHeight + capsule.height + (capsule.top - statusBarHeight) * 2;
            },
        })
复制代码

关于这个顶部高度计算公式,我通过如下图所示分层介绍一下

1.webp.jpg

res.statusBarHeight为通过api获取的状态栏高度

capsule是记录胶囊信息的变量对象,其top属性值为以手机左上角为坐标原点,胶囊的距离x轴的长度

所以整体的高度大小为:状态栏高度+胶囊高度+2(胶囊距顶高度-状态栏高度)* ,胶囊距顶高度-状态栏高度为蓝色线与白色线之间得间距,最后即得statusBarHeight + capsuleObj.height + (capsuleObj.top - statusBarHeight) * 2

封装组件

封装头部组件的方式和其他组件相同,在components目录下新建组件

获取高度

首先我们需要在attached生命周期中通过获取全局变量得方式拿到我们所需要的胶囊信息与高度信息,并响应式地设置值

attached: function() {
        const app = getApp() 
        this.setData({
            titleHeight: app.globalData.titleHeight,
            capsule: app.globalData.capsule
        })
},
复制代码

配置组件属性

为了可以让头部组件更加自由,我们需要在组件属性列表中配置

properties: {
        customTitle: String,
        backgroundColor: {
            type: String,
            value: ''
        },
        location: {
            type: Boolean,
            value: false
        },
        back: {
            type: Boolean,
            value: false
        },
    },
复制代码

这里我配置了三个属性,即背景颜色,定位信息图标,返回按钮,根据不同的功能设置值得类型即可,比如背景颜色这里为字符串类型,其他为布尔型

配置组件功能

一般来说基础head的基本功能就是返回上一个页面,封装一个back方法调用wx.navigateBack即可,其他方法可以根据需求增加

methods: {
        back: function() {
            wx.navigateBack({
                delta: 1
            })
        },
    }
复制代码

组件自适应高度

我们在第一步的时候就拿到了高度的信息,所以我们之间可以为dom元素添加行内样式即可

<wxml style="height:{{titleHeight}}px; background-color:{{backgroundColor}};"></wxml>
复制代码

完整demo

具体组件封装demo可以去开源仓库查看:hogB/hoewo (github.com)欢迎star。

使用组件

引入组件

首先需要在需要使用组件的页面json文件中进行组件的引入

"usingComponents": {
    "Header": "/components/headBar/headBar",
  },
复制代码

取消默认head

在页面的json文件中取消默认head的配置,如下

"navigationStyle": "custom"
复制代码

最后一步

最后一步直接使用即可,相关属性根据自己的配置来设置。

<Header location customTitle="首页"></Header>
复制代码

总结

其实封装head组件的核心在于:通过适配机型计算相应高度,只有拿到不同机型的高度才能完美得去展现自定义的head。


相关文章
|
2月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
59 0
在线课堂+工具组件小程序uniapp移动端源码
|
3月前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
98 1
微信小程序:轻松实现时间轴组件
|
3月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
778 1
|
3月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
105 0
微信小程序:自定义关注公众号组件样式
|
3月前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
112 1
|
3月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
866 7
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
867 1
|
3月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
213 7
ly~
|
4月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
99 6
|
3月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
294 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等