The world of technology is simple, except for 0 is 1.

preface

I received a task, which was roughly subdivided as follows:

  • H5 Activate App (Android/iOS) and open corresponding page;
  • If the application is not installed, the user is prompted to download it.
  • Wechat opens this link to share the style of friends’ display cards without using wechat SDK;
  • By calling wechat SDK to share friend cards;

Perturbed heart, should begin front end journey again, how to do?

Dry bai.

My personal work is mainly on Android, so this article mainly takes Android as an example. After all, Chicken Boss has also said that he does not make too many comments on the fields not covered.

In the previous project, SCHEME was used to open the specified page, and now I also plan to start with Scheme. For some novel things, I will study them later in my spare time.

Due to the particularity of the project, dynamic renderings will not be placed here temporarily.

I. H5 Activate the App (Android/iOS) and open the corresponding page

The key points are the protocol name and host corresponding to the mobile terminal and front-end protocol.

For example, we now agree as follows:

  • com.test.app://topic? id=196&code=50c20872

Of course, the protocol name does not have to be a domain name, for example, I can specify schemeName.

Android users only need to support this scheme on the specified page:

<activity
    android:name=".ui.activity.module.topic.TopicActivity"
    android:exported="true"
    android:launchMode="standard" 
    android:screenOrientation="portrait"> 

    <intent-filter>
        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />

        <data
            android:host="topic"
            android:scheme="com.test.app" />
    </intent-filter>
</activity>
Copy the code

Obtain H5 pass parameters are also thief easy, as follows:

if (Intent.ACTION_VIEW == intent.action && intent.data ! = null) { mAdvisoryId = intent.data.getQueryParameter("id").toInt() mPrivateCode = intent.data.getQueryParameter("code") }Copy the code

Finally, for H5, just jump to this URL:

Var commSchemeUrl = "com.test.app://topic? id=196&code=50c20872"; window.location.href = commSchemeUrl;Copy the code

2. If the application is not installed, the user is prompted to download it

The best case scenario would be for all users to install our app. Unfortunately, it’s not wechat.

So the question is, what if the target user doesn’t have the app installed? Can you indirectly improve product download and installation rate?

After all, if you click on H5, you want to use the app.

Alter H5, in fact, to extract a JS:

