uni-app学习总结

最新推荐文章于 2024-10-16 17:28:29 发布

卡匹

最新推荐文章于 2024-10-16 17:28:29 发布

阅读量816

点赞数 30

文章标签： uni-app 学习

本文链接：https://blog.csdn.net/m0_74431809/article/details/137630496

版权

3.uniapp app 人脸识别（倒计时拍照，已封组件）

4.微信小程序自定义tabbar 防止闪动

5. 微信小程序腾讯云ocr 身份证识别

6. uniapp 解决ios上拉下拉白边处理

7. uniapp 解决滑动穿透（模态滚动影响页面滚动）

8. uniapp分包

9.微信小程序实现实时语音识别腾讯云

10. 微信小程序通过经纬度获取省市区（腾讯云）

一、uni-app介绍

uni-app是一款基于Vue.js的开源跨平台开发框架，可一次编写运行在多个平台（iOS、Android、H5、小程序等）的应用。为开发者提供易于使用的开发工具和全方位的开发支持。其核心理念是“一套代码，多端uni-app支持多种编程语言和技术栈，包括Java、C/C++、Python、Solidity等。使用uni-app，开发者无需了解各平台的差异，只需要通过一套代码即可发布到多平台。uni-app提供了完备的开发工具和开发支持，包括智能合约IDE、SDK、文档等，方便开发者快速进行开发和部署。同时，Uni-AAP还具有高可用、扩展性强、高效性能等特点，旨在为去中心化应用的发展提供支持。

二、学习步骤

1.创建

2.启动小程序

启动小程序 最好现在uniapp中配置一下小程序的appid 否则可能会出现启动不了的情况
步骤：

1.微信公众平台查看自己的小程序id 开发 → 开发管理 → 开发设置 → 找到appid

2.在uniapp 中进行配置目录下的manifest.json → 微信小程序配置 → 填写小程序appid

3.目录结构

├── pages # 页面（每个页面可以作为一个文件）
├── static # 静态资源（图片、音视频）
├── unpackage # 打包文件
├── App.vue # 主文件（可以定义全局方法、样式、变量）
├── main.js # 入口（引入插件）
├── pages.json # 页面路由
├── package.json # npm相关文件
└── uni.scss # 常用于定义全局样式变量、第三方ui库的样式（插件）

1. pages

更多详细介绍：uni-app官网

每次想要在pages里新加一个页面都要在pages.json里配置一下

下面列举一些常用 style 配置项，一般情况下足以开发更多：uni-app官网

属性	类型	默认值	描述	平台差异说明
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色（同状态栏背景色），如"#000000"
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意	微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
disableScroll	Boolean	false	设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效	微信小程序（iOS）、百度小程序（iOS）
backgroundColor	HexColor	#ffffff	窗口的背景色	微信小程序、百度小程序、字节跳动小程序、飞书小程序、京东小程序

2. App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			getApp().getName()
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			getName(){
				console.log('我是奥特曼');
			}
		},
		globalData: {
			imageUrl: 'xxxx',
			platform: uni.getSystemInfoSync().platform
		},
	}
</script>
 
<style>
	
	/*每个页面公共css */
	.wh100 {
		width: 100%;
		height: 100%;
	}
 
	.flexC {
		display: flex;
		justify-content: center;
		align-items: center;
	}
 
	.flex {
		display: flex;
	}
 
	/*每个页面公共css */
</style>

一般常用在app.vue里面使用的 onLunch、globalData、style

1.onLunch 只会在进入程序的时候执行一次，一般搭配搭建或等获取微信公众号的code ，想要app.vue调取methods 的方法记得用 getApp.方法名( )

2.globalData：常用于定义一些公共的变量、例如图片路径资源、手机是否是ios 或安卓。使用：现在js中引入 1. import app from '@/App.vue' 2. platform: app.globalData.platform,

3.style 定义公共的全局样式例如垂直水平居中、布局、公共类目样式都可以定义

