uni-app入门教程（2）页面样式、配置文件和生命周期

最新推荐文章于 2024-01-28 10:27:22 发布
最新推荐文章于 2024-01-28 10:27:22 发布
阅读量1.7k 收藏 4
点赞数 3
分类专栏： 移动应用开发 文章标签： uni-app 入门教程 页面样式、配置文件和生命周期
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cufeecr/article/details/111166371
版权

文章目录

前言

本文先介绍uni-app的页面样式和布局，包括尺寸单位、样式导入、内联样式和选择器等；再介绍两个配置文件，即pages.json和manifest.json的配置项和基本使用；最后简要介绍了生命周期的基本使用。

一、页面样式与布局

1.尺寸单位

uni-app框架目前仅支持长度单位px和%。与传统web页面不同，px是相对于基准宽度（uni-app的基准宽度为750px）的单位，已经适配了移动端屏幕，其原理类似于rem，开发者不需要再针对不同屏幕大小的设备进行适配，只需按照设计稿确定框架样式中的px值即可。
设计稿1px与框架样式1px转换公式为设计稿 1px / 设计稿基准宽度 = 框架样式1px / 750px，换言之，页面元素宽度在uni-app中的宽度计算公式为750px * 元素在设计稿中的宽度 / 设计稿基准宽度。
举例如下：

若设计稿宽度为640px，元素A在设计稿上的宽度为100px，那么元素A在uni-app里面的宽度应该设为750 * 100 / 640，即117px；
若设计稿宽度为375px，元素 B 在设计稿上的宽度为200px，那么元素B在uni-app里面的宽度应该设为750 * 200 / 375，即400px。

2.样式导入

使用@import语句导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;结束语句。
例如：

<style>
    @import "../../common/uni.css";
    .uni-card {
        box-shadow: none;
    }
</style>

3.内联样式

框架组件上支持使用style、class属性来控制组件的样式：
（1）class
用于指定样式规则，其属性值是样式规则中类选择器名（样式类名）的集合，样式类名不需要带上.，样式类名之间用空格分隔。
一般会将静态的样式统一写到class中。
例如：

<view class="normal_view" />

之前的hello uniapp项目中，App.vue如下：

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	.red{
		color:#007AFF;
	}
</style>

pages/index/index.vue如下：

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="red">
			hello, corley
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

修改后重新编译运行后，微信开发者工具模拟器的小程序页面如下：
uniapp style class

可以看到，App.vue中定义的样式对index页面产生了效果。

（2）style
style接收动态的样式，在运行时会进行解析，应避免将静态的样式写进style中，以免影响渲染速度。
例如：

<view style="color:{{color}};" />

4.选择器

目前支持的选择器有：

选择器举例意义备注
.class.intro选择所有拥有 class=“intro” 的组件无
#id#firstname选择拥有 id=“firstname” 的组件无
elementview选择所有 view 组件无
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件无
::afterview::after在 view 组件后边插入内容仅微信小程序和5+App生效
::beforeview::before在 view 组件前边插入内容仅微信小程序和5+App生效

5.全局样式与局部样式

定义在 App.vue 中的样式为全局样式，作用于每一个页面，如前面在App.vue中定义的全局样式对index页面也有效；
在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器，如在index页面中自定义的样式。
同时，App.vue中也可以通过@import语句导入外联样式，同样作用于每一个页面。

二、配置文件

uni-app中一般以json的形式定义配置文件，如pages.json、manifest.json等，其中pages.json更偏向小程序，manifest.json更偏向App。

1.页面配置pages.json

pages.json文件用来对uni-app进行全局配置，主要对接小程序，决定页面文件的路径、窗口表现、设置多标签等。

pages.json常见配置项列表如下：

属性类型必填与否描述
globalStyleObject否设置默认页面的窗口表现
pages ObjectArray是设置页面路径及窗口表现
tabBarObject否设置底部 tab 的表现
conditionObject否启动模式配置

一个包含了上述所有配置选项的pages.json示例如下：

{
  "pages": [{
    "path": "pages/component/index",
    "style": {
      "navigationBarTitleText": "组件"
    }
  }, {
    "path": "pages/API/index",
    "style": {
      "navigationBarTitleText": "接口"
    }
  }, {
    "path": "pages/component/view/index",
    "style": {
      "navigationBarTitleText": "view"
    }
  }],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "演示",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/component/index",
      "iconPath": "static/image/icon_component.png",
      "selectedIconPath": "static/image/icon_component_HL.png",
      "text": "组件"
    }, {
      "pagePath": "pages/API/index",
      "iconPath": "static/image/icon_API.png",
      "selectedIconPath": "static/image/icon_API_HL.png",
      "text": "接口"
    }]
  },
  "condition" : {
		"current": 0,
		"list": [
			{
				"name": "", 
				"path": "",
				"query": ""
			}
		]
	}
}

