Xi Da Pu Ben, wechat finally supports the external network to open the applet!

Time:2021-10-17

preface

After a long call, the wechat applet finally supports external arousal in the form of URL scheme.

Long long ago ~ we can only use wechat development tag applet jump button in wechat web pagesOpen the applet, there is only such a single scene.

In the actual business, we hope to open a small program in the marketing SMS, e-mail or other channels sent to users, such as app, so as to quickly obtain user traffic and complete the purposes of drainage and shopping guidance.

He’s coming, he’s coming. The wechat applet quietly launched a new function: supportURL scheme open appletYes.

New product launch

URL scheme opens the applet, and the new product is online. Come and try it quickly.

You can elaborate, summarize and analyze one by one from the perspective of brother Hu, or you can click directlyOfficial document portalView official documents~

Let’s first take a look at the two ways to open wechat applets officially provided by wechat and relevant applicable scenarios.

Open mode Applicable scenario Scene value Mode of use remarks
URL Scheme SMS, emailOutside wechatWeb page open applet 1065 location.href = 'weixin://dl/business/?t= *TICKET*' The ticket is returned by the server interface
Inside wechatWebpage 1167 Page configurationlabel The JS interface domain name or the web page under the domain name managed and bound by the cloud development static website shall be configured

Be sure to distinguish the application scenarios of the two methods: URL scheme is applicable to pages outside wechat,
It is applicable to wechat.

Getting applet URL scheme

The URL scheme structure of the applet isweixin://dl/business/?t= *TICKET*, whereTICKETReturned by the server interface. The server interface can be divided into two forms:HTTPS callandCloud development call

1、 HTTPS call

  1. Get access_ TOKEN

    Request address:

    GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

    The corresponding appid and appsecret can be replaced with their own corresponding applet.

    The returned data structure is as follows:

    {
    	"access_token": "ACCESS_TOKEN",
    	"expires_in": 7200
    }
  2. Get URL scheme

    Request address:

    POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN

    Request parameters:

    attribute type Default value Required explain
    access_token string yes Interface call voucher
    jump_wxa Object no Jump to the target applet information.
    is_expire boolean false no Generated scheme code type, expiration: true, permanently valid: false.
    expire_time number no The expiration time of the expired scheme code is the UNIX timestamp. The generated expiration scheme code is valid before this time. The maximum period of validity is 1 year. Required when generating expired scheme.

    jump_ Structure of wxa

    attribute type Default value Required explain
    path string yes The applet page path entered through the scheme code must be the page of the published applet and cannot carry query. When path is empty, it will jump to the applet home page.
    query string yes The query when entering the applet through the scheme code has a maximum of 128 characters. It only supports numbers, upper and lower case English and some special characters:! #$& ‘ ()*+,/:;[email protected]_~

    Request example:

    {
    	"jump_wxa": {
    		"path": "/pages/index/index",
    		query": ""
    	},
    	"is_expire": true,
    	"expire_time": 1606737600
    }

    Return result:

    {
    	"errcode": 0,
    	"errmsg": "ok",
    	"openlink": Scheme,
    }

    OpenLink is the URL scheme we finally need~

2、 Cloud call

Cloud invocation is the ability of small program, cloud development, to call WeChat open interface in cloud function. It needs to be used in cloud function through wx-server-sdk.

Request parameters:

attribute type Default value Required explain
access_token string yes Interface call voucher
jump_wxa Object no Jump to the target applet information.
isExpire boolean false no Generated scheme code type, expiration: true, permanently valid: false.
expireTime number no The expiration time of the expired scheme code is the UNIX timestamp. The generated expiration scheme code is valid before this time. The maximum period of validity is 1 year. Required when generating expired scheme.

Note that the case of parameter names is inconsistent with that in HTTPS

jump_ Structure of wxa

attribute type Default value Required explain
path string yes The applet page path entered through the scheme code must be the page of the published applet and cannot carry query. When path is empty, it will jump to the applet home page.
query string yes The query when entering the applet through the scheme code has a maximum of 128 characters. It only supports numbers, upper and lower case English and some special characters:! #$& ‘ ()*+,/:;[email protected]_~

Request example:

const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.urlscheme.generate({
        jumpWxa: {
          path: '/pages/index/index',
          query: ''
        },
        isExpire: true,
        expireTime: 1606737600
      })
    return result
  } catch (err) {
    return err
  }
}

Return result:

{
	"errcode": 0,
	"errmsg": "ok",
	"openlink": Scheme,
}

OpenLink is the URL scheme we finally need~

Use of applet URL scheme

The structure of applet URL scheme is:weixin://dl/business/?t= *TICKET*, what if we use the scheme after we get it.

stayIOSThe system supports direct identificationURL SchemeYes, so you can directlyURL SchemeSend it to SMS and email and provide it to users. But inAndroidThe system does not support direct identificationURL Scheme, the user cannot open the applet normally with scheme, so the developer needs to use the H5 page to transfer, and then jump to use scheme to open the wechat applet.

end Mode of use remarks
Android location.href='weixin://dl/business/?t= *TICKET*' There is only one way
IOS Directly identify the URL scheme or use the location.href method Two ways

But, we should pay attention to a problem. When we touch SMS, we can’t determine whether the mobile device used by the user isIOSstillAndroid

So, we need an H5 page for transfer processing from the actual business trigger.

Applet business flow chart

When Dangdang, integrate two ways to open applets (URL scheme and), the full version of the applet evokes the business process diagram~

file

Postscript

The above is what Hu Ge shared with you today. My favorite friends remembergive the thumbs-upCollectionYo, pay attention to brother Hu. There’s something to say. Don’t get lost in the front end of learning. Welcome to leave more messages

Hu Ge said, focus on the field of large front-end technology, share the front-end system architecture, framework implementation principle, and the latest and most efficient technical practice!