uni-app相关知识点

适合新手阅读的 uni-app 知识

一、uniapp怎么进行路由跳转？

二、配置tabbar（底部导航栏），在pages.json里面配置

tabbar，小程序的tabbar

"tabBar":{
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/img/shouye.png",
				"selectedIconPath": "static/img/shouye1.png",
				"text": "首页"
			}, {
				"pagePath": "pages/dong/dong",
				"iconPath": "static/img/dongtai.png",
				"selectedIconPath": "static/img/dongtai1.png",
				"text": "动态"
			},
			{
				"pagePath": "pages/xiao/xiao",
				"iconPath": "static/img/dibudaohanglan-.png",
				"selectedIconPath": "static/img/dibudaohanglan-1.png",
				"text": "消息"
			},
			{
				"pagePath": "pages/my/my",
				"iconPath": "static/img/wode.png",
				"selectedIconPath": "static/img/wode1.png",
				"text": "我的"
			}]
}

三、导航标题

"pages" : [
        //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path" : "pages/index/index",
            "style" : {
                "navigationBarTitleText" : "uni-app" //顶部导航标题
            }
        },
        {
            "path" : "pages/info/info",
            "style" : {
				 // "navigationBarTitleText" : "新闻"  //如果没有设置，那么顶部导航标题为 uni-app
			}
        }
    ],

四、请求接口

在项目那边新建一个文件夹utils，在里面新建request.js文件。

let request = function (url,data={},method="GET"){
			
	return new Promise((resolve,reject)=>{
		uni.showLoading({
		  title: '加载中',
		 })
		uni.request({
			url:'http://ceshi2.dishait.cn/api/v1/'+url,
			data,
			method,
				  header:{
				    "token":uni.getStorageSync("token")
				   },
			success:(res)=>{
				resolve(res)
			},
			fail:(res)=>{
				reject(res)
			},
			complete: () => {
			    uni.hideLoading();
			   }
		})
	})
}

module.exports={
  request:request
}

根据自己的需求来配置地址，然后再把封装好的方法给导出来，在需要的组件中引入，然后就可以请求接口了。

五、 生命周期都有哪些

uni-app 完整支持 Vue 实例的生命周期　　同时还新增 应用生命周期 及 页面生命周期。

1.应用生命周期
1.1. onLaunch 当uni-app 初始化完成时触发（全局只触发一次）
1.2. onShow 当 uni-app 启动，或从后台进入前台显示
1.3. onHide 当 uni-app 从前台进入后台
1.4. onError 当 uni-app 报错时触发

２.页面生命周期
2.1. onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
2.2. onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
2.3. onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
2.4. onHide 监听页面隐藏
2.5. onUnload 监听页面卸载
2.6. onResize 监听窗口尺寸变化
2.7. onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新，参考示例
2.8. onReachBottom 页面上拉触底事件的处理函数

六、nvue的使用

1. 不用写display:flex; 自动就是flex布局，但是自动加入了flex-derection:column,需要自己覆盖修改
2. 没有%，最好通过获取屏幕宽度动态绑定宽度
3. border不能简写，分成border-style,border-color,border-width(border-top)
4. 文字显示和绑定只能通过text标签绑定
5. nvue向vue页面传输许多数据并跳转时，可以使用仓库储存，在onUnload时清空(判断对象是否为空。
6. JSON.stringify(data)==’{}’)
7. swiper的很多属性不能使用，duration，previous-margin，display-multiple-items等属性

转载自 https://blog.csdn.net/weixin_47454615/article/details/110670678