废话开篇：iOS 下的导航器是基于 UINavigationController 的，由它负责对控制的跳转逻辑。vue下是依托的是路由 router，当然这只是在网页的环境下，那么，uniapp 在移动端下进行页面跳转是通过 navigateTo 进行的，这儿需求值得说一下的是：uniapp 在页面进行跳转的过程中是处理了控制器之间的联系的，也就是说，每一个vue或者nvue，都会挂载到一个新的 UIViewController。

一、完成作用

封装一个播映器组件，那么，这儿需求用到 uni 的组件开发工具，能够到 uni组件开发文档下载。

由于是要做 UI 原生组件，那么 HbuilderX 在创立前端文件到时候就必须使用 .nvue 文件进行代码编写；在 iOS 原生库中要用 DCUniComponent 类来进行组件开发。

说了这么多，先看一下作用。

iOS 基于 uniapp 原生组件开发，原生部分如何处理Vue页面跳转。

这儿把过程拆开：

1、vue 界面中点击“进入视频概况” 由 vue 执行 uni.navigateTo 跳转到 iOS 原生播映器挂载的 nvue 界面。

gotoVideo(){
    uni.navigateTo({
	url:'./wslAVPlayer',
	success: res => {},fail: (error) => {
			},complete: () => {}
	   })
}

2、点击视频小屏播映功用按钮，uni 执行回退操作；并通过 iOS 原生将视频小屏展现在屏幕上，这儿放的是 keyWindow 上。

enterSmallScreen(){
	uni.navigateBack({
		delta:1,
		success: res => {},fail: (error) => {
		 },complete: () => {
		}
	})
}

3、点击小屏放大浏览功用按钮，进行正常界面播映展现。

二、完成过程中存在的问题

这儿需求先说一下，iOS 组件扩展类 DCUniComponent 和 功用扩展类 DCUniModule 都是能够和 uni 组件进行通讯的。可是，像上面的案例，在通过 uni 进行回退的时候，退回消失页面里面的原生组件及前端目标就会毁掉，即便 iOS 原生部分强持有视频播映器，可是与视频播映器进行交互的前端组件目标或许毁掉了，无法再承受消息了，或者说，即便通过什么办法能够进行交互，那么，再推出之前的页面，或许也会导致前端路由混乱。所以如果再想通过uni 进行页面跳转，那么就需求一个常驻前端通讯目标，在 uni 前端代码初始化开端的当地就进行常驻前端通讯目标初始化。那么，在进行小屏转正常播映的时，就用这个常驻前端通讯目标进行页面入栈操作。

三、创立前端常驻通讯目标

创立 WSLBaseModule 类，承继自 DCUniModule。

iOS 代码：

#import "WSLBaseModule.h"
#import "WSLStaticCustomConfig.h"
@interface WSLBaseModule()
//保存前端的回调
@property(nonatomic,copy) UniModuleKeepAliveCallback pushPlayerCallBack;
@end
@implementation WSLBaseModule
UNI_EXPORT_METHOD( @selector(shouldPushPlayerViewFunc:callback:))
//跳转到正常播映状态事情
- (void)shouldPushPlayerViewFunc:(NSDictionary *)options callback:(UniModuleKeepAliveCallback)callback
{
  [[NSNotificationCenter defaultCenter] addObserver:self selector: @selector(enterNormalScreenAction) name:enterNormalScreen object:nil];
  if (callback) {
    self.pushPlayerCallBack = callback;
  }
}
//承受正常播映通知
- (void)enterNormalScreenAction
{
  if (self.pushPlayerCallBack) {
    self.pushPlayerCallBack(@{}, YES);
  }
}

这儿别忘了在 info.plist 文件下添加对 iOS 原生目标和 uni 目标的映射联系

iOS 基于 uniapp 原生组件开发，原生部分如何处理Vue页面跳转。

uni 代码：

onLoad() {
    var baseModule = uni.requireNativePlugin("WSLBaseModule");
    //推出正常播映界面
    baseModule.shouldPushPlayerViewFunc(
			   {},
			   (ret) => {
			         uni.navigateTo({
			             	url:'./wslAVPlayer',
			             	success: res => {},fail: (error) => {
			             	},complete: () => {}
			   })
                       }
	          )
}

解释一下：

1、在 uni 工程的初始化界面下比如 APP.vue 里进行 WSLBaseModule 目标的初始化。在页面的 onload 办法里进行执行 shouldPushPlayerViewFunc 的操作，目的就是将回调传给原生并进行属性持有。

2、当小屏播映器被要求进行正常页面播映时，那么，就发一个通知，让 iOS 原生的 WSLBaseModule 目标执行回调属性，那么，uni 前端映射目标在特定时机就会调用 callback 推出正常播映视频视图了。

3、优化当地。uniapp 当推出正常播映界面时，原生这儿其实是能够将原播映数据，比如播映进展等信息回传给前端的，那么，就完成了无缝巨细屏切换的功用。

四、总结考虑

vue 如果仅仅是PC端而不是移动端的话，它会有一个大局目标，来共享信息，也很好理解，就好比我们都在一个 JS 运转环境下，那么，有什么不能说的呢？可是移动端下，就必须进行各种通讯，当然也能够理解为：我们都在 iOS 系统下，又有啥获取不到的呢？

这儿仅仅是个人理解，uniapp 组件开发感兴趣的朋友能够到官网下一个体会体会，有啥新的思路，希望我们指教。代码低劣，大神勿笑。