Skip to content

Latest commit

 

History

History
483 lines (285 loc) · 6.8 KB

uniapp.md

File metadata and controls

483 lines (285 loc) · 6.8 KB

使用VUE3组合式API写法

克隆项目模板

国内的网速问题,所以,使用git去gitee克隆模板

git clone -b vite --depth=1 https://gitee.com/dcloud/uni-preset-vue.git
  • 使用vite分支
  • 只克隆最新的commit

初始化

使用yarn命令构建node_modles

使用H5模式开发

npm run dev:h5

view

使用<view>而不是<div>可以实现更多的功能,在移动端适配的时候,更加好

当子元素被点击的时候,不希望父元素起反应,使用阻止冒泡.

  • hover-class控制的是按下的时候,class

  • hover-stay-time可以控制松手之后的保留状态

text

文本应该放在<text>组件中,不能直接放在<view>中

  • 使用<text>包裹的内容可以被赋值,但是view不可以

使用selectable属性

界面跳转

使用<navigator>1</navigator>可以实现

界面需要先在pages.json文件中注册(类似router实现)

  • 当使用默认的跳转方式的时候,无法跳转到使用tabBar的界面

修改页面的标题内容

使用uni.setNavigationBarTitleAPI调用实现

使用API调用的方法实现跳转界面

	function goHome() {
		uni.navigateTo({
			url: '/src/pages/index/index'
		})
	}

注意,无法使用API调用的方式跳到一个tabBar中的页面中去

  • 使用uni.navigateBack可以实现回到上一个页面

底部导航栏

配置pages.json页面路由实现

  • 需要实现list数组,里面是对象

  • 使用的路由需要不适用@

  • icon可以使用例如iconfont等

  • 不支持SVG

子路由tabBar

	"tabBar": {
		"list": [{
			"pagePath": "pages/index/index",
			"text": "home",
			"iconPath": "/static/icon/home.png",
			"selectedIconPath": "/static/icon/home_selected.png"
		}, {
			"pagePath": "pages/file/file",
			"text": "file",
			"iconPath": "/static/icon/file.png",
			"selectedIconPath": "/static/icon/file_selected.png"
		}, {
			"pagePath": "pages/user/user",
			"text": "user",
			"iconPath": "/static/icon/user.png",
			"selectedIconPath": "/static/icon/user_selected.png"
		}],
		"color": "#8a8a8a",
		"selectedColor": "#FFC0CB"
	}

  • 只有被配置在tabBar中的pages是有tabBar的

  • 存在iconPath和selectedIconPath两中icon的路径

跳转到tabBar的page

		uni.switchTab({
			url: '/pages/home/home'
		})

信息显示

使用uni的API实现相关的功能

	uni.showToast({

	})

取消信息显示

使用uni.hideXXX实现

显示加载信息

使用showLoading实现

  • 一般需要使用mask

显示可交互的信息

使用showModel实现

从底部弹出的菜单

使用showActionSheet

数据缓存

使用API实现

uni.setStorageSync()

获取的时候

uni.getStorageSync()

删除的时候

uni.removeStorageSync()

发送请求

使用API实现

	uni.request({
		url: "https://jsonplaceholder.typicode.com/posts",
		success: (res) => {
			console.log(res);
		}
	})
  • 使用method参数实现修改请求类型

预览图片

使用previewImageAPI实现

hook function

使用onReachBottom实现触底加载更多

使用enablePullDownRefresh刷新,然后在界面中使用onPullDownRefresh实现下拉的时候的操作(发送网络请求更新界面)

  • 需要手动停止下拉刷新

使用扩展组件

安装拓展组件插件的时候出现问题,缺少SASS

使用yarn安装

使用MD5加密

参考博客https://blog.csdn.net/ksws01/article/details/128293383

yarn add js-md5 -D

直接使用导入包的形式使用

使用拓展组件的弹出层

使用VUE3组合API写法的时候,需要定义好

const popup = ref(null); // 创建一个引用
	<view>
		<uni-popup ref="popup" type="message">
			<uni-popup-message type="error" :duration="2000">
				error info
			</uni-popup-message>
		</uni-popup>
	</view>

定义组件

popup.value.open('top'); // 使用.value来访问引用的实例

使用组件

文件传输

使用uni的扩展组件实现效果

<template>
	<view>
		<uni-file-picker :auto-upload="false" del-icon="" file-mediatype="image" mode="list" v-model:value="files.value"
			@select="select">
			<view class="file-picker">
				<uni-icons type="cloud-upload" size="100rpx"></uni-icons>
				<text>click to upload file</text>
			</view>
		</uni-file-picker>
		<button @click="upload" type="primary">upload</button>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';

	const files = reactive({
		value: '',
		fileList: []
	});
	const select = (file) => {
		files.value = file;
		// add file to fileList
		files.fileList.push(file);
	}

	function upload() {
		const fileList = files.fileList;
		// upload fileList
		// for every file in fileList
		fileList.forEach((file) => {
			// upload file
			uni.uploadFile({
				url: 'http://192.168.101.7:5000/file/upload',
				name: 'file',
				filePath: file.tempFilePaths[0],
				success: () => {
					console.log('sucess');
				}
			});
		});
	}
</script>

<style>
	.file-picker {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 150rpx;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
		margin: 20rpx;
	}
</style>
  • 需要手动实现select函数
  • 需要使用tempFilePaths,文件上传的时候信息才是完整的

使用摄像头

<template>
	<view>
		<camera style="width: 220px;height: 220px; border-radius: 50%;" device-position="front" flash="off"
			@error="error"></camera>
	</view>
</template>

<script setup>
	function takePhoto() {
		const ctx = uni.createCameraContext();
		ctx.takePhoto({
			quality: 'high',
			success: (res) => {
				console.log(res)
				src = res.tempImagePath //获取到的画面信息
			}
		});
	}

	function error(e) {
		console.log(e.detail);
	}
</script>

微信小程序运行v-if

可以同时使用""和''保存字符

复杂对象的引用

对于数组使用ref

跨界面传输数据

使用uni的API

发送数据的

		uni.navigateTo({
			url: "/pages/orderManagement/orderManagement",
			success: (res) => {
				uni.$emit("update", {
					tag: "all"
				})
			}
		})

接受数据的

	uni.$on('update', (data) => {
		console.log('监听到事件来自 update ，携带参数 tag 为：' + data.tag);
	})
  • 使用setIntervale避免丢失
	function goToLogin(type) {
		let counter = 0
		const interval = setInterval(() => {
			counter++
			if (counter > 3) {
				clearInterval(interval)
			}
			uni.$emit("type", {
				"type": type
			})
		}, 1000)
		uni.navigateTo({
			url: '/pages/login/login',
		})
	}

Props使用默认值

const props = defineProps({
	tags: Array,
	contents: Array,
	initIndex: {
		type: Number,
		default: 0
	}
})