下面进一步解释各配置项的含义。

globalStyle

用于设置应用的状态栏、导航条、标题、窗口背景色等，对所有页面生效。
具体参数和含义如下：

参数类型默认值含义
navigationBarBackgroundColorHexColor#000000导航栏背景颜色
navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black/white
navigationBarTitleTextString无导航栏标题文字内容
navigationStyleStringdefault导航栏样式，仅支持 default/custom
backgroundColorHexColor#ffffff窗口的背景色，对微信小程序有效

说明：
navigationStyle只在pages.json->globalStyle 中设置生效，并且，该参数设置为custom后，所有窗口均无导航栏。

pages.json修改如下：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "hello uniapp",
		"navigationBarBackgroundColor": "#ff557f",
		"backgroundColor": "#fffae8"
	},
	"condition" : { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [
			{
				"name": "", //模式名称
				"path": "", //启动页面，必选
				"query": "" //启动参数，在页面的onLoad函数里面得到
			}
		]
	}
}

显示：
uniapp config pages.json globalstyle

显然，导航栏的背景颜色已经生效。

pages

接收一个数组，来指定应用由哪些页面组成。每一项代表对应页面的信息，应用中新增、减少或修改页面，都需要对pages数组进行同步修改。

说明：
在指定路径时，文件名不需要写后缀，框架会自动寻找路径下的页面资源；
pages节点的第一项为应用入口页（即首页），所以在开发多个页面时，可以把当前开发的页面放到第一项，便于在微信开发者工具中查看调试。

新建一个页面过程如下：
在pages目录下面新建about目录，下新建about.vue如下：

<template>
	<view class="content">
		about...
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'About'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

将其注册到pages.json如下：

{
	"pages": [ //pages数组中第一项表示应用启动页
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "Uni Index"
			}
		},
		{
			"path": "pages/about/about",
			"style": {
				"navigationBarTitleText": "Uni About"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "hello uniapp",
		"navigationBarBackgroundColor": "#ff557f",
		"backgroundColor": "#fffae8"
	},
	"condition" : { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [
			{
				"name": "", //模式名称
				"path": "", //启动页面，必选
				"query": "" //启动参数，在页面的onLoad函数里面得到
			}
		]
	}
}

其中，pages数组中的每一个page还可以通过style参数定义当前页面的样式，来设置每个页面的状态栏、导航条、标题、窗口背景色等，具体参数如下：

参数类型默认值含义
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如"#000000"
navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black/white
navigationBarTitleTextString无导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景色，对微信小程序、百度小程序、字节跳动小程序有效
backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark/light
enablePullDownRefreshBooleanfalse是否开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为px
navigationStyleStringdefault导航栏样式，仅支持 default/custom，custom 模式可自定义导航栏，只保留右上角胶囊状的按钮，对微信小程序 7.0+、百度小程序、H5、App（2.0.3+）有效
backgroundColorTopString#ffffff顶部窗口的背景色，仅iOS平台有效
backgroundColorBottomString#ffffff底部窗口的背景色，仅iOS平台有效

pages.json中给page定义style如下：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "Uni Index",
				"backgroundColor": "#F0AD4E",
				"navigationBarTextStyle":"black"
			}
		},
		{
			"path": "pages/about/about",
			"style": {
				"navigationBarTitleText": "Uni About"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "hello uniapp",
		"navigationBarBackgroundColor": "#ff557f",
		"backgroundColor": "#fffae8"
	},
	"condition" : { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [
			{
				"name": "", //模式名称
				"path": "", //启动页面，必选
				"query": "" //启动参数，在页面的onLoad函数里面得到
			}
		]
	}
}

显示：
uniapp config pages.json pages style

tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

常见参数和含义如下：

属性类型必填与否默认值含义
colorHexColor是无tab上的文字默认颜色
selectedColorHexColor是无 tab上的文字选中时的颜色
backgroundColorHexColor是无tab的背景色
borderStyleString否blacktabbar 上边框的颜色，仅支持 black/white
listArray是无tab 的列表，最少2个、最多5个 tab
positionString否bottom可选值 bottom、top

说明：
当设置 position 为 top 时，将不会显示 icon；
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序，数组中的每个项都是一个对象，其属性值如下：

属性类型必填与否说明
pagePathString是页面路径，必须在 pages 中先定义
textString是tab
iconPathString否图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPathString否选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

