uniapp你真的会了吗？_uni.onapproutedone-优快云博客

本文链接：https://blog.youkuaiyun.com/sct_123/article/details/139871771

概绪：这篇文章主要总结一下，我开发uniapp以来遇到的问题已经解决方案。可能遇到了很多问题，但是没想起来，想到什么就记一下。先写几个比较基础经典的新手级别问题。

1.弹出层页面穿透滚动怎么解决？

2.微信小程序开启全局分享

在App.vue的头上加以下配置。

// #ifdef MP  
		/**
		  * 全局分享配置，页面无需开启分享
		  * 使用隐式页面函数进行页面分享配置
		  * 使用隐式路由获取当前页面路由，并根据路由来进行全局分享、自定义分享
		  */
		 //获取页面配置并进行页面分享配置
		 var PageTmp = Page
		 Page = function (pageConfig) {
		   //1. 获取当前页面路由
		   let routerUrl = ""
		   wx.onAppRoute(function (res) {
		     let pages = getCurrentPages(),
		       view = pages[pages.length - 1];
		     routerUrl = view.route
		   })
		 	
		   //2. 全局开启分享配置
		   pageConfig = Object.assign({
		     onShareAppMessage: function () {
		       //分享给朋友
		       //根据不同路由设置不同分享内容（微信小程序分享自带参数，如非特例，不需配置分享路径）
		       let shareInfo={
		       	url:"/pages/index/index"
		       }
		       return shareInfo
		     },
		     onShareTimeline: function () {
		       //分享至朋友圈
		       let shareInfo={
		 				url:"/pages/index/index"
		 			}
		      
		       
		       return shareInfo
		     }
		   }, pageConfig);
		   // 配置页面模板
		   PageTmp(pageConfig);
		 }
		// #endif

3.ios适配的底部安全区域
manifest.json加上以下配置。
在这里插入图片描述

 "safearea" : {
            //安全区域配置，仅iOS平台生效  
            "bottom" : {
                // 底部安全区域配置  
                "offset" : "auto" // 底部安全区域偏移，"none"表示不空出安全区域, "auto"自动计算空出安全区域，默认值为"none"  
            }
        },

在使用弹出层和fixed布局时加上样式

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

4.页面间传递数据
这里有几种方案用vuex状态管理、storger缓存判断、EventChannel页面传递监听事件、uni.$emit全局事件。我常用的是EventChannel，可以很好的解决数据传递，并且结构清晰。但多层次页面就不适合，会传递地域还是用别的解决方案。

//a页面跳转b
uni.navigatorTo({
	url:"pages/b/b",
	events:{
		//监听页面传递的时间
		success:(data)=>{
			doSomething(data);//处理传递过来的数据
		}
	}
})

//b页面发起事件
onLoad(){
	const eventChannel = this.getOpenerEventChannel();
	this.eventChannel = eventChannel;
},
methods:{
	putData(){
		//启用静态事件
		this.eventChannel.emit('success',{msg:'成功',code:200})
	}
}

官方文档还有其他事件的使用：https://uniapp.dcloud.net.cn/api/router.html#event-channel

5.视图更新不同步

这个问题在vue中也是会遇到的，比较基础的操作。一般情况下触发在数组对象的更新上不会变动。
比如我有个二维数组对象。然后我只改动数组里的对象的一个属性，这时视图可能不会更新到深层，他判断了对象的地址没变就当做你没变了。可以用一下几个方法了解决。

//1.一维数组和对象视图不更新 放最后
this.$forceUpdate()

//2.回调里更新不同步 使用异步操作来让视图异步更新 
this.$nextTick(=>{
	//do update data something.
	//这里也可以配合第一个方法一起使用放后面
	//this.$forceUpdate()
})

//3.通过 $set()+ $forceUpdate() 更新多维数组中的一个值
//例如 我要更新一个省市区列表的值
code[2] = i2;
this.$set(this.selectList, selectList);
this.$set(this.code, code);
this.$forceUpdate();

6.uniapp怎么实现的多端不同代码

这里主要是通过uniapp定义的一个标识符来表示你某端代码是哪一端的代码。例如：

//ifdef 和endif配套使用   可以通过MP APP 等指定是哪一端的代码来实现多端配置
// #ifdef MP-WEIXIN

// #endif
// ifndef 顾名思义 除了不是这个端的其他端都可以使用 这在这里也可以使用 || 进行多个端的同步代码
// #ifndef APP

// #endif