该网站已经工信部认证联盟认证为可信网站,请放心访问
我们的口号:用最便宜的钱,做最好的网站。
了解详情>
网站安全检测
身份证明信息
ICP备案审查
工商登记信息
业务资质许可
网站信用信息

新闻中心

专业专注专心,行业行情行规
分享交流,永无止境,我们愿与您共同进步

自定义微信小程序标题栏

发布日期:[2019/02/18]    编辑:admin

现在各大应用都有小程序了,今日头条,百度App,支付宝等,其实我们使用的比较多的还是微信小程序,作为前端程序员要把微信小程序加入到自己的技术栈里面来,各大公司都要求会微信小程序的开发,现在我也挺看好头条的小程序。

微信小程序的开发非常的简单,开发文档比较完善,社区也比较活跃,对程序员比较友好,微信小程序开发你主要懂HTML,CSS,JavaScript的基础知识就可以开发,开发的过程中主要解决用户授权登录,还有分享逻辑等基本就没有什么太大的难题。

年初老板加需求,小程序做一个引导页,这要求太奇葩了,没有办法只能硬着头皮去完成,因为我原来的代码都是使用小程序默认的标题栏,引导页的banner图肯定有要做成全屏的要不然很难看。微信小程序没有对单个页面设置全屏,只有对所有的页面设置全屏的。

//app.json
"window":{
 "navigationStyle":"custom"
}

这样子设置我所有的代码都要改了,我其他的页面需要标题栏那就要自己添加标题栏上去啊!老板这是不让我闲下来啊!

我们知道不同的手机手机顶部的占用高度是不同的,特别是现在流行的刘海机,iPhone X,iPhone XR 等机的顶部有跟老机型iPhone 8的完全不同,这个适配怎么做,尺寸是多少,

微信小程序的右上角还有一个胶囊,这个胶囊还是无法隐藏的。

在安卓,IOS app有API 获取这个高度,微信也是通过这个高度来定小程序标题栏的高度,关键是微信有没有暴露这个API给小程序。还真的有:

// app.js
App({
 onLaunch:function(e){
 const respx = wx.getSystemInfoSync();
 console.log(respx.statusBarHeight) //这个就是手机顶部的高度单位是px
 }
})

解决了顶部那块接下来就是解决小程序胶囊按钮了,测试了多台手机发现44px高度比较好,只能说是比较理想了并不是特别的完美;

this.globalData.statusBarHeight = respx.statusBarHeight+44;

这个高度存为全局变量了,作为标题栏的高度。

下面是我写的导航template,其他的页面直接引用就行。

// header.wxml
<template name="header">
	<view class="nav-header-title" style="height: {{barHeight}}px;">
		<navigator wx:if="{{showBack}}" open-type="navigateBack" class="nav-back" style="top:{{barHeight-44}}px"><text class="icon iconfont icon-jiantou4"></text></navigator>
		<view style="padding-top: {{barHeight-44}}px;" class="title"><text class="tit">{{barTitle?barTitle:'正在加载'}}</text></view>
	</view>
</template>
<template name="navigatorBack">
	<view class="navigator-back" style="top:{{barHeight-40}}px">
		<navigator open-type="navigateBack"><text class="icon iconfont icon-jiantou4"></text></navigator>
	</view>
</template>
//app.wxss
.nav-header-title{
	width: 100%;
	background: #0CCCBB;
	position: fixed;
	left: 0;
	right: 0;
	z-index: 10000;
	overflow: hidden;
}
.nav-header-title .title{
	width: 100%;
	height: 44px;
	line-height: 44px;
	text-align: center;
	color: #FFFFFF;
	font-size:32rpx;
}
.nav-header-title .title .tit{
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 150rpx;
	display: -webkit-box !important;
	 word-break: break-all; 
	 text-overflow: ellipsis; 
	 overflow: hidden; 
	 -webkit-box-orient: vertical; 
	 -webkit-line-clamp:1;
}
.nav-header-title .nav-back{
	position: absolute;
	height: 44px;
	left: 0;
	box-sizing: border-box;
}
.nav-header-title .nav-back .icon{
	padding: 20rpx;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #FFFFFF;
	font-size:32rpx;
}
.navigator-back{
	position: fixed;
	left: 10px;
	width: 30px;
	height: 30px;
	background: rgba(255,255,255,0.5);
	line-height: 30px;
	text-align: center;
	border-radius: 50%;
}
.navigator-back navigator text{
	color: #14CEBC;
	font-size:32rpx;
}

然后其他的页面想使用的直接是

// index.wxml
<import src="/pages/component/header/header.wxml"/>
<template is="header" data="{{barHeight,showBack,barTitle}}"></template>
<view class="container" style="padding-top: {{barHeight}}px;">
</view>
//index.js
onLoad:function(options){
this.setData({ 
 showBack:true,
 barTitle:某某公司,
 barHeight:app.globalData.statusBarheight 
 })
 }

文章来源:https://www.toutiao.com/i6657326489773539852

上一篇:给大家介绍一个好用的前端框架,亲自体验过。

返回列表

下一篇:Node.js安装及环境配置之Windows篇

  • 2018-11-22 什么样的网站建设内容适合现在的搜索引擎和用户...
  • 2018-11-22 新网站刚优化的时候进入沙盒期该怎么办...
  • 2018-11-22 还在用传统型网站?你的网站是时候转型了...
  • 2018-11-22 网站建设后如何优化URL链接...
  • 2019-01-30 域名可以登记经营场所,快看是怎么回事!...
  • 2018-11-22 网站建设完成后为什么百度不收录网站...
  • 2019-02-18 自定义微信小程序标题栏...
  • 2019-02-15 给大家介绍一个好用的前端框架,亲自体验过。...
  • 2019-03-06 Node.js安装及环境配置之Windows篇...
  • 2019-03-06 Node.js安装及环境配置之Windows篇...
  • 2019-02-18 自定义微信小程序标题栏...
  • 2019-02-15 给大家介绍一个好用的前端框架,亲自体验过。...
  • 2019-01-30 域名可以登记经营场所,快看是怎么回事!...
  • 2018-12-19 【网站建设】公众号拉新的五种姿势...
  • 2018-12-19 【广州网站建设】建设网站用哪种语言比较好?...
  • 2018-11-27 php api接口安全设计 sign...
  • 2018-11-27 PHP做APP接口时,如何保证接口的安全性...
  • 2018-11-27 定制网站设计的流程是什么样的?...
  • 2018-11-27 会给我们提交多少方案供选择,如果方案不满意怎...
  • 或者将本文《自定义微信小程序标题栏》
    复制本文《自定义微信小程序标题栏》地址给好友: