The beginning of the nonsense:iOSThe next navigator is based onUINavigationControllerIt is responsible for the jump logic to control.vueIt depends on routingrouterOf course, this is only in the context of web pages, so,uniappYes Yes Yes Yes Yes Yes YesnavigateToWhat is going on here is worth mentioning:uniappThe relationship between controllers is handled as the page jumps, that is, each onevueornvueAnd will mount to a new oneUIViewController.

One, achieve the effect

Encapsulate a player component, so here you need to use uni component development tools, which can be downloaded from uni Component Development documentation.

As a UI native component, HbuilderX must use.nvue files for coding when creating front-end files; The DCUniComponent class is used for component development in the iOS native library.

Having said that, let’s take a look at the effect.

Here’s the breakdown:

NavigateTo navigateTo the nvue interface mounted by iOS native player.

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

2. Click the video small-screen playback function button, and UNI performs the rollback operation; And display the video on a small screen native to iOS, in this case on keyWindow.

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

3. Click the small screen to enlarge and browse the function button to play and display the normal interface.

Two, the problems existing in the implementation process

Both the iOS component extension DCUniComponent and the functionality extension DCUniModule can communicate with UNI components. However, as in the example above, the native components and front-end objects in the vanishing page will be destroyed during the rollback through UNI. Even though the native part of iOS strongly holds the video player, the front-end component objects interacting with the video player may be destroyed and no longer receive messages, or, Even if the interaction is possible by any means, pushing back to the previous page can cause front-end routing chaos. So if you want to jump to a page through UNI, you need a resident front-end communication object, which is initialized at the beginning of uni front-end code initialization. Then, in the small screen to normal playback, the resident front-end communication object is used for page pushing operation.

Create front-end permanent communication objects

Create a WSLBaseModule class that inherits from DCUniModule.

The iOS code:

#import "wslStaticCustomconfig. h" @interface WSLBaseModule() // Save the front-end callback @property(nonatomic,copy) UniModuleKeepAliveCallback pushPlayerCallBack; @ end @ implementation WSLBaseModule UNI_EXPORT_METHOD (@ the selector (shouldPushPlayerViewFunc: callback:)) / / jump to normal play of the event - (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); }}Copy the code

Don’t forget to add the mapping between iOS native objects and UNI objects in the info.plist file

Uni code:

onLoad() {
    var baseModule = uni.requireNativePlugin("WSLBaseModule");
    // Launch normal playback interface
    baseModule.shouldPushPlayerViewFunc(
			   {},
			   (ret) = > {
			         uni.navigateTo({
			             	url:'./wslAVPlayer'.success: res= > {},fail: (error) = >{},complete: () = >{}})})}Copy the code

Explain:

1. Initialize WSLBaseModule objects in uni project initialization interface such as app. vue. ShouldPushPlayerViewFunc in the onload method of the page to pass the callback to the native and hold the property.

When a small screen player is asked to perform a normal page playback, a notification is sent to the iOS native WSLBaseModule object to perform the callback property, and the UNI front-end mapping object will call callback at any given moment to push the normal video playback view.

3. Optimize the place. When uniApp launches the normal playing interface, it can actually send the original playing data, such as playing progress and other information back to the front end, so it realizes the function of seamless screen switching.

Fourth, summary thinking

Vue has a global object to share information with if it is only PC, not mobile, as if everyone is running in a JS environment. So, what can’t be said? However, under the mobile terminal, all kinds of communication must be carried out. Of course, it can also be understood as: everyone is under the iOS system, what can not get?

Here is only personal understanding, uniAPP component development interested friends can go to the official website to experience the next experience, any new ideas, I hope you give me advice. Don’t laugh at bad code.