uniapp开发微信小程序自定义顶部导航栏

Posted 2023-04-11 走出半生的少年

自定义导航栏渐变色，先上效果

 

使用uniapp开发小程序，在不同界面，要去对页面进行修改顶部导航栏。

比如说要去定义导航栏的背景颜色，常规的去定义导航栏背景颜色

全局定义导航栏

"window": 
   "navigationBarBackgroundColor": "#32A2FD",  // 顶部背景颜色
    "navigationBarTitleText": "123456",         // 顶部文字
    "navigationStyle": "default",               // 是否自定义导航栏,当"default"为"custom"时开启自定义头部导航栏选项
    "navigationBarTextStyle": "white",          // 顶部文字颜色 仅支持 white/black    
,

单页面定义导航栏

"path": "pages/cargo/pickUpGoods",//页面路径
"style": 
	"navigationBarTitleText": "uni-app", // 顶部文字
	"navigationBarBackgroundColor": "#fff", // 顶部背景颜色
	"navigationBarTextStyle": "black" // 顶部文字颜色

重点来了，导航栏设置渐变色

踩坑，开始我以为把顶部导航栏的颜色换成渐变的就可以了，但是不行

查了之后才知道，设置渐变色要去自定义背景颜色

首先  如果是全部页面就在window里面添加，如果是单页面就在页面添加

"navigationStyle": "custom"

"path": "pages/cargo/shipments",
"style": 
	"navigationBarTitleText": "uni-app",
	"navigationStyle": "custom",//设置自定义导航栏

然后，自己封装一个组件，

<template>
	<view class="prohibition">
		<view class="demo" :style="[background,color,height,paddingTop]">
			<!-- 左侧返回按钮 -->
			<view class="left" @click="onBack" v-if="back" :style="[color,paddingTop]">
				<uni-icons type="arrowleft" size="30" :color='color'></uni-icons>
				<!-- 此处图标使用的是 uni-ui图标 -->
			</view>
			<!-- 中间标题文字 -->
			<view class="title">
				title
			</view>
		</view>
	</view>
</template>

<script>
	export default 
		data() 
			return 
				height: 0, 
				paddingTop: 0,
				
			
		,
		// props: ["title", "back"],
		props:
			title: // 标题文字(默认为空)
				type:String,
				default:''
			,
			color: // 标题和返回按钮颜色(默认白色)
				type:String,
				default:'#fff'
			,
            //建议使用background  因为使用backgroundColor，会导致不识别渐变颜色
			background: // 背景颜色(不传值默认透明)
				type:String,
				default:'transparent'
			,
			back: // 是否显示返回按钮(不传值默认不显示)
				type:Boolean,
				default:false
			,
		,
		
		created() 
			const demo = uni.getMenuButtonBoundingClientRect()
			this.height = demo.height + "px"
			this.paddingTop = demo.top + "px"

		,
		methods: 
			// 左侧返回按钮调用
			onBack() 
				this.$emit("onBack")
			
		
	
</script>
<style lang="less">
	.demo 
		position: relative;//注意，建议使用相对定位，因为固定定位会脱离文档流，然后你还要去设置marginTop值
		// position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		z-index: 100;
		padding-bottom: 10rpx;

		.left 
			float: left;
			position: absolute;
			width: 100rpx;
			height: 50rpx;
			top: 0;
			bottom: 0;
			left: 20rpx;
			color: #fff;
			margin: auto;
		

		.title 
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			// color: #FFFFFF;
		
	
</style>

然后，引入你的这个组件，写在页面的最上面

 代码在这里

<navbar class="header" :background="backgroundColor" back :title="title" @onBack="goBack"></navbar>

引入组件，使用

 

踩了很多坑，制作不易。

uniapp开发微信小程序富文本编辑器（样式仿腾讯文档）

参考技术A

照着腾讯文档小程序开发了微信小程序富文本编辑器组件，这几天做个整理，如有这个需求可以前往腾讯文档小程序操作看看实际效果。毕竟参照的是微信自家小程序，无法做到百分百效果，只能按现有开放api尽可能实现。
项目地址：
https://github.com/chellel/wechat-editor-project

uniapp插件市场：
https://ext.dcloud.net.cn/plugin?id=6365

editor富文本编辑器组件官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

否则会受到小程序css影响。小程序本身editor标签有css样式：
editor
display: block;
position: relative;
box-sizing: border-box;
-webkit-user-select: text;
user-select: text;
outline: 0;
overflow: hidden;
width: 100%;
height: 200px;
min-height: 200px;

that.updatePosition(keyboardHeight)
that.editorCtx.scrollIntoView()

在插入目标文字时，将值设为\\n\'，可以实现换行
this.editorCtx.insertText( text: \'\\n\' );

参考：请问editor组件控制拉起键盘操作支持吗？
https://developers.weixin.qq.com/community/develop/doc/0006eeb6ae8cf0e7f3293e13f56400?highLine=editor%25E6%2598%25BE%25E7%25A4%25BA%25E9%2594%25AE%25E7%259B%2598

小程序技术专员-sanford 2019-09-20

不支持的。iOS无法通过接口拉起键盘，必须用户点击；安卓则可以。所以，终究是不一致，不行。。

该组件主要为微信editor组件的api调用集成封装，因此受到的限制同文档描述一致，即编辑器内支持部分 HTML 标签和内联样式，不支持class和id，支持的标签详见： https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 。
不满足的标签会被忽略，<div>会被转行为<p>储存。
这也是为什么在做富文本解析时，仅仅用rich-text组件无法有效还原html内容，在解析内容的时候就需要将内容中的HTML标签转换成微信小程序所支持的标签。因此最好方式是引入市场封装好的富文本解析插件去解析html。
所以，开发者需要自行权衡在做富文本编辑开发时，是否使用微信自带的editor组件，或者参考腾讯文档小程序采用webview内嵌网页等方式去渲染。

小程序富文本编辑器editor初体验：( https://www.jianshu.com/p/a932639ba7a6 )
如果是微信原生开发，将demo组件中的相关dom元素标签和api换成微信原生即可。