IOS&H5 mixed development Project Imitation app page Jump optimization

Preface: I was originally an iOS development engineer, but due to the rise of the current H5, the line blew a mixed development of the atmosphere, taking advantage of this strength, I also learned the front-end development, do not say the depth of research, but also capable of daily development work. To make a long story short, today's hybrid development should still be in the exploratory phase, our main project pages are made of Web pages, only some IM, pay, share, push, upload photos These are native features, we all know that the iOS native app experience has been very good, and now changed to hybrid development, There is no doubt that some of the iOS native user experience has been abandoned, and this is really unbearable as a developer who has always been a user experience, so we started experimenting with the goal of optimizing the user experience.

Optimize page Jump function

The pages in the app are commonly divided into two categories, one through navigation, a direct jump

1, the first kind of direct jump thinking is basically a new destination page, and then set the next page jump animation can also do a point of data initialization of the page:

1Valueinputview *valueview = [[Valueinputview alloc] Initwithnibname:@"Valueinputview"Bundle:[nsbundle Mainbundle]];2 3Valueview.Delegate=Self ;4 5 [Valueview setmodaltransitionstyle:uimodaltransitionstylecoververtical];6 7 [self Presentmodalviewcontroller:valueview animated:yes];8 9 //returnTen  One[Self dismissmodalviewcontrolleranimated:yes];

2, the use of Uinavigationcontroller, call Pushviewcontroller, to jump, the use of the pressure stack and the way out of the stack controller management. Call the Popviewcontrolleranimated method to return

Pickimageviewcontroller *ickimageviewcontroller = [[Pickimageviewcontroller alloc] init];[ Self.navigationcontroller pushviewcontroller:ickimageviewcontroller Animated:true];

And we in the page jump is very direct, a webview in the conversion of different URLs, it is obvious that the method presented to the user experience is very poor, so we have to find ways to optimize, the best solution is to imitate the original page jump. For this I looked at a lot of well-known apps, but I found that most of the mixed development of the app is only a few pages with the development of Web pages, and then webview on the page with the progress bar, so the user feel is not very abrupt, such as hungry or something. But this is obviously not applicable to our app, so what I was thinking is to do this, load a uiscrollview, and then add WebView on ScrollView, every click WebView the jump Inside, Generate a new WebView in the second screen location, and so on every time you enter a new page can be used in this way.

//initialize a page operation-(void) Initview{_scrollview= [[Uiscrollview alloc]initwithframe:cgrectmake (0, -, Kwidth, kheight- -)];_scrollview.backgroundcolor=[Uicolor whitecolor];_scrollview.contentsize= Cgsizemake ( -*kwidth, kheight); _scrollview.pagingenabled=yes;_scrollview.scrollenabled=no;_scrollview.bounces=NO;//Hide horizontal scroll bar_scrollview.showshorizontalscrollindicator=NO;//Hide vertical scroll bars_scrollview.showsverticalscrollindicator=No;_scrollview.contentoffset= Cgpointmake (0,0);//Create an initial webview_mywebview= [[UIWebView alloc]initwithframe:cgrectmake (0,0, Kwidth, kheight- -)];_mywebview.backgroundcolor=[Uicolor Graycolor];//I wrote the address.NSString*urlstring =@"http://www.baidu.com"Nsurl*url =[Nsurl urlwithstring:urlstring]; Nsurlrequest*request =[Nsurlrequest requestwithurl:url];_mywebview.scrollview.bounces=No;_mywebview.scalespagetofit=No;_mywebview.Delegate=Self ; [_mywebview Loadrequest:request]; [Self.scrollview Addsubview:_mywebview]; [Self.view Addsubview:_scrollview];//performing an interactive operation[self mutualocwithjs];}

//go to the next page-(void) nextweb{//Page Motion EffectCgpoint OffSet =Self.scrollView.contentOffset;//Create a WebView in a new pageUIWebView *webview = [[UIWebView alloc]initwithframe:cgrectmake (Offset.x+kwidth,0, Kwidth, kheight- -)];webview.backgroundcolor=[Uicolor Graycolor]; NSString*urlstring =_urlweb; Nsurl*url =[Nsurl Urlwithstring:urlstring];_lastoffset=Offset.x; Nsurlrequest*request =[Nsurlrequest requestwithurl:url];webview.scrollview.bounces=No;webview.scalespagetofit=Yes;webview.Delegate=Self ; [WebView Loadrequest:request]; [Self.scrollview addsubview:webview];offset.x+=Kwidth; [Self.scrollview Setcontentoffset:offset Animated:yes];//Write Dictionary[_webarray Addobject:webview]; [_urlarray Addobject:urlstring];_count++; [_webdict Setobject:_webarray[_count] forkey:_urlarray[_count];//[self startanimation];//performing an interactive operation[self mutualocwithjs];}

But the problem with this approach is that memory spikes and obviously need to be optimized, so I thought about adding two arrays to store the URLs and WebView of the newly opened pages, respectively.

// initializing arrays and dictionaries  == = [ nsmutabledictionary dictionary];[ _webdict Setobject:_webarray[_count] Forkey:_urlarray[_count];

When jumping to the first page of the channel, the array is emptied, and the current position is changed to the 0 position of ScrollView.

NSString *resultstr = [WebView stringbyevaluatingjavascriptfromstring:@"document.body.getAttribute (' data ')"];//page contains channel page home tagif(! [ResultStr isequaltostring:@""]) { for(inti =0; i<_count; i++) {[_webdict removeobjectforkey:_urlarray[0]]; [_webarray[0] stoploading]; [_webarray[0] Removefromsuperview]; [_webarray Removeobjectatindex:0]; [_urlarray Removeobjectatindex:0];} _count= _webarray.count-1;}

When the page returns, the last data of the array is removed,

//back to previous page-(void) lastweb{//Page Motion EffectCgpoint OffSet =Self.scrollView.contentOffset;if(offset.x==0) {return;} Offset.x-=Kwidth; [Self.scrollview Setcontentoffset:offset Animated:yes];//destruction of unused WebView[_webarray[_count] stoploading]; [_webarray[_count] removefromsuperview];//Delete Dictionary[_webdict Removeobjectforkey:_urlarray[_count]]; [_webarray Removeobjectatindex:_count]; [_urlarray Removeobjectatindex:_count];_count--; [Self MUTUALOCWITHJS];}

These two measures are effective in reducing memory loss, but also to ensure that the app page jump smooth transition, of course, if you want to be in the native app of the gesture right stroke back, we can also do this.

// swipe gesture -(void) Handleswipes: (Uiswipegesturerecognizer *) sender{if ( Sender.direction = = uiswipegesturerecognizerdirectionright) {[Self lastweb];}}

Of course, I just provide a way of thinking, and we are doing so, there may be better ideas, hope to add more, common progress.

IOS&H5 mixed development Project Imitation app page Jump optimization