Description: This paper summarizes some problems encountered in the interaction between native APP and H5, and will continue to update
directory
- How does H5 trigger native APP methods
- How does native trigger trigger h5 methods
- Universal Link opens APP
- Applet opens app
First, how does H5 trigger the method of native APP
1. Check whether the browser currently accessing H5 is ios or Android. I call the following method
export function versions () {
var u = navigator.userAgent
return {
trident: u.indexOf('Trident') > - 1.presto: u.indexOf('Presto') > - 1.webKit: u.indexOf('AppleWebKit') > - 1.gecko: u.indexOf('Gecko') > - 1 && u.indexOf('KHTML') = = =- 1.mobile:!!!!! u.match(/AppleWebKit.*Mobile.*/) | |!!!!! u.match(/AppleWebKit/),
ios:!!!!! u.match(/\(i[^;] +; ( U;) ? CPU.+Mac OS X/),
android: u.indexOf('Android') > - 1 || u.indexOf('Linux') > - 1.iPhone: u.indexOf('iPhone') > - 1 || u.indexOf('Mac') > - 1.iPad: u.indexOf('iPad') > - 1.webApp: u.indexOf('Safari') = = =- 1}}Copy the code
2. Call the method and the parameters to be passed with the native convention, and click to call
How does the native trigger trigger h5
- If you’re just h5 pages and not using any other framework, you don’t need to do anything about it
- In the case of vUE framework, we need to expose the method of native requirement triggering in Mounted
Third, Universal Link opens APP
Requirements:
- If the page shared by app is opened on wechat, click the open button
- If the App is already installed, you can open it by following the link
- If the App is not installed, go to download the App
IOS can use Universal Link in wechat. Android has compatibility problems due to too many versions. It is suggested to guide to external browser and open it
1, the IOS
Configuration of apple – app – association
Which urls are recognized as UniversalLink? See the Apple-app-association file Apple Document universallinks.html
- Your domain name must support Https
- Put this file apple-app-association in the domain root, without any suffix
- The file is JSON and can be saved as text
- Json As required on the official website
Apple-app-association file of Zhihu
Place the configured file in the root directory or. Well-known directory
In order to unify WAP&APP, in order to universal link effect
Universal Link domain is a domain name, not the actual page that is https://xxx.xxx.xxx/view/ * this url, if not installed APP so triggered the WebView continue to jump the original address, can 404 directly. It’s very simple, redirect (server-side redirect)
Configure the iOS App project
Developer Center certificate open Associated Domains
Associated Domains
Enter your apple-app-Association domain name
Write logic for your project to handle when your App wakes up
#pragma mark Universal Links - (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler { if ([userActivity.activityType isEqualToString:NSUserActivityTypeBrowsingWeb]) { NSURL *webUrl = userActivity.webpageURL; [self handleUniversalLink:webUrl]; } return YES; }Copy the code
The following is the URL in my project, interested friends, visit
window.location.href = 'https://applinks.hosjoy.com/dfx/jumplink?link='+ Jump routeCopy the code
The domain name is preceded by a route that invokes the app to open the corresponding page
I redirected this domain name on the server side. If the url is 404, I will jump to the corresponding page of AppStore for app download; otherwise, I will directly wake up the APP and jump to the specified page
2, the android
In fact, the most widely used waP app is not Universal Link, but direct Schema jump
location.href = 'schema://xxxx'
Copy the code
And generally, each major APP will make a routine system for itself, so that the routing system can be directly connected behind the schema header, so that a line of schema positioning can open any functional interface in the APP
Write logic for your project to handle when your App wakes up
(BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
if ([[url absoluteString] hasPrefix:@"schema://"]) { [[WKDispatcher sharedInstance] operationObjectFromRouteURL:[url absoluteString]]; / / routingreturnYES; }}Copy the code
This Schema Url can only be supported if the APP is installed, but it has no effect if the APP is not installed
It has been written at the beginning, because there are too many Android versions and there are compatibility problems, it is suggested to guide to the external browser and open it
window.location.href = 'schema://showB2bpage? route='+ Open the route of the pageCopy the code
The diagram below:
We want to see a special detailed content, recommend this Universal Link open APP front-end deployment pit remember
Summary: Schema cannot open app in special UA information such as wechat mobile, but can only be opened by using an external viewer. IOS can use Universal Link in wechat. Android has compatibility problems due to too many versions. It is suggested to guide to external browser and open it
Four, small program jump App
Requirements:
- App shares applets information card and opens applets
- Click the back button to open the APP
Operation steps:
The first step:
(1) Confirm that APP and small program can directly complete the jump on the same open platform account
(2) Jump is supported only after the APP is associated with a small program on a non-development platform
You can select Admin Center – Mobile Application – Application Details – Associated Applet Information to initiate associated applet operations for approved mobile applications
Native APP:
WXEntryActivty needs to be created to implement the IWXAPIEventHandler interface and rewrite the onResp method. Note that Acitvity requires the android: Exported =”true” statement in the Manifest file to be invoked externally
public void onResp(BaseResp resp) {
if(resp.getType() == ConstantsAPI.COMMAND_LAUNCH_WX_MINIPROGRAM) { WXLaunchMiniProgram.Resp launchMiniProResp = (WXLaunchMiniProgram.Resp) resp; String extraData =launchMiniProResp.extMsg; // App-parameter field value}}Copy the code
Step 3:
Small program side:
The message card is shared through the APP, and the scene value is 1036. According to the requirements of the project, the scene value is obtained in the small program for judging and displaying the app button
The applet gets the scene value
App({
onLaunch: function (options) {
console.log("[onLaunch], options.scene)
},
onShow: function (options) {
console.log("[onShow] Value of this scenario :", options.scene)
}
})
Copy the code
Step 4:
Small program side:
The value of button component open-type needs to be set to launchApp. If you need to pass parameters to the APP when opening the APP, you can set app-parameter to the parameter to be passed. Binderror allows you to listen for error events when opening your APP
<button class="server_button" open-type="launchApp" app-parameter="wechat" binderror="launchAppError"> open the APP < / button >Copy the code
extension
The next step requires multiple apps to jump to a small program and then return different apps respectively. An App jumps to different applets and receives different returns.
The path from the App to the applet page can take parameters, we use this parameter to determine which App to jump to the applet.
Such as:
The jump path of App named A is:
"pages/index/index? type=appA"
Copy the code
The jump path of App named B is:
"pages/index/index? type=appB"
Copy the code
Small program receiving parameters:
onLoad: function(options) { console.log(options.type); //app passes a parameter to determine a or b}Copy the code