<script type="application/javascript"> Var commSchemeUrl = "com.test.app://topic? id=196&code=50c20872"; / / iOS download address var iOSDownloadUrl = "HTTP: / / https://itunes.apple.com/cn/app/id your iOS App ID"; Var androidDownloadUrl = "androidDownloadUrl" function openApp() {let u = navigator.userAgent; let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // Check whether android terminal let isIOS =!! u.match(/\(i[^;] +; ( U;) ? CPU.+Mac OS X/); / / judge whether iOS terminal / / the first attempt to open the App and jump the if (isAndroid | | isIOS) {window. The location. Href = commSchemeUrl; } // not open after 3ms, AppDownload = setTimeout(function() {if (isAndroid) {window.location.href = androidDownloadUrl; } else if (isIOS) { window.location.href = iOSDownloadUrl; }}, 3000); } the document. The addEventListener (' visibilitychange webkitvisibilitychange ', function () {/ / if the page is hidden that open the app, Remove download task if (document. Hidden | | document. WebkitHidden) {clearTimeout (appDownload)}}) window.addEventListener('pagehide', function() { clearTimeout(appDownload) }) </script>Copy the code

Here’s a fun one: How do you tell if the current user doesn’t have the current app installed on their phone?

Consulted, feel more reliable answer is:

  • Add the monitoring corresponding to the page and a scheduled download task 3 seconds later. If the current page is hidden, it is considered that the target App is opened normally and the scheduled task is cleared; otherwise, the download page will be redirected.

For a small Android, the thief admired the idea of god, deliberately recorded.

Iii. Wechat opens this link to share the style of friends’ display cards without using wechat SDK

Pit pit baba wrote this small webpage, this thought open happy heart to submit the task to start the next task, unexpectedly, suddenly received the H5 in wechat to open and share friends need to show the card style, but also can not use wechat SDK, my god.

First, attach a display style of existing H5 when opening and sharing wechat friends:

Well, title is a string of addresses, and so is the content, not the image. This way certainly not that, at least the title should change.

Chicken boss said, look at other big factory website, see how people do.

Oh, it’s too delicious. I don’t understand it. Finally, I took part of it directly from the wechat official account as follows:

<head> <meta charset="utf-8"> <! -- Mainly enforce document widths 1:1 to device widths, maximum widths 1.0, and prohibit screen zooming. --> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <! This is also an iPhone private TAB that allows full screen viewing. --> <meta content="yes" name="apple-mobile-web-app-capable"> <! -- iPhone private TAB, the style of the status bar at the top of the iPhone. --> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <! -- Disables automatic identification of numbers as phone numbers. This is useful because a string of numbers will appear blue on the iPhone, and style additions won't work either. --> <meta content="telephone=no" name="format-detection"> <! <meta Content ="email=no" name="format-detection"> <link rel="icon" href="https://x.png" Type ="image/x-icon" /> <meta name="description" content=" test test "/> <meta name="author" content="HLQ" /> <meta Property = "og: title" content = "hi, Your friend recommend a good project for you ~ "/ > < meta property =" og: url "content =" http://mp.weixin.qq.com/s?__biz=MzU2NTI4Mjc0Ng==&amp; mid=2247484817&amp; idx=1&amp; sn=f4a8758d77a9e308ac4126e30c3b41d1&amp; chksm=fcbf5744cbc8de528a75b04ae9919bc1345800601cf4201af9ec1333e118593b75eed10fdf2a#rd" /> <meta property="og:image" content="http://mmbiz.qpic.cn/mmbiz_jpg/IZdjxwpBrBY8RsXe4Huyuibl8k3FEad3MqbdbdqJDtXM894R5N1xgHy5ZibuPYYP8BOAxE5hhYNOEhuZ Mcwx3Y0A/0?wx_fmt=jpeg" /> <meta property="og:description" content="" /> <meta property="og:site_name" content="" /> <meta property="og:type" content="article" /> <meta property="og:article:author" content="" /> <meta property="twitter:card" content="summary" /> <meta property="twitter:image" content="http://mmbiz.qpic.cn/mmbiz_jpg/IZdjxwpBrBY8RsXe4Huyuibl8k3FEad3MqbdbdqJDtXM894R5N1xgHy5ZibuPYYP8BOAxE5hhYNOEhuZ "/> <meta Property =" Twitter :title" content=" <meta Property =" Twitter: Creator "content="" /> <meta Property =" Twitter :site" content="" /> <meta property=" Twitter :site" content="" /> <meta property=" Twitter :site" content="" /> <meta Property =" Twitter :description" content="" /> <title>Copy the code

Test feeling or directly set the title, share wechat friend card title automatically matched.

Finally, the test results are attached:

  • Figure 1 shows the normal opening and sharing of friends in wechat.
  • Figure 2 shows the open and Share friends style in Safari.

During the period, I also tried some schemes mentioned online, such as setting 300×300 pixel IMG, but the results were still unsatisfactory.

For example:

<div style="display: none;" > <img src="http://adv-share.oss-cn-shanghai.aliyuncs.com/0.jpg" alt=""> </div>Copy the code

The image is exactly 300×300 pixels, and embarrassingly, useless.

4. Share friend cards by calling wechat SDK

This late hand over other small partner is responsible for, here simple record, convenient and then minute fix ~

(Remember to use the official website)

Here, the domain name and interface content of wechat background configuration are ignored. There is no participation and no record of practice.

The key codes are as follows:

<! <script SRC ="/jquery.min.js"></script> <script SRC = "https://res.wx.qq.com/open/js/jweixin-1.4.0.js" > < / script > < script type = "javascript application/" > $. Ajax ({async: True, // The parameters true and false will have different effects when opened in wechat. When used in practice, false will be used. When used in true, the test will have a hint content. Url: 'requested domain name ', type: "POST", dataType: "json", // The returned data type, set to JSONP data: {url: encodeURIComponent(window.location.href.split("#")[0]) }, success: function(response, status, xhr) { wx.config({ debug: False, // If debug mode is enabled, the return value of all API calls will be alert on the client. If you want to view the passed parameter, you can open it on the PC, and the parameter information will be printed in log. AppId: response.appId, // Mandatory, unique identifier of public number timestamp: Response. timestamp, // Mandatory, timestamp of generated signature nonceStr: Response.noncestr, // Required, generate a random string of signatures signature: Response.signature, // required, signature jsApiList: [// Required, list of JS interfaces to be used 'List of JS interfaces to be used ',], // List of JS interfaces to be tested, see Appendix 2 for a list of all JS interfaces,}); ShareData = {title: "test title ", // Share title desc:" test description ", // Share description link: Window.location. href, // share link imgUrl: "Http://fa-res.oss-cn-shanghai.aliyuncs.com/images/02aKfbKPkdEwZyBr6zJbNXEjK3i3y3MfG.jpg", / / share success icon: Function () {// set successfully}}; / / 1.4.0 new interface (just call this interface is invalid under the android) wx. UpdateAppMessageShareData (shareData); wx.updateTimelineShareData(shareData); }); }}); </script>Copy the code

Well, I don’t know, a stab in the heart.

Brief Introduction to Scheme

After all, chicken boss also said, dig deep, don’t stay on the surface. It’s a good time to take a good look at this and fill in the blanks.

Intent-filter: Intent-filter: Intent-filter: Intent-filter: Intent-filter: Intent-filter

<intent-filter>
    <action android:name="android.intent.action.VIEW" />

    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />

    <data
        android:host="topic"
        android:scheme="com.test.app" />
</intent-filter>
Copy the code

Intent-filter description (from official documentation) :

Specifies the type of Intent that an Activity, service, or broadcast receiver can respond to. The Intent filter declares what actions the parent component’s functional Activity or service can perform and what types of broadcasts the receiver can handle. It allows the component to receive intents of the advertised type, while filtering out intents that make no sense to the component.

Most of the content of a filter is described by its action, category, and Data child elements.

In plain English, it means to perform certain actions according to certain rules that you specify.

For example, in this example, external support is provided by opening urls (e.g. Com.test.app ://topic? Id =196&code=50c20872) to open the App corresponding to the specified page and perform the corresponding operation.

Intent-filter contains the following three attributes:

  • Android :icon: An icon representing a parent Activity, service, or broadcast receiver that is displayed when the component is presented to the user as having the functionality described by the filter. The default value is the icon set for the icon property of the parent component. If the parent component does not specify an icon, the default is the icon set for the application element.
  • Android :label: user readable label of the parent component. This tag (rather than the tag set by the parent component) is used when the corresponding component is presented to the user in a form that has the functionality described by the filter. The default value is the label set by the parent component. If the parent component does not specify a label, the default value is the label set by the label attribute of the application element.
  • The android: priority:The priority that should be assigned to the parent component for intEnts that handle the type described by the filter. This property has meaning for both the Activity and the broadcast receiver:
    • It describes how responsive an Activity is to an Intent that matches the filter, relative to other activities that can also respond to that Intent. When an Intent can be handled by multiple activities with different priorities, Android only treats the Activity with a higher priority value as a potential target for the Intent.
    • It controls the order in which broadcast receivers are executed to receive broadcast messages. The higher the priority value is, the higher the call order is. (This order only applies to synchronous messages; For asynchronous messages, the order is ignored.
    • Note ⚠️ : the value must be an integer, such as “100”. The higher the value, the higher the priority. The default value is 0

The following attributes must be included in the filter:

  • Action: Declares the accepted Intent action in the name attribute. For example, in this example we implicitly start our target Activity.

And the following optional parameters:

  • Category: In the name attribute, declare the accepted Intent category. For example, in this example we have set the default browser support to open the page.
  • Data:Declare the accepted data type using one or more attributes that specify aspects of the data URI (Scheme, host, port, path) and the MIME type.For example, here we declare open rules.
    • Each part of the URI is a separate property: Scheme, host, port, and PATH. For example the content: / / com. Example. Project: 200 / folder. In this URI, Scheme is content, host is com.example.project, port is 200, and path is Folder.

Aha, it’s been a long time, but finally it’s perfect

Happy Dragon Boat Festival

Thanks

  • Create deep links to app content
  • Google intent-filter
  • Intent#ACTION_VIEW
  • Google data
  • Intents and Intent filters
  • IOS | Obtain the download address of the App in App Store
  • H5 Wake up APP tips
  • IOS H5 open App (universal link)