uni-app笔记

uni-app

各种方法在API里找，拨打电话等…

各种组件在组件里找

js等文件配置在全局文件里找，底部导航栏等…

编译语法在教程找

• view - div:view标签不能拷贝文字内容。

• text - span

• navigator - a

• scroll-view - 区域滚动，webview渲染的页面中，区域滚动的性能不及页面滚动。

• scroll-view - 区域滚动，webview渲染的页面中，区域滚动的性能不及页面滚动。

  • 纵向滑动：<scroll-view scroll-y> 子元素 </scroll-view>

  • 横向滑动：<scroll-view scroll-x> 子元素</scroll-view>，样式设置子元素为display: inline-block;，父元素设置white-space: nowrap;

• swiper - 轮播图

uniapp页面生命周期

• onLoad(e) – setup/Created，只有onLoad()能拿到页面路由参数

• onShow()

• onReady() – onMounted，只有onReady()才能获取到dom节点

uniapp像素单位rpx

以750为基准

全局样式

全局组件样式(直接应用)：

在common文件夹下创建样式文件@/common/style/common-style.scss(css/scss/less)，然后在App.vue用@import导入到<style></style>中

<style>
@import "@/common/style/common-style.scss"
</style>

uni.scss：

项目自带颜色样式，可直接使用，也可在此文件创建新颜色样式。如background: $uni-color-primary

全局颜色字体样式(需要自行使用)：

在common文件夹下创建样式文件@/common/style/base-style.scss,然后在uni.scss中引入

1. 修改字体等直接用color:$变量名
2. 修改uni-icons字体图标组件时，需要用到vue的:deep深度选择器

:deep(){
	.uni-icons{
		color:$brand-theme-color !important;	// !important表优先级最高，高于默认的行内样式
	}
}

插件

• vite.config中安装插件unplugin-auto-import自动导入vue和uniapp的生命周期、函数等

npm i unplugin-auto-import

//在vite.config.js中引入

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
	plugins: [
		uni(),
		//自动导入配置
		AutoImport({
			imports: [
				//预设
				'vue',
				'uni-app'
			]
		})
	]
})

扩展组件uni-ui

登录uniapp账号后直接按需下载相应组件，下载完项目根目录有uni_modules文件夹

网络请求的三种处理方式

//1.success里对返回结果进行处理，易产生回调地狱
function request(){
	uni.request({
		url:"https://jsonplaceholder.typicode.com/posts",
		success:res=>{
			console.log(res);
			arrs.value = res.data 
		}
	})
}

//2.使用.then对返回结果进行处理
function request(){
	uni.request({
		url:"https://jsonplaceholder.typicode.com/posts"
	}).then(res=>{
		//处理返回结果
		arrs.value = res.data 
	})
}

//3.异步操作同步化
const request = async () => {
	const res = await uni.request({
		url:"https://jsonplaceholder.typicode.com/posts"
	})
	//处理返回结果
	arrs.value = res.data
}

异步同步化错误处理：

使用

try{
	const request = async () => {
		const res = await uni.request({
			url:"https://jsonplaceholder.typicode.com/posts"
		})
		//处理返回结果
		arrs.value = res.data
	}
}catch(err){
 console.log(err)
}

包裹异步同步化语句

微信开发者工具跳转到指定页面

• 到编译模式里设置相关页面路径即可

下拉刷新实现

下拉刷新利用生命周期钩子onPullDownRefresh()

使用前要在pages.json开启配置：

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
• 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。一般在finally里调用uni.stopPullDownRefresh

相关api：

uni.startPullDownRefresh(OBJECT):相当于手动下拉刷新

uni.stopPullDownRefresh()

加载更多字样：在列表尾部加扩展组件

<uni-load-more status="loading"></uni-load-more>

底部安全区域

env(safe-area-inset-bottom)：移动端设置，可防止触摸无效等。

可设置为height:env(safe-area-inset-bottom);,padding-bottom:env(safe-area-inset-bottom);

条件编译

• 条件编译处理多端差异，处理跨端兼容。

条件编译写法	说明
#ifdef APP-PLUS 需条件编译的代码 #endif	仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif	除了 H5 平台，其它平台均存在的代码（注意if后面有个n）
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif	在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）

适用于html和css，通过注释方式进行编译

//html：
<!-- #ifdef APP -->
条件编译标签					
<!-- #endif -->

//css:
/* #ifdef APP */
条件编译样式	
/* #endif */

例子：

//小程序时
<!-- #ifdef MP -->
<button open-type="contact"></button>
<!-- #endif -->

//不是小程序时
<!-- #ifndef MP -->
<button></button>
<!-- #endif -->

元素顶到状态栏问题

全屏时，元素顶到状态栏时解决：

在元素前设置一个空盒子，通过API uni.getSystemInfoSync()获取到状态栏高度statusBarHeight,然后给空盒子设置高度，使空盒子顶下占用到状态栏的元素

触底刷新

1. 使用API onReachBottom()

2. 插件z-padding

正在加载提示

1. 初始进入页面的正在加载

​ 使用uni-load-more拓展组件，根据有无数据进行条件渲染v-if

<view class="loadingLayout" v-if="!classList.length">
	<uni-load-more status="loading"></uni-load-more>
</view>

2. 下拉触底的正在加载

​ 加载完后需要现实没有更多数据:status="noData?'noMore':'loading'"

<view class="loadingLayout" v-if="classList.length || noData">
	<uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
</view>

本地缓存

同步地

uni.setStorageSync("storageList",List)

Donate