学习uni-app记录

小程序page.json全局配置

{
   
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
   
			"path": "pages/workbench/workbench",
			"style": {
   
				// "navigationBarTitleText": "工作台", //下面的buttons内容会将其覆盖
				"app-plus": {
    //App端扩展配置
					"titleNView": {
    //原生导航栏配置参数
						"autoBackButton": true,
						"buttons": [ //原生标题栏按钮配置,点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听。如：top导航栏后退按钮。然后在pages/workbench/workbench点击事件（与data和onload同级）：
							{
   
								"type": "none", // 需通过 text 属性设置按钮上显示的内容、通过 fontSrc 属性设置使用的字体库。
								"text": "数字婺城",
								"float": "left",
								"id": "test1",
								"fontSize":"16px" //标题的字体大小
							},
							{
   
								"type": "back", // 使用 type 值设置按钮的样式时，会忽略 fontSrc 和 text 属性。
								"float": "left",
								"id": "test0"
							}
						],
						"searchInput": {
    // 在vue/nvue页面中可通过onNavigationBarSearchInputChanged事件监听搜索框输入内容变化
							"autoFocus": true,
							// "borderRadius": "10upx",
							"borderRadius": "6px", //输入框圆角
							"backgroundColor": "#F5F4F4",
							"placeholder": "请输入搜索内容"
							// "disabled": true //disable时点击输入框不置焦，可以跳到新页面搜索				
						}
						
					}
				}
			}
		},
		{
   
			"path": "pages/login/login",
			// "style": {
   
			// 	"navigationBarTitleText": "数字婺城",
			// 	"enablePullDownRefresh": false
			// }
			"style": {
   
				"navigationBarTitleText": "数字婺城",
				"app-plus": {
    //App端扩展配置
					"scrollIndicator": "none",
					"titleNView": {
    //原生导航栏配置参数
						"homeButton": true,
						"autoBackButton": true, // false,取消pages页面的默认返回按钮。自定义返回按钮的样式
						// 当autoBackButton设置为true时生效。 通过如下button中的type属性可自定义返回按钮样式，如图标大小、红点、角标、标题等。

						"buttons": [ //原生标题栏按钮配置,
							{
   
								"type": "home", // 使用 type 值设置按钮的样式时，会忽略 fontSrc 和 text 属性。
								"float": "left",
								"id": "test0"

							}
							// {
   
							// 	"type": "none",
							// 	"text": "自定义",
							// 	"float": "right",
							// 	"id": "test1"
							// },
							// {
   
							// 	"type": "none",
							// 	"text": "\u2708",
							// 	"float": "right",
							// 	"id": "test2"
							// }
						]
						// "buttons": [{ //原生标题栏按钮配置,
						// 	"type": "none",
						// 	"text": "\u2716",
						// 	"float": "left",
						// 	"fontSrc": "/static/uni.ttf",
						// 	"fontSize": "22px"
						// }]

						//  原生导航栏自定义按钮带红点和角标
						// ,"buttons": [{
   
						// 		"text": "消息",
						// 		"fontSize": "14",
						// 		"redDot": true
						// 	},
						// 	{
   
						// 		"text": "关注",
						// 		"fontSize": "14",
						// 		"badgeText": "12"
						// 	}
						// ]

						// 原生导航栏自定义按钮带下拉选择（城市选择）
						// "buttons": [{
   
						// 	"text": "北京市",
						// 	"fontSize": "14",
						// 	"select": true,
						// 	"width": "auto"
						// }]

						// 带搜索
						// "searchInput": {
   
						// 	"autoFocus": true,
						// 	// "borderRadius": "10upx",
						// 	"borderRadius": "6px", //输入框圆角
						// 	"backgroundColor": "#F5F4F4",
						// 	"placeholder": "请输入搜索内容"
						// 	// "disabled": true //disable时点击输入框不置焦，可以跳到新页面搜索
						// }

						// "type": "transparent", //配置原生导航栏的透明渐变:页面刚载入时没有导航标题，页面内容通顶到状态栏里，页面向下滚动后标题栏渐变出现。
						// "bounce": "none", //关闭窗口回弹效果
						// "backgroundImage": "/static/logo.png", //设置背景图	
					}
				}
			}
		},
		{
   
			"path": "pages/index/index",
			"style": {
   
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
    // 全局导航栏样式设置
		"navigationBarBackgroundColor": "#007AFF", // 导航栏背景颜色（同状态栏背景色）
		"navigationBarTextStyle": "white", // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
		"navigationBarTitleText": "数字婺城", // 导航栏标题文字内容
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
   
		"color": "#aeafb1", // 表示tabBar item项中文字默认的颜色
		"selectedColor": "#004de8", // 表示tabBar item项中文字选中的颜色
		"borderStyle": "black", // 表示tabBar 上边框的颜色，目前只支持 black/white
		"backgroundColor": "#ffffff", // 表示 tabBar 的背景颜色
		"height": "80px", // tabbar的高
		"fontSize": "16px", // 文字大小
		"iconWidth": "35px", // 图标宽带
		"spacing": "3px", // 图标和文字之间的间距
		"list": [{
   
				"pagePath": "pages/information/information", // 表示第一tab项的页面路径
				"iconPath": "static/logo.png", // 表示当前 tab 未选中时所显示的图标路径
				"selectedIconPath": "static/logo.png", // 表示当前 tab 选中时所显示的图标文件路径
				"text": "消息" //菜单文字
			},
			{
   
				"pagePath": "pages/login/login",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "待办"
			},
			{
   
				"pagePath": "pages/workbench/workbench",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "工作台"
			},
			{
   
				"pagePath": "pages/addressBook/addressBook",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "通讯录"
			},
			{
   
				"pagePath": "pages/mine/mine",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "我的"
			}
		]
	}
}

某个页面

<template>
	<view>
		hi,
		{
   {
   this.$store.state.inputSearchValue}}
		<view class="indeximg">
			<!-- <canvas class="relative" :style="{width: fullHeight}" canvas-id="firstCanvas"></canvas> -->
			<!-- <canvas style="width: 99.8%;height: 450px; border: solid 1rpx #aaaaff; " canvas-id="firstCanvas"></canvas> -->
			<canvas class="relative" 
				:style="{
   
					height:this.$store.state.fullHeight+'px',
					width:this.$store.state.fullWidth+'px',
					border: '1px red solid'
					}" 
				canvas-id="firstCanvas">
				{
   {
   this.$store.state.fullHeight}}
				{
   {
   this.$store.state.fullWidth}}
			</canvas>
		</view