H5 evokes applets sharing

The preparatory work

0 non-personally registered applets with applets appID

1 Add the account to the developer

2 Download the developer tools

Research on arousal mode

Public number association: omitted

Limited to the public account

The url scheme: a little

Need back-end students, develop interface, call wechat interface, generate URL scheme

Small procedures open static website, as a transfer (emphasis)

Finally, we chose this kind of scheme, a new scheme

Small program preparation

The basic work

1 Registration small program (personal mailbox plus enterprise subject authentication)

2 Get the appID and secret key of the applets

3. The general registrant is the administrator, and other developers and experiential users can only see the experiential version of the applet

Arouse preparation

A static web site

The static description: developers.weixin.qq.com/miniprogram…

Payment instructions :(static site entrance is also to open after payment by volume)

\

After confirmation, follow-up work:

Developers who need to bind static websites, generally administrators

2. The website sets its own domain name. The current internal rule is applet- project name. xiaoyuanhao.com, the project name should be the same as the project name in the warehouse

3 Need to add the certificate of the domain name, find the operation and maintenance to provide the administrator wechat and certificate and secret key, upload add small program static site label

4 Configuration Environment Can be accessed without login

\

Develop page

The official documentation: developers.weixin.qq.com/miniprogram…

1 evokes the H5 page

Positions to be replaced:

1.1 Wechat internal arousal, mainly using open labels,

Some official answers:

• React H5 WX-open-launch-syndrome
• link

• Description of the official open label

1.11 How to invoke an open label in React

1 need to be implemented as dangerousSetHTML, the reference code is as follows:

createWeAppHtml() { return { __html: '< wx-open-launch-appellate ID ="launch-btn" username=" "path="/pages/index/index.html? Userid = taihealthtest&roomid = 120 "> < template > < button > jump applet < / button > < / template > < wx - open - launch - weapp > '}Copy the code

<script type=”text/wxtag-template />

<div style={position: 'relative', width: '6.3rem', height: <div> < wX-open-launch-downloadp id="launch-btn" username="gh_****" path="/pages/index/index.html" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }} > <script type="text/wxtag-template"> <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0 }} /> </script> </wx-open-launch-weapp> </div>Copy the code

Only appID must be changed

Wx. config({// debug: true, // enable appId: 'appId ', // <! -- replace --> timestamp: 0, timestamp: 0, timestamp: 0, timestamp: 0, timestamp: 0 'signature', // Mandatory, fill in any non-empty string jsApiList: OpenTagList :[' wX-open-launch-appellate '], // add appellate appellate name})Copy the code

The address that the app opens is set inside the TAB,

Username is the original ID of the applet, and path is the path to jump to, which can carry parameters (you are advised to obtain the path from the existing applet).

<wx-open-launch-weapp id="launch-btn" username="xxx" path="/"> <! -- replace --> <template> <button>Copy the code

To get the path to the original ID, do as follows

\

\

1.2 External appeal mainly relies on OpenRegenerative P, which relies on cloud functions that return OpenLink accessible links.

Cloud({// Mandatory, indicating that the mode is not logged in. Identityless: true, // resourceAppid: resourceAppid: 'wx76a8c1159c17d891', // <! -- replace --> // Resource side environment ID resourceEnv: 'jumpline-3g46yc0l58bcfc25', // <! -- replace --> // resourceAppid: 'wxe5f52902cf4de896', // resourceEnv: 'postpay-2g5hm2oxbbb721a4', }) const res = await c.callFunction({ name: 'public', action: 'getUrlScheme', data: { action: 'getUrlScheme', path:'', }}) if(res && res.result && res.result.openlink){ location.href= res.result.openlink; }Copy the code

The ability of cloud functions can make the browser invoke the wechat app, which is roughly in the following format: {” openLink “:”weixin://dl/business/? t=L8lv5GLzvgn”,”errMsg”:”openapi.urlscheme.generate:ok”,”errCode”:0}

Note: errCode: 0 Is returned if the field is successful.

2 cloud function

2.1 Cloud function: the directory of cloud function should be established first (after being added, the running environment of cloud function can be modified), which is different from the directory of original applet. Two configurations should be added in project.config.json, namely, the directory of applet and the directory of cloud function.

2.2 AppID and cloud function have a corresponding relationship, small programs set to this ID can see their corresponding cloud function.

{ "miniprogramRoot": "minip/",
  "cloudfunctionRoot": "cloudfunctions/",
  "appid": "wx92fb081fd07bc779",
}
Copy the code

2.3 Add the cloud function to the small program and set it to true, “choud”:true

2.4 You need to publish and upload cloud functions. If the uploading fails, you need to install dependencies on node_modules in the cloud

2.5 Contents of the original function:

// const cloud = require('wx-server-sdk') cloud.init() Exports. main = async (event, context) => {switch (event. Action) {case 'getUrlScheme': { return getUrlScheme(event.options) } } return 'action not found' } async function getUrlScheme(options) { return cloud.openapi.urlscheme.generate({ jumpWxa: { path: 'pages/rank/levelList/levelList', // <! -- replace --> query: 'a=1',}, // Set to false if you want to save to database isExpire: false, // one minute expireTime: parseInt(Date.now() / 1000 + 60), }) }Copy the code

The method and access parameters of URL scheme are as follows: URL scheme generate

3 “Cloud development” entrance, fill in the test number is not this entrance

You need to fill in the real APPID, there will be toolbar “cloud development” function entrance, the corresponding small program background can set cloud development related parameters: development — cloud service — cloud development

evoke

1. The browser should support URL scheme. If the scheme obtained by the browser cannot be opened actively, it can provide a degraded scheme for the user to scan the code on wechat (the scheme generates two-dimensional code).

2 must be online applets, test applets do not support recall

The first evocation must have been published in an online environment

debugging

You can use local debugging. However, the token exception will be reported when debugging the small program, which needs to be further handled.

Note: Utility class functions are available.

With parameters

Suppose we need to open a specific page for the match in the Mind Academy applet, whose address and parameters are:

pages/rank/levelList/levelList ? levelId=1

Carry parameters in wechat

Directly concatenated in the open label path,

<wx-open-launch-weappid=”launch-btn”username=”gh_xxx”path=”/pages/common/httpMatching/httpMatching? levelId=1″>

External carrying parameters of wechat

Written to data, it is eventually parsed in the Event and then placed in the Query field

constres = awaitc.callFunction({
name:'public',
action:'getUrlScheme',
data: {
action:'getUrlScheme',
path:'/pages/common/httpMatching/httpMatching',
query:'levelId=1'
 },
 })
Copy the code

The corresponding cloud function is written as:

async function getUrlScheme(options) { console.log('options',options); const {path,query} = options; return cloud.openapi.urlscheme.generate({ jumpWxa: { path:path, // <! -- replace --> query: query,}, // Set to false if you want to save to database isExpire: false, // one minute expireTime: parseInt(Date.now() / 1000 + 60), }) }Copy the code

The resources

• Arousal applet (UNIAPP)
• The invocation applets carry parameters
• My words sparrow original text