Uniapp（Vue3）

开发环境配置

HBuilder、模拟器（安卓、IOS、微信小程序、抖音小程序……）

组件

view和text常用视图容器组件

view 类似 div,text类似text

属性：如果想可复制只能用 text,并且加属性selectable

scroll-view可滚动视图区域组件

scroll-y 纵向

scroll-x 横向,需要设置CSS 不自动换行，white-space: nowrap同时display 设置为行级元素（行内块）display: inline-block;

.swiper滑块视图容器的用法

就是轮播图，指示点：indicator-dots 衔接滑动：circular具体属性看文档

navigator路由与页面跳转

open-type="redirect" 关闭当前页面，跳转到应用内的某个页面

open-type="reLaunch" 关闭所有页面，打开到应用内的某个页面

.常用的表单组件button和input

button 和input 和 elementplus差不多，根据文档写即可

Vue3的知识（API）

uniapp全局文件配置

响应式单位rpx

自动适配屏幕尺寸，基准750

pages.json页面路由

全局配置

navigationBarTitleText 页面的优先于总的

下拉刷新 enablePullDownRefresh 开启配置为true，这是一个生命周期

触底更新 onReachBottomDistance 默人为 50 越大越早，使用需要在需要的页面中引入 onReachBottom，单位只支持px。 这是一个生命周期

页面配置

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": { ... }
        }, {
            "path": "pages/login/login",
            "style": { ... }
        }
    ]
}

needLogin是否需要登录才能访问，默认 false

tabBar

注意统一颜色，

"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": "接口"
	}]
}

一些自动引入插件

……

API调用

showToast 反馈

showToast 反馈，loading

markets:""

markets:[]

showLoading加载和showModal模态框

https://uniapp.dcloud.net.cn/api/ui/prompt.html#showloading

showLoading搞加载的

showModal 确定取消的 配置很多 可以搞恶心人的弹窗广告（选择确定 或者 取消）,可以用来做 from 提交内容 editable

showActionSheet

向上弹窗（可设置多个，一般可以用单选？或者模型的选择阿巴阿巴）

setNavigationBarTitle

一般用于详情页

例子：

uni.setNavigationBarTitle({
	title: '新的标题'
});

hideHomeButton

uni.hideNavigationBarLoading()

加上可以隐藏小程序的返回首页的那个小房子

setTabBar设置

动态设置 tabBar 某一项的内容

uni.setTabBarItem({
  index: 0,
  text: 'text',
  iconPath: '/path/to/iconPath',
  selectedIconPath: '/path/to/selectedIconPath'
})

显示与隐藏 tabBar

uni.hideTabBar 隐藏、uni.showTabBar 显示

tabBar右上角加文本 setTabBarBadge

可以搞讨厌的小红点，一般加到入口 app.vue里面

下拉刷新API

{
    "pages": [
        {
        	"path": "pages/index/index",
        	"style": {
        		"navigationBarTitleText": "uni-app",
        		"enablePullDownRefresh": true
        	}
        }
    ],
    "globalStyle": {
    	"navigationBarTextStyle": "white",
    	"navigationBarBackgroundColor": "#0faeff",
    	"backgroundColor": "#fbf9fe"
    }
}

// 仅做示例，实际开发中延时根据需求来使用。
export default {
	data() {
		return {
			text: 'uni-app'
		}
	},
	onLoad: function (options) {
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		console.log('refresh');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
}

页面和路由

uni.navigateTo保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面

uni.redirectTo关闭当前页面，跳转到应用内的某个页面。

uni.reLaunch关闭所有页面，打开到应用内的某个页面。

uni.navigateBack关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

数据缓存

https://uniapp.dcloud.net.cn/api/storage/storage.html

uni.setStorage将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

uni.setStorageSync同步 直接用即可，一般都用同步

try {
	uni.setStorageSync('storage_key', 'hello');
} catch (e) {
	// error
}

removeStorageSync从本地缓存中同步移除指定 key

try {
	uni.removeStorageSync('storage_key');
} catch (e) {
	// error
}

网络请求

uni.request 三种方式

<script setup>	
import {ref} from "vue";
let arrs = ref([])
/*
function request(){
	uni.request({
		url:"https://jsonplaceholder.typicode.com/posts",
		success:res=>{
			console.log(res);
			arrs.value = res.data 
		}
	})
}
*/

/*
function request(){
	uni.request({
		url:"https://jsonplaceholder.typicode.com/posts"
	}).then(res=>{
		arrs.value = res.data 
	})
}
*/

async function request(){
	let res = await uni.request({
		url:"https://jsonplaceholder.typicode.com/posts"
	})	
	arrs.value = res.data 
}



request();

</script>

详细参数：

function request(){
	uni.showLoading()
	uni.request({
		url:"https://jsonplaceholder.typicode.com/posts",
		data:{
			id:5
		},
		header:{
			token:"adfadsfadsf",
			"content-type":"application/x-www-form-urlencoded"
		},
		method:"post",
		timeout:15000,
		success:res=>{
			console.log(res);			 
		},
		fail:err=>{
			console.log("超时");
			console.log(err);
		},
		complete:()=>{
			uni.hideLoading()
		}
	})
	
}