如果有功能不好去实现也可以去uniapp 的插件市场 DCloud 插件市场

原生小程序（扩展）：Vant Weapp - 轻量、可靠的小程序 UI 组件库

5. 页面生命周期

函数名	说明	执行时机	使用场景
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例	页面初始进入	只在初始化时使用一次
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面	每次进入	需要每次更新数据
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发	页面初始进入onLoad、onShow之后	更多根据搭配插件使用
onHide	监听页面隐藏	每次离开	更多于记录一些数据
onUnload	监听页面卸载	最后离开	卸载一些监听事件

onLoad 接受参数

页面1

toB(){
	uni.navigateTo({
		url:'/pages/index/b?name=奥特曼'
	})
}

页面2

onLoad(e) {
	console.log(e.name);
}

6. 组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期如果想要发送请求可以在子组件的生命周期去执行

函数名	说明	平台差异说明
beforeCreate	在实例初始化之前被调用。详见(opens new window)
created	在实例创建完成后被立即调用。详见(opens new window)
beforeMount	在挂载开始之前被调用。详见(opens new window)
mounted	挂载到实例上去之后调用。详见 (opens new window)注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用`$nextTick`Vue官方文档(opens new window)
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见(opens new window)	仅H5平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见(opens new window)	仅H5平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见(opens new window)
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见(opens new window)

7.底部导航

官方文档：uni-app官网

如果想要实现自定义底部导航可参考 UI库解决自定义切换闪动：微信小程序自定义tabbar 防止闪动

8.页面跳转

扩展页面栈 getCurrentPages() 的使用

页面栈：常用于获取当前页面之前的页面的参数及修改之前页面的数据

首选在A页面做一个 navigateTo 的跳转到B页面然后打印一下页面栈

	const pages = getCurrentPages()
	console.log(pages);

如果想要拿上一页面的值会采用拿到上页的页面参数

const pages = getCurrentPages()
console.log(pages[pages.length-2]);

h5端和小程序的参数是有一些区别的如果想要修改某个页面栈里的值只需要对象点就可以直接修改了

prevPage.title = 'hello World'  // h5 修改
prevPage.$vm.title='hello World' // 小程序修改

9. 上传图片 chooseImage

uni.chooseImage({
	count: 6, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		console.log(JSON.stringify(res.tempFilePaths));
	}
});

参数名	类型	必填	说明	平台差异说明
count	Number	否	最多可以选择的图片张数，默认9	见下方说明
sizeType	Array<String>	否	original 原图，compressed 压缩图，默认二者都有	App、微信小程序、支付宝小程序、百度小程序
extension	Array<String>	否	根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。	H5(HBuilder X2.9.9+)
sourceType	Array<String>	否	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
crop	Object	否	图像裁剪参数，设置后 sizeType 失效	App 3.1.19+
success	Function	是	成功则返回图片的本地文件路径列表 tempFilePaths
fail	Function	否	接口调用失败的回调函数	小程序、App
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

一般都是通过选择图片后拿到本地路径再上传到服务器获取服务器链接图片

uniapp 上传文件封装方法

10.弹窗

uni.showToast(OBJECT)

参数	类型	必填	说明	平台差异说明
title	String	是	提示的内容，长度与 icon 取值有关。
icon	String	否	图标，有效值详见下方说明。
image	String	否	自定义图标的本地路径（app端暂不支持gif）	App、H5、微信小程序、百度小程序
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false	App、微信小程序
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500
position	String	否	纯文本轻提示显示位置，填写有效值后只有 `title` 属性生效，有效值详见下方说明。	App
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

uni.hideToast() 隐藏弹框

uni.hideToast();

uni.showLoading(OBJECT)

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

参数	类型	必填	说明	平台差异说明
title	String	是	提示的文字内容，显示在loading的下方
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false	H5、App、微信小程序、百度小程序
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）