uniapp相关知识点

亦Anna

于 2024-08-09 11:50:47 发布

阅读量466

点赞数 17

文章标签： uni-app

本文链接：https://blog.csdn.net/qq_33653886/article/details/140997037

版权

官网：https://uniapp.dcloud.net.cn/

概述：是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。（不同端展示形态需要条件编译）
vue.js+微信小程序 =uniapp框架

使用场景：优点一套代码可以发布到多端，开发成本低项目完成速度快；缺点：性能差，上架可能有问题，调试很繁琐；适用中小型企业，花钱少，时间快

目录结构：
components：组件
pages：页面
static：静态资源[img，css]
App.vue：整个uniapp项目的第一个组件
index.html :项目入口文件
main,js :第一个运行的js文件【全局js文件】
manifest.json:全局文件 = 》应用的配置
pages.json:全局文件=〉页面的配置
uni.scss：全局样式文件

条件编译
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

使用方法
以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

仅出现在 App 平台下的代码//仅出现在 App 平台下的代码
#ifdef APP-PLUS
需条件编译的代码
#endif

//除了 H5 平台，其它平台均存在的代码（注意if后面有个n）
#ifndef H5
需条件编译的代码
#endif
//在 H5 平台或微信小程序平台存在的代码
#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif

面试题：如果有一段代码想在某一端展示，应该怎么做？
答案：如果不判断app端是安卓还iOS，就加条件编译。如果判断需要调用它的API
面试题：APP-PLUS无法判断安卓还是iOS，怎么获取具体设备
答案：uni.getSystemInfoSync().platform;

基础用法

<template>
//html=》<view>标签相当于div
	<view>
		<button 
		size="default" 
		type="default"
		style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19"
		hover-class="is-hover"
		>按钮</button>
	</view>
</template>

<script setup name="but">
	//js
</script>

<style>
//css
.is-hover {
	color: rgba(255, 255, 255, 0.6);
	background-color: #179b16;
	border-color: #179b16;
  }
</style>

项目调试
小程序
安装各种需要兼容的小程序开发者工具（微信小程序，支付宝小程序，百度小程序…）
web
不同浏览器
app
安卓：Android模拟器（包括google官方模拟器，三方模拟器如“雷电”、“夜神”等）
ios：不支持基座测试安装模拟器=》Xcode

生命周期
页面生命周期
在pages定义的vue文件并在pages.json文件里配置的
常用的：

onLoad=》监听页面加载（第一次进入页面执行的生命周期）
使用场景：
- 接收页面传递过来的参数
- 请求展示接口
onShow =〉监听页面显示（每一次进入页面执行的生命周期如：返回）
使用场景：在页面请求的接口展示数据点击按钮跳转到其他页面提交数据返回后需要展示新发布的数据时，接口需要定义在onShow里
onReady=》监听页面初次渲染完成
使用场景：获取DOM
onHide=〉监听页面隐藏
onUnload=》监听页面卸载
onNavigationBarButtonTap=〉监听原生标题栏按钮点击事件，参数为Object
onNavigationBarSearchInputChanged=》监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed=》监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。

组件生命周期
和vue.js中的生命周期大致一样

beforeCreate=》在实例初始化之后被调用
created =〉在实例创建完成后被立即调用
beforeMount=》在挂载开始之前被调用
mounted=〉挂载到实例上去之后调用详情注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTick
beforeUpdate =》数据更新时调用，发生在虚拟 DOM 打补丁之前
updated=〉由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
beforeDestroy=》实例销毁之前调用。在这一步，实例仍然完全可用
destroyed =〉Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
activated =》被 keep-alive 缓存的组件激活时调用
deactivated =〉被 keep-alive 缓存的组件停用时调用
onPullDownRefresh =》下拉刷新
onReachBottom =>上拉触底加载数据

路由页面跳转
API：

uni.navigateTo(OBJECT) =》保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
uni.redirectTo(OBJECT)=》关闭当前页面，跳转到应用内的某个页面。
uni.reLaunch(OBJECT)=〉关闭所有页面，打开到应用内的某个页面。
uni.switchTab(OBJECT) =》跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.navigateBack(OBJECT)=》关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
注意：跳转到tabBar一定要用uni.switchTab（）

内置组件：

 <navigator url="../liust/ues" open-type="switchTab"></navigator>

传值
页面传值

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});
//b页面接收
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}

组件传值

和vue一样用props传值

其他传值
传uni. $e mi t (‘ 名称 ’ ，值) 接 u ni .$ on（‘名称’，（参数）=>{
console.log(参数)
}

pages.json 页面路由
文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
详细配置项查看官网：https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar
pages=>设置页面路径及窗口表现

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/home/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path" : "pages/order/index",
			"style" : 
			{
				"navigationBarTitleText" : "订单",
				"navigationBarBackgroundColor" : "#ffffff",
				'enablePullDownRefresh':true,
				//开启下拉属性，需要配合生命周期onPullDownRefresh里加关闭刷新uni.stopPullDownRefresh()
			}
		}
]

tabBar=>设置底部 tab 的表现

"tabBar": {
	"color": "#7A7E83",
	"selectedColor": "#3cc51f",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	// liist是tab 的列表，最少2个、最多5个 tab
	"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": "接口"
	}]，
	//midButton是中间按钮‘+’ 仅在 list 项为偶数时有效
	"midButton":{
		"text":"发布",
		"backgroundImage":"static/image/add.png",
	}
	//midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用API：uni.onTabBarMidButtonTap，详见https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap
}
onLaunch(()=>{
	uni.onTabBarMidButtonTap(()=>{
		console.log('中间发现监听')
		uni.navigateTo({
			url:"/pages/find/index"
		})
	})
})

easycom=>组件自动引入规则

安装ui组件库

uView多平台快速开发的UI框架
官网：https://v1.uviewui.com/components/install.html

FirstUI UNI（选项式API）版是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。
官网：https://doc.firstui.cn/docs/introduce.html

//uview
npm install uview-ui@2.0.31
//firstui
npm install firstui-uni

main .js文件引入ui组件，uni.scss 引入样式

// main.js
import uView from "uview-ui";
Vue.use(uView);
/* uni.scss */
@import 'uview-ui/theme.scss';

pages.json文件配置easycom组件模式

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
	//多个ui组件，直接往后添加
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"，
		"fui-(.*)": "firstui-uni/firstui/fui-$1/fui-$1.vue"
		}
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

全局文件pages中的appPlus配置
app-plus=》配置编译到 App 平台时的特定样式

”pages“:[{
		"path": "pages/home/index",
		"style": {
			"navigationBarTitleText": "首页",
			//设置编译到 App 平台的特定样式
			"app-plus": {
				//导航栏
				"titleNView":{
					//自定义按钮，配合页面生命周期onNavigationBarButtonTap使用
					"buttons":[
						//文字类型
						{"text":"查看","float":"left"},
						//icon图标类型。使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue123"
						{"text":"/ue123","fontSrc":"static/font.ttf"}
					] ,
					//原生导航栏上的搜索框配置,配合页面生命周期onNavigationBarSearchInputChanged， onNavigationBarSearchInputConfirmed
					"searchInput":{
						"backgroundColor":"rgba(255,255,255,0.5)",
						"placeholder":"请输入搜索内容"
						
					} 
					
				}
				
			}
		}
	}
]

manifest.json配置
使用情况：

项目开发时，某些功能需要配置，如支付功能需要获取权限等、地图权限、web配置
web配置=》页面标题，模版路径，路由模式，开启https协议，定位地图（选择对于地图填写key，页面调用内置函数uni.chooseLocation）
项目开发完毕准备上线，打包前需要配置App模块配置-》打包模块配置（获取通讯录，分享，支付）

亦Anna

关注

17
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
uniapp相关知识点

是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。（不同端展示形态需要条件编译）web配置=》页面标题，模版路径，路由模式，开启https协议，定位地图（选择对于地图填写key，页面调用内置函数uni.chooseLocation）文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
复制链接

扫一扫