The H5 and native app interaction method

App Call H5 function (1) sign-in function-----------Adjust login page of App

Action: Click on the "Go to Login" button on the H5 page, execute the Applogin function, detect if the Window object has WebViewJavascriptBridge attributes, or iOS; window has an ANDROID object, that is, Android. Perform the actions in the corresponding environment, respectively.

Applogin () {    var bridge = window. Webviewjavascriptbridge;    var android = window. ANDROID;    if (!! Bridge) {        bridge.callhandler (' Getaccesstoken ', null, NULL);    } else if (!! Android) {        android.didclickloginfromwebview ();    }}

　　

 (2) Login function--callback to H5 page after login

• Set global functions (because iOS uses stringbyevaluatingjavascriptfromstring as a synchronous method, so it's best to use settimeout as a delay)
  • Reference explanation: Stringbyevaluatingjavascriptfromstring is a synchronous method, using it to execute the JS method, if the JS method is more expensive, it will cause the interface lag. Especially when JS pops up alert. Alert also blocks the interface and waits for the user to respond, while stringbyevaluatingjavascriptfromstring waits for the JS execution to return. This creates a deadlock. The official recommendation is to use Wkwebview's Evaluatejavascript:completionhandler: Instead of this method.
    In fact, we also have another way of customizing a method that delays the execution of alert to prevent blocking, and then we call the custom alert method. Similarly, the time-consuming JS method can also be put into the settimeout.
  • Source: http://www.jianshu.com/p/d19689e0ed83

<textarea style="display: none" readonly="">window.refreshpage = function (responsedata) {setTimeout (function () {Window.location.hash = '/index/page? Access_token= ' +responsedata; Window.location.reload (); },1)};</textarea>

Window.refreshpage = function (responsedata) {    setTimeout (function () {        Window.location.hash = '/index/page? Access_token= ' +responsedata;        Window.location.reload ();    },1)};

　　

(3) Post-sharing callback function

Provides a global function to the app call, informing the function name.

　　

Set the title when the app side shares

Because the title data may need to be modified later, with flexibility in mind, the data set by this title is placed on the front end. The meta-tag is written in HTML and is read and set by the app.

(1) IOS:

Write directly in Meta, negotiate well Name,ios can be easily read)

<textarea style="display: none" readonly=""><meta name= "Biketo_title" content= "2017 Ring method Quiz! Win million riding equipment "><meta name=" Biketo_subtitle "content=" use the United States Riding app, participate in 2017 ring law guessing activities, correct all the quiz title, 100% won the Cycling Equipment award. "><meta name=" Biketo_url "content=" Http://hd.biketo.com.cn/tourFrance2017/#/index/sharepage "><meta" Name= "Biketo_imageurl" content= "http://hd.biketo.com.cn/tourFrance2017/public/img/share-icon.jpg" ></textarea>

<meta name= "title" content= "2017 Ring method Quiz!" Win million riding equipment "><meta name=" subtitle "content=" Ring law guessing activities. "><meta name=" url "content=" http://hd.xxx.com.cn/tourFrance2017/#/index/sharepage "><meta name=" ImageUrl "content=" http://hd.xxx.com.cn/tourFrance2017/public/img/share-icon.jpg ">

　　

(2) Android:

Android makes it harder to read HTML page elements, so didsetParamFromWebView it's a way for Android developers to pass data to Android via JSON. (Note: You need to turn JSON into a string)

<textarea style= "Display:none" readonly>settitleforandroid () {var android = window. ANDROID; var Titlejson = {' Biketo_title ': document.getelementsbytagname (' meta ') [' Biketo_title '].content, ' biketo_sub Title ':d ocument.getelementsbytagname (' meta ') [' Biketo_subtitle '].content, ' biketo_url ': document.getElementsByTagName (' meta ') [' Biketo_url '].content, ' Biketo_imageurl ': document.getElementsByTagName (' Meta ') [' Biketo_imageurl '].content}; Android.didsetparamfromwebview (Json.stringify (Titlejson));} </textarea>

Settitleforandroid () {    var android = window. ANDROID;    var Titlejson = {        ' title ': document.getElementsByTagName (' meta ') [' title '].content,        ' subtitle ': document.getElementsByTagName (' meta ') [' subtitle '].content,        ' url ':d ocument.getelementsbytagname (' meta ') [' URL '].content,        ' ImageUrl ': document.getelementsbytagname (' meta ') [' ImageUrl '].content    };    Android.didsetparamfromwebview (Json.stringify (Titlejson));}

　　

The H5 and native app interaction method