uniapp中pages.json相关介绍、数据绑定及生命周期

浅浅的花香味﹌ 2023-07-11 12:53 12阅读 0赞

### pages.json中相关代码介绍 ###

**uniapp中tabBar 的设置：**  
在pages.json中设置tabBar “[ 点击（查看相关用法）][Link 1]”  
相关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": "接口"
        }]
    }

tabBar 中的list数组顺序的调整可以改变显示的位置  
pages.json代码中的navigationBarTitleText表示为：若首页未设置title则默认显示为uni-app

"globalStyle": {
    		"navigationBarTextStyle": "black",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#F8F8F8",
    		"backgroundColor": "#F8F8F8"
    	}

**在pages.json中pages数组中第一项表示应用启动页**

"pages": [ 
    		{
    			"path": "pages/index/index",
    			"style": {
    				"navigationBarTitleText": "首页"
    			}
    		}
    		,{
    					"path" : "pages/news/news",
    					"style" : {
    						"navigationBarTitleText": "新闻"
    					}
    			}
    			,{
    					"path" : "pages/test/test",
    					"style" : {
    						"navigationBarTitleText": "测试"
    					}
    			}
        ],

当前这段pages数组的代码启动页为首页，若想要将新闻页作为启动页只需将新闻页与首页交换位置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70]  
***结论：通过调整pages的顺序可以控制初始化显示的位置***  
**main.js**是uni-app的入口文件  
**App.vue**是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件,是一个应用配置，用来配置App的全局样式以及用来监听应用的生命周期  
可以在vue文件中的onLoad函数中定义uni方法

onLoad() {
    			// uni.$on("testEmit",(rel)=>{
    			// 	console.log(rel)
    			// });
    			uni.$once("testEmit",(rel)=>{
    				console.log(rel)//只会被调用一次
    			})
    		},

### 数据绑定 ###

小程序中可以写为`<view :class="box{ {1}}">test</view>`可以运行但在HX中会提示错误  
uni中写为`<view :class="'box'+1">test</view>`

以上代码在微信开发者工具中查看为：  
![在这里插入图片描述][20200306143629544.png]  
**绑定多个class 以数组的形式（注意外用双引则内用单引）**

### 遍历数组 ###

（在script中定义names数组）

### 动态的切换class（样式可自行添加） ###

**script中的代码段：**

methods: {//点击切换
    	setIndexNum(index){
    		this.cu=index;
    }

**v-show="flase"相当于display:none 属性  
v-if="flase"相当于删除该元素**

## 生命周期 ##

### 应用生命周期 ###

在App.vue文件中代码如下：

**onLaunch**  
onLaunch中option用来获取进入小程序或退出小程序的场景值可在网页打印处（console）查看

![在这里插入图片描述][20200306151920572.png]  
场景值显示为1001（表示进入了小程序）；点击微信开发者工具中退出按钮时可查看场景值  
![在这里插入图片描述][20200306200552650.png]  
点击该按钮后出现一下场景：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70 1]  
\*\*onLoad监听用户进入小程序  
onHide监听用户离开小程序  
onError 当 uni-app 报错时触发  
onUniNViewMessage 对 nvue 页面发送的数据进行监听  
\*\*

### 页面生命周期 ###

*  onLoad 监听页面的加载
 *  onShow 当 uni-app 启动，监听用户进入小程序
 *  onReady 页面加载（执行一次）
 *  onHide 监听页面隐藏（页面进入离开 执行多次）
 *  onUnload 监听页面卸载
 *  onResize 监听窗口尺寸变化
 *  onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新（需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中将enablePullDownRefresh设置为true。）
 *  onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
 *  onTabItemTap 点击 tab 时触发
 *  onShareAppMessage 当用户点击右上角分享时触发
 *  onPageScroll 监听页面滚动
 *  onNavigationBarButtonTap 监听原生标题栏按钮点击事件
 *  onBackPress 监听页面返回
 *  onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件
 *  onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
 *  onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件  
    （可自行测试）

### 组件生命周期函数 ###

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同  
在自定义组件中写

*  beforeCreate 在实例初始化之后被调用
 *  created 在实例创建完成后被立即调用
 *  beforeMount 在挂载开始之前被调用
 *  mounted 挂载到实例上去之后调用
 *  beforeupdate 数据更新时调用
 *  updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
 *  beforeDestory 实例销毁之前调用。
 *  destoryed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。  
    [详解][Link 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70 2]

[Link 1]: https://uniapp.dcloud.io/collocation/pages?id=tabbar
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200306095854762.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg==,size_16,color_FFFFFF,t_70
[20200306143629544.png]: https://img-blog.csdnimg.cn/20200306143629544.png
[20200306151920572.png]: https://img-blog.csdnimg.cn/20200306151920572.png
[20200306200552650.png]: https://img-blog.csdnimg.cn/20200306200552650.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200306152032811.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg==,size_16,color_FFFFFF,t_70
[Link 2]: https://cn.vuejs.org/v2/api/#created
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200306161905967.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg==,size_16,color_FFFFFF,t_70