uniapp 自定义头部支持微信、百度、头条小程序

在使用uniapp开发小程序的时候，由于公司要求开发微信、百度、头条、支付宝小程序，在这里先写了一个自定义头部（暂不支持支付宝，由于其他项目开始了，后面补上）

首先在components文件创建一个header.vue，在pages文件中去调用，import Header from '../../components/header.vue'，

首先在pages.json文件中设置

"pages": [ {"path": "pages/index/index","style": {"navigationBarTitleText": "","navigationStyle": "custom",  //必须设置成这个"navigationBarTextStyle": "white","backgroundColor": "#fff"}}],

header.vue的代码

<template><view class="header"><view class="headerRelative" :style="{height:headerBarHeight+'px',backgroundColor:hasBgc}"><view class="headerNav" :style="{height:navBarHeight+'px',top:statusHeight + 'px'}"><view class="left" @click='_goBack'><view class="iconfont icon-xiaoxi" :style="{maxWidth:addressWidth + 'px',height:navBarHeight+'px',lineHeight:navBarHeight+'px'}">定位地址</view></view><view class='home-search' @click = "searchTap" :style="{top:searchSpacing + 'px',left:searchSpacingLeft + 'px'}"><view class='search' :style="{height:searchHeight + 'px',width:searchWidth + 'px',lineHeight:searchHeight + 'px'}"><!-- <image src="../static/images/iconSs.png"></image> --><text>搜索</text></view></view></view></view></view>
</template>

js代码

<script>
const app = getApp();
export default {data(){return{haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则没有返回按钮statusHeight: 0, // 状态栏高度navbarHeight: 0, // 顶部导航栏高度navBarHeight: 0, //导航高度hasBgc:"#ff552e",  //背景颜色headerBarHeight:'0', //整个状态栏的高度searchHeight:'0',  //搜索栏的高度 等于状态栏的高度searchWidth:'0',   // 搜索的宽度  等于 屏幕宽度减去两个胶囊的宽度searchSpacing:'0' ,//搜索框距离导航栏顶部的定位间距addressWidth:'0'   ,//定位地址的宽度searchSpacingLeft:'0' //搜索框距离导航栏最左边的定位间距}},methods:{},created() {var that = this;if (!app.globalData.systeminfo) {app.globalData.systeminfo = uni.getSystemInfoSync(); //获取手机型号console.log(app.globalData.systeminfo,'00')}if (!app.globalData.capsule) {app.globalData.capsule = uni.getMenuButtonBoundingClientRect(); //胶囊的属性console.log(app.globalData.capsule)}let statusHeight = app.globalData.systeminfo.statusBarHeight // 顶部状态栏高度let headerCapsule = app.globalData.capsule // 胶囊位置信息let haveBack;if (getCurrentPages().length != 1) { // 当只有一个页面时，并且是从分享页进入haveBack = false;} else {haveBack = true;}let capsuleSpacing = headerCapsule.top - statusHeight; //胶囊和状态栏之间的距离let capsuleSpacingBottom = headerCapsule.bottom - headerCapsule.height - statusHeight //胶囊距离底部的距离let navBarHeight = headerCapsule.height + capsuleSpacing + capsuleSpacingBottom // 导航高度let screenWidth = app.globalData.systeminfo.screenWidth  //整个屏幕的宽度that.haveBack = haveBack; // 获取是否是通过分享进入的小程序that.statusHeight = statusHeight;  //状态栏高度that.navBarHeight = navBarHeight; // 导航高度that.headerBarHeight = navBarHeight + statusHeight; //整个状态栏的高度that.searchHeight = headerCapsule.height;  //搜索栏的高度 等于状态栏的高度that.searchSpacing = capsuleSpacing;  //搜索框距离导航栏顶部的定位间距that.searchSpacingLeft = headerCapsule.width + (screenWidth - headerCapsule.right)*2 - 14;  //搜索框距离导航栏最左边的定位间距that.addressWidth = headerCapsule.width - 24;  //地位地址的最大宽度  设置为和胶囊的宽度一致 - 地址的图标位置的大小 24自己设置的数字that.searchWidth = screenWidth - headerCapsule.width*2 - (screenWidth - headerCapsule.right)*4 + 14; //搜索框的宽度 = 屏幕宽 - 两个胶囊宽 - 4个胶囊距离最右边的宽度 留两位间距//这是支付宝获取胶囊的方式 暂时没写  先记录在这里// getPhoneHeight(){//    let that =this//   uni.getSystemInfo({//       success:function(res){//            console.log(res)//          that.globalData.phoneHeight=res.statusBarHeight;//             that.globalData.titleBarHeight = res.titleBarHeight;//             that.globalData.screenHeight = res.screenHeight;//         }//     })// }}
}
</script>

css

.headerRelative{width: 100%;background: #fff;position: fixed;top: 0;left: 0;right: 0;z-index: 99999;}
.headerNav{position: fixed;font-size: 26rpx;width: 100%;z-index: 999;}
.left{position: absolute;width: auto;height: max-content;top: 0;bottom: 0;left: 20rpx;margin: auto;}
.iconfont{color: #FFFFFF;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; background: url(../static/images/down.png) no-repeat right;padding-right: 24rpx;background-size: 24rpx;}
.iconfont image{width: 23rpx;height: 42rpx;margin-top: 14rpx;margin-left: 10rpx;}
.business{width: 100%;}
.bg{position: absolute;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.7)}
.home-search{position: absolute;}
.home-search .search{ display: inline-block; width: 100%;font-size: 26rpx; color: #fff;background:rgba(255,255,255,0.3) ;border-radius: 100rpx;}
.home-search .search image{float: left; margin-left: 30rpx; margin-right: 20rpx; width: 26rpx; height: 26rpx; margin-top: 18rpx;}
.home-search .search text{float: left;font-size: 24rpx;margin-left: 30rpx;}

记录以下自己工作中的一些有用的，以后方便使用，

uniapp 自定义头部支持微信、百度、头条小程序相关推荐

JeewxBoot微信管家平台支持微信公众号/小程序/微信第三方平台/抽奖活动等
JeewxBoot是一款免费的JAVA微信管家平台,支持微信公众号.小程序.微信第三方平台.抽奖活动等.JeewxBoot已经实现了系统权限管理.公众号管理.抽奖活动等基础功能,便于二次开发,可以快速 ...
dedecms小程序插件升级到1.4.4（支持百度小程序，微信小程序，头条小程序，QQ小程序，支付宝小程序...）
从2019年6月份开发到现在 dede织梦小程序插件已经升级到1.4.4版本,现在已经支持:微信小程序,百度小程序,头条/抖音小程序,QQ小程序,支付宝小程序. dedecms小程序插件目前主要的功能 ...
基于uniapp开发的适用于微信小程序，头条小程序
基于的uni-app开发的跨平台商城小程序(微信小程序,头条小程序,抖音小程序),合理的代码结构和规范的编码风格,能够让你很轻松的上手并转化成为自己的作品. 与之相支持的是,我们提供了一套完整的项目代 ...
微信小程序不支持打开非业务域名_开达应用五端合一：抖音/头条小程序基础配置...
抖音/头条小程序基础配置小程序AppKey AppSecret获取登录到字节跳动小程序管理平台,开发: 域名配置登录到字节跳动小程序管理平台,进入开发»服务器域名,点击添加自己的网站域名登录 ...
WordPress微信小程序,WordPress百度小程序,WordPressQQ小程序,WordPress今日头条小程序,WordPress抖音小程序,WordPress多端小程序
WordPress微信小程序,WordPress百度小程序,WordPressQQ小程序,WordPress今日头条小程序,WordPress抖音小程序,WordPress多端小程序. WordPre ...
Uniapp壁纸小程序源码/双端微信抖音小程序源码
正文: Uniapp壁纸小程序源码,双端微信抖音小程序源码. WordPress后台的小程序.为一些做壁纸类自媒体的朋友解决变现难的问题抖音壁纸常见的图片取号码,微信的壁纸公众号小程序均可使用该小程 ...
支付宝、微信、百度的小程序新逻辑
配图来自Cnava可画从小程序运作逻辑的角度上看,其寄生在平台之上,对于平台的引流方面在一定程度上也是大有可观.在流量获取成本逐渐走高的情况下,互联网巨头们自然不会放过任何能给自家头部平台引流的机会 ...
百度智能小程序击中微信软肋：流量要多更要精
最近几个月,小程序领域可谓是消息不断.此前今日头条小程序开启内测引起一阵骚动后,9月25日,百度举办了一场智能小程序媒体沟通会,宣布智能小程序将全面开放申请,几乎所有小程序开发者们都兴奋起来,BAT小 ...
微信限制 ChatGPT 小程序；美国禁止在政府设备上使用 TikTok；Gccrs 代码合并到 GCC 13 主支|极客头条
「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹出品 | CSDN(ID:CSDNnews ...
百度智能小程序微信群
百度作为一个流量入口大户.当然其推广的百度小程序也不缺流量,由于目前百度智能小程序需要内测邀请码,暂不对外开放,相信不久的的将来都会开放推广的,想前了解下,可以加微信群,本群新建,仅供交流使用,本人也 ...

uniapp 自定义头部支持微信、百度、头条小程序

uniapp 自定义头部支持微信、百度、头条小程序相关推荐

最新文章

热门文章

uniapp 自定义头部 支持微信、百度、头条小程序

uniapp 自定义头部 支持微信、百度、头条小程序相关推荐

最新文章

热门文章

uniapp 自定义头部支持微信、百度、头条小程序

uniapp 自定义头部支持微信、百度、头条小程序相关推荐