WeChat official account h5 page skip small program development pit

Search this problem online   Many answers are    wx.navigateToMiniProgram(Object object)     I just want to say   I searched for h5 jump applet   The answers given by these people are small programs, jump small programs   I'm overwhelmed

Official start:

1.Directory | wechat open documents     Open this URL   What we're going to use is   Open label

2. The document is clear   Go to wechat jssdk   

The core is here   Or is it similar to wechat jssdk   Share or sweep this   Go through the process of verifying signatures  

Here are some details to pay attention to

a.   jsApiList   It is recommended to write a verification js interface in the array   Although we don't have to   But there is an article that says we need to write one here

b. openTagList   Put the open label we want to use in the       Web app is a jump applet     App is a jump to app

c. Page detail processing     

If you don't use vue's framework   Then you can use the template tag   Just follow the example on the official website below   

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index.html?user=123&action=abc"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">Open applet</button>
  </template>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>
App Jump button:

If you use vue's framework   for example   I used the framework of uniapp   Then the template tag will conflict. At this time, you need to write it differently     To use the script tag type, note text / wxtag template   And because this slot is isolated from the outside world, css should be written in the tag. You can use the style tag or write style directly like me

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
	</head>
	<body>
		Test page
		<wx-open-launch-app
		  id="launch-btn1"
		  appid="xxxxxxxxx"
		  extinfo="name=gq&age=123"
		>
		  <script type="text/wxtag-template">
		    <style>.btn { padding: 12px }</style>
		    <button class="btn">App Internal view</button>
		  </script>
		</wx-open-launch-app>
		
		<wx-open-launch-weapp
		  id="xxxxxxxxx"
		  username="xxxxxx"
		  path="page/my/login/login"
		>
		  <script type="text/wxtag-template">
		    <style>.btn { padding: 12px }</style>
		    <button class="btn">Open applet</button>
		  </script>
		</wx-open-launch-weapp>

	</body>
	<script src="./vconsole.js"></script>
	<script src="./jquery.js"></script>
	<script>
	new VConsole()
	$.get("https://xxxxxxxxxx",{url:location.href},function(data,status){
	        console.info(data)
			var obj = data.obj
			wx.config({
			  debug: true, // When the debugging mode is enabled, the return values of all APIs called will be alert ed on the client. To view the incoming parameters, you can open them on the pc side. The parameter information will be printed through the log and will only be printed on the pc side
			  appId: 'xxxxxxxxx', // Required, the only sign of official account.
			  timestamp: obj.timestamp, // Required, time stamp to generate signature
			  nonceStr: obj.nonceStr, // Required, generate random string of signature
			  signature: obj.signature,// Required, signature
			  jsApiList: [
				  'onMenuShareTimeline'
			  ], // Required, list of JS interfaces to be used
			  openTagList: [
				  'wx-open-launch-app',
				  'wx-open-launch-weapp'
			  ] // Optional, list of open tags to be used, such as ['wx open launch app ']
			});
	    });
	
	  var btn = document.getElementById('launch-btn1');
	  btn.addEventListener('launch', function (e) {
	    console.log('success app');
	  });
	  btn.addEventListener('error', function (e) {
	    console.log('fail app', e.detail);
	  });
	  var btn2 = document.getElementById('launch-btn2');
	  btn2.addEventListener('launch', function (e) {
	    console.log('success Applet');
	  });
	  btn2.addEventListener('error', function (e) {
	    console.log('fail Applet', e.detail);
	  });
	</script>
</html>

Finally, tell me some problems you may encounter

1.h5 page is to be certified by the company   Then if the page of h5 is in the security domain name of h5 background

2. The applet also needs to be certified by the company, and then h5's page should also be configured in the applet. What's the specific name in the security domain name? I forgot

3. The username attribute of the open tag should start with the original id of the applet, which is easy to find

4.path applet

1. The username attribute of the open tag should use the original id of the applet

Tags: Javascript Mini Program wechat uniapp

Posted on Thu, 18 Nov 2021 23:51:40 -0500 by Rushyo