在static目录下新建imgs目录专门用于保存图片资源，下面放4张图片，再在pages.json中定义tabBar如下：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "Uni Index",
				"backgroundColor": "#F0AD4E",
				"navigationBarTextStyle":"black"
			}
		},
		{
			"path": "pages/about/about",
			"style": {
				"navigationBarTitleText": "Uni About"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "hello uniapp",
		"navigationBarBackgroundColor": "#ff557f",
		"backgroundColor": "#fffae8"
	},
	"tabBar": {
		"color":"#F0AD4E",
		"selectedColor":"#007AFF",
		"backgroundColor":"#FFFFFF",
		"list": [
			{
				"pagePath":"pages/index/index",
				"iconPath":"static/imgs/index_0.png",
				"selectedIconPath":"static/imgs/index_1.png",
				"text": "首页"
			},
			{
				"pagePath":"pages/about/about",
				"iconPath":"static/imgs/about_0.png",
				"selectedIconPath":"static/imgs/about_1.png",
				"text":"关于我们"
			}
		]
	},
	"condition" : { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [
			{
				"name": "", //模式名称
				"path": "", //启动页面，必选
				"query": "" //启动参数，在页面的onLoad函数里面得到
			}
		]
	}
}

此时显示：
uniapp config pages.json pages tabbar

可以看到，此时已经可以显示不同的标签页，并且可以进行切换。

如需图标等静态资源，可以直接点击加QQ群 Python极客部落963624318 ，在群文件夹uni-app入门教程中下载即可。

condition

启动模式配置，仅开发期间生效，用于模拟直达页面的场景。
例如小程序转发后，用户点击所打开的页面。

属性和含义如下：

属性类型是否必填描述
currentNumber是当前激活的模式，list节点的索引值
listArray是启动模式列表

其中，list属性如下：

属性类型是否必填描述
nameString是启动模式名称
pathString是启动页面路径
queryString否启动参数，可在页面的 onLoad 函数里获得

说明：
在App里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式。

例如，pages.json如下：

{
	"pages": [ //pages数组中第一项表示应用启动页
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "Uni Index",
				"backgroundColor": "#F0AD4E",
				"navigationBarTextStyle":"black"
			}
		},
		{
			"path": "pages/about/about",
			"style": {
				"navigationBarTitleText": "Uni About"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "hello uniapp",
		"navigationBarBackgroundColor": "#ff557f",
		"backgroundColor": "#fffae8"
	},
	"tabBar": {
		"color":"#F0AD4E",
		"selectedColor":"#007AFF",
		"backgroundColor":"#FFFFFF",
		"list": [
			{
				"pagePath":"pages/index/index",
				"iconPath":"static/imgs/index_0.png",
				"selectedIconPath":"static/imgs/index_1.png",
				"text": "首页"
			},
			{
				"pagePath":"pages/about/about",
				"iconPath":"static/imgs/about_0.png",
				"selectedIconPath":"static/imgs/about_1.png",
				"text":"关于我们"
			}
		]
	},
	"condition": { //模式配置，仅开发期间生效
	    "current": 0, //当前激活的模式（list 的索引项）
	    "list": [{
	            "name": "index", //模式名称
	            "path": "pages/index/index", //启动页面，必选
	            "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
	        },
	        {
	            "name": "about", //模式名称
	            "path": "pages/about/about", //启动页面，必选
	            "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
	        }
	    ]
	}
}

显示：
uniapp config pages.json condition

显然，此时可以在微信开发者工具根据定义的启动模式名称来选择页面，同时传递参数值。

2.显示配置manifest.json

manifest.json文件是应用的配置文件，用于指定应用的名称、图标、权限等，更偏向于Android、iOS等App配置。

常见配置项列表如下：

属性类型描述
nameString应用名称
appidString应用标识，新建uni-app项目时DCloud云端分配
descriptionString应用描述
versionNameString版本名称，例如1.0.0
versionCodeString版本号，例如36
app-plusObjectApp特有配置
quickappObject快应用特有配置，即将支持
mp-weixinObject微信小程序特有配置
mp-baiduObject百度小程序特有配置
mp-alipayObject支付宝小程序未提供可配置项

其中，app-plus常见属性和含义如下：

属性类型含义
modulesObject权限模块
distributeObjectApp发布信息

其中，modules属性常见的可配置的权限模块如下：

名称描述
Contacts系统通讯录
Fingerprint指纹识别
Maps地图
Messaging短彩邮件消息
OAuth登录授权
Payment支付
Push消息推送
Share社交分享
Speech语音识别
Statistic统计
VideoPlayer视频播放
LivePusher直播推流

distribute属性常见的配置如下：

属性类型描述
androidObjectAndroid应用配置
iosObjectiOS应用配置
sdkConfigsObjectSDK配置

说明：
manifest.json文件的配置，推荐在 HBuilderX 提供的可视化操作界面完成；
部分配置在打包时的操作界面补全，例如证书等信息；
Native.js权限部分会根据配置的模块权限，在打包后自动填充；
部分modules是默认的，不需要进行配置。

mp-weixin常见配置项和含义如下：

属性类型含义
appidString微信小程序的AppID，需要登录https://mp.weixin.qq.com/申请
usingComponentsBoolean是否启用自定义组件模式，v1.8.0+，默认为false
settingObject微信小程序项目设置
functionalPagesBoolean微信小程序是否启用插件功能页，默认关闭

在BuilderX编辑器中查看manifest.json文件如下：
uniapp config manifest

可以看到，除了通过源码视图定义manifest.json配置项，还可以使用可视化界面操作。

三、生命周期

不论是app还是小程序，生命周期是非常重要的特性，即对象从被创建到最后被销毁的整个过程。
uni-app支持如下页面生命周期函数：

函数含义
onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为object（用于页面传参）
onShow监听页面显示
onReady监听页面初次渲染完成
onHide监听页面隐藏
onUnload监听页面卸载
onPullDownRefresh监听用户下拉动作
onReachBottom页面上拉触底事件的处理函数
onShareAppMessage用户点击右上角分享 微信小程序
onPageScroll监听页面滚动
onTabItemTap当前是 tab 页时，点击 tab 时触发

index.vue如下：

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="red">
			hello, corley
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			console.log('index onload')
		},
		onShow() {
			console.log('index onshow')
		},
		onHide() {
			console.log('index onhide')
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

about.vue如下;

<template>
	<view class="content">
		about...
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'About'
			}
		},
		onLoad() {
			console.log('about onload')
		},
		onShow() {
			console.log('about onshow')
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

运行测试如下：
uniapp lifecycle
显然，在切换不同页面时，会调用相应的生命周期函数打印出不同的日志信息。

总结

uni-app对于样式有着自己的规定，比如尺寸单位，但是与HTML5也存在着很多共同点，体现在样式导入、选择器、全局样式与局部样式等方面。同时对于小程序和App有特定的配置文件进行配置。生命周期可用于定义页面在不同阶段、不同情境下的操作。

AI码东道主
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
第5讲 uni-app之globalStyle全局页面样式配置（视频教程）
02-21
第5讲 uni-app之globalStyle全局页面样式配置
uniapp简单的标题栏切换颜色
weixin_68713220的博客
11-05 461
uniapp切换标题颜色
uniapp组件库Card 卡片 的使用方法
最新发布
精通前端技术，了解后端接口
01-28 1878
卡片组件一般用于多个列表条目，且风格统一的场景。
【前端开发】Uniapp：uni-ui-扩展组件
热门推荐
`雾博客
10-18 1万+
安装sass-loader（使用低于@11.0.0版本，[email protected]不支持[email protected]）：npm i [email protected] -D 或者 yarn add [email protected] -D。uni组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。：传统vue组件，需要安装、引用、注册三个步骤后才能使用组件，
uni-app-卡片组件
m0_37602317的博客
04-28 1801
Uni-app 卡片组件 <template> <view class="card-content"> <span v-if="cardData.length === 0" class="no-data">No data</span> <block v-for="(item, itemIndex) of cardData" :key="itemIndex"> <view clas
uni-app扩展组件(uni-ui)
掩月天权的博客
05-30 1831
扩展组件
uniapp/移动端如何给单个页面设置样式
qq_45390948的博客
08-30 1839
设置整个页面的样式
uni-app 页面样式
m0_58492934的博客
06-14 5298
uni-app 支持的通用 css 单位包括 px、rpxvue页面支持普通H5单位，但在nvue里不支持：nvue还不支持百分比单位。App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。注意此时不支持 rpxnvue中，uni-app 模式（nvue 不同编译模式介绍）可以使用 px 、rpx，表现与 vue 中一致。weex 模式目前遵循weex的单位，它的单位比较特殊：下面对 rpx 详细说明：设计师在提供设计图时，一般只提供一个
uniapp如何动态改变page的style样式
one dream
12-02 3520
uniapp的滚动穿透
uni-app中设置单个页面样式方法
爱吃猫的鱼
07-19 570
uni-app中设置单个页样式不生效解决方法
【uniapp】设置单个页面的背景色，使用page的方法
小黄呀呀呀的博客
06-22 2173
代码如下： 设置单个页面的整个背景色为红色， 当时想直接写 但是行不通。
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app实战在线教育类app开发-视频教程网盘链接提取码下载.txt
11-07
本季度基于uni-app实战开发在线教育类app和小程序，课程包括：图文，音频，视频，电子书、会员、直播、问答、考试、拼团秒杀、优惠券。一次开发，同时搞定Android、iOS、微信小程序、H5端。非常适合具有...
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
uni-app快速入门源码 uni-app开发经典源码项目 uni-app可快速实现对接进销存
12-09
uni-app快速入门源码 uni-app开发经典源码项目 uni-app可快速实现对接企业进销存、OA、ERP系统 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、...
uni-app入门教程（8）在uni-app中使用Vue
CUFEECR的博客
01-13 1万+
Vue是基于JavaScript、用于构建用户界面的渐进式框架，支持响应式数据操作，uni-app是使用Vue开发前端应用的框架，也支持定义和动态绑定属性和方法。Vue支持实例生命周期，uni-app在此基础上增加了应用生命周期和页面生命周期。uni-app中实现全局变量有3种方式：定义公用模块保存常量；挂载Vue.prototype，使Vue继承其常量和方法；使用globalData属性在App中声明全局变量。class和style属性可以实现动态绑定，支持对象语法和数据语法，实现动态改变元素样式。
Android开发 常见异常和解决办法（一）
CUFEECR的博客
11-08 7478
AS 3.0以上找不到Monitor，需要在终端中执行命令。在Monitor无法打开文件读取权限需要执行adb获取权限。添加jar包需要右键选择Add As Library。waiting for device需要cold boot now。AS3以后NonNull包找不到，需要设置和添加依赖。引用Module报错Unable to resolve可能有两种原因。Manifest errors，改成参数一致。null object是布局出错。4.0以上网络错误有两种解决办法。引用so错误需要添加配置。
uni-app入门教程（4）组件的基本使用
CUFEECR的博客
12-21 5746
基础组件：scroll-view是可滚动视图区域；swiper是滑块视图容器；text是文本组件；rich-text是富文本组件；process是进度条。表单组件：button是按钮；checkbox是复选框；input是输入框；picker是滚动选择器；radio是单选框；slider是滑动选择器；switch是开关选择器；textarea是多行输入框；form是表单容器。页面跳转可以用组件或者API实现；跳转可以传递参数。媒体组件：audio是音频组件；image是图片组件；video是视频组件。
uni-app入门教程（1）uni-app简介、部署和目录结构
CUFEECR的博客
12-13 5076
uni-app是DCloud官方推出的使用Vue.js开发跨平台应用的前端框架，一套代码可编译到iOS、Android、微信小程序等多个平台，学习和开发成本较低。在进行uni-app开发之前需要先搭建环境，下载并安装HBuilderX、微信开发者工具；新建项目时选择类型，创建之后会自动生成项目的默认目录，可以通过多种方式编译运行。一个典型的项目包括App.vue、main.js等文件和pages、static等目录；uni-app遵守Vue单文件组件规范，vue文件包括模板、脚本和样式3个顶级语言块。
uni-app 页面生命周期
09-08
uni-app 是一个基于 Vue.js 的跨平台开发框架，可以同时开发多个平台的应用，包括小程序、H5、安卓、iOS 等。uni-app 的页面生命周期与 Vue.js 的生命周期类似，但也有一些特定的生命周期钩子函数。下面是 uni-app 页面的生命周期： 1. beforeCreate：在实例初始化之前调用，此时还无法访问到 data、computed 等属性。 2. created：实例创建完成后调用，此时已经可以访问到 data、computed 等属性。 3. beforeMount：在页面挂载之前调用，此时模板编译已经完成。 4. mounted：在页面挂载之后调用，此时可以访问到 DOM 元素。 5. beforeUpdate：数据更新之前调用，可用于在更新之前进行一些操作。 6. updated：数据更新之后调用，可用于在更新之后进行一些操作。 7. activated（仅在 APP-NVUE 中可用）：页面被激活时调用，比如从其他页面返回到当前页面。 8. deactivated（仅在 APP-NVUE 中可用）：页面被隐藏时调用，比如从当前页面跳转到其他页面。 9. beforeDestroy：在实例销毁之前调用，此时实例仍然可用。 10. destroyed：实例销毁之后调用，此时实例已经被销毁，无法再访问到任何属性和方法。 这些生命周期钩子函数可以用来在不同的阶段执行相应的操作，比如数据初始化、页面渲染、数据更新等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AI码东道主

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值