uniapp基础

1.项目初始化

新建-项目-uniapp项目
目录结构：https://uniapp.dcloud.net.cn/tutorial/project.html
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─uni_modules 存放uni_module

├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─pages.json 配置页面路由、导航条、选项卡等页面类信息
├─manifest.json 配置应用名称、appid、logo、版本等打包信息

2.页面

pages目录下的界面都需要在pages.json配置
底部导航栏也在这里配置

• pages.json

 "pages": [
	{
		"path": "pages/login",
		"style": {
		  "navigationBarTitleText": "登录"
		}
	}, 
  ],
 "tabBar": {
    "color": "#000000",
    "selectedColor": "#000000",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/home",
        "iconPath": "static/images/tabbar/home.png",
        "selectedIconPath": "static/images/tabbar/home-s.png",
        "text": "首页"
      }]
  }

2.1 vue2和vue3写法

• vue2

<script>
	// 1. 导入组件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	export default {
		components: { uniRate } // 2. 注册组件
	}
</script>

• vue3

<script setup>
	// 1. 导入组件
	import uniRate from '@/components/uni-rate/uni-rate.vue';
</script>

3.单页面生命周期

3.1 顺序

• 1.根据pages.json创建界面
• 2.创建template的静态Dom。
• 3.onLoad函数：不能修改dom，可以修改data
• 4.onReady:页面渲染完毕，可以操作ref

3.2 其他生命周期函数

• onShow：监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
• onHide：监听页面隐藏
• onTabItemTap: 您点击了“导航”页...

onLoad: function() {
	this.getList();
},
methods: {}

4.原生组件 https://uniapp.dcloud.net.cn/component/

• view: 类似div

5.组件库

使用了uView2，感觉不错。
https://uviewui.com/components/intro.html

6.API

6.1 路由 https://uniapp.dcloud.net.cn/api/router.html

• navigateTo：pages.json中"pages"中配置的页面

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

• switchTab：pages.json中"tabBar"中配置的页面
• redirectTo: 关闭当前页面

6.2 缓存

• setStorageSync(KEY,DATA)
• getStorageSync(KEY)
• removeStorage(Key)