H5 jump to wechat app

real__ Fat old rabbit next door 2021-02-23 04:05:35
h5 jump wechat app


Preface

Demand scenarios : Through the open label officially provided by wechat , Developers can use this tag to h5 Jump to wechat app page .

step

1、 Bind domain name

Log in wechat public platform , Set up JS Interface security domain name .

2、 introduce JS file (1.6.0 edition )

res.wx.qq.com/open/js/jwe…

3、 adopt config The interface injects the permission verification configuration and applies for the required open label

wx.config({
debug: true, // Turn on debugging mode , Call all api The return value of will be on the client side alert come out , To see the parameters passed in , Can be in pc End open , The parameter information will go through log play , Only in pc Only when the end is printed
appId: '', // Required , The only sign of official account number
timestamp: , // Required , Generate signature timestamp
nonceStr: '', // Required , Generate a random string of signatures
signature: '',// Required , Signature
jsApiList: [], // Required , Required JS Interface list
openTagList: ['wx-open-launch-app'] // Optional , List of open tags to use , for example ['wx-open-launch-app']
});
 Copy code 

4、 Open label

official demo

<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<template>
<style>.btn { padding: 12px }</style>
<button class="btn"> Open the applet </button>
</template>
</wx-open-launch-weapp>
 Copy code 

Be careful

  • path The path must have .html( The official didn't say )
  • Official explanation , about Vue Wait for the view frame , for fear of template The problem of label conflict , You can use <script type="text/wxtag-template"><script> To replace , To wrap slot templates and styles .

rewrite demo

<wx-open-launch-weapp id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index.html?user=123&action=abc">
<script type="text/wxtag-template">
<div class="btn">
Open the applet
</div>
</script>
</wx-open-launch-weapp>
})
 Copy code 

Custom style issues

Introducing styles into open tags , It doesn't work , So I came up with a way of positioning , Transparency set to 0.

#launch-btn{
width: 8.9333rem;
height: 4.56rem;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
opacity: 0;
}
 Copy code 

That is to say, the way of positioning is used , Found that the style can't stretch , In the end, in the most old-fashioned way , Open with words .

<wx-open-launch-weapp id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index.html?user=123&action=abc">
<script type="text/wxtag-template">
<div class="btn">
Open the applet Open the applet Open the applet Open the applet Open the applet
</div>
</script>
</wx-open-launch-weapp>
})
 Copy code 

summary

  1. Need configuration JS Interface security domain name
  2. jssdk Version of 1.6.0
  3. path Need to add .html
  4. Custom style issues , Here's the positioning method , And spread the height with words

Reference documents

WeChat h5 Webpage jump applet

H5 Jump to the small program, click the button, various styles of injection can not open up the problem

Official document of wechat applet

版权声明
本文为[real__ Fat old rabbit next door]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210223024104392L.html

  1. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  2. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  3. Vue determines whether the El form in the elementui is updated or changed. If it changes, it will prompt whether to save it. If it does not change, it will leave directly
  4. Algorithm problem: sum of two numbers -- JavaScript and Java implementation
  5. High performance nginx HTTPS tuning
  6. JQuery advanced
  7. day 30 jQuery
  8. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  9. TCP/IP 开胃菜 之 HTTP
  10. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  11. JavaScript data type
  12. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  13. Solve Ajax cross domain problem [5 solutions]
  14. HTTP of TCP / IP appetizer
  15. Optimization of pod creation efficiency in serverless scenario
  16. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%
  17. First knowledge of HTTP / 1.1
  18. First knowledge of HTTP / 1.1
  19. Webpack learning notes series 05 devserver
  20. Webpack learning notes series 04 - resource processing optimization
  21. How to build a high performance front end intelligent reasoning engine
  22. How to become a professional front end engineer in 2021?
  23. How to transform single / micro service application into serverless application
  24. How to transform single / micro service application into serverless application
  25. How to transform single / micro service application into serverless application
  26. How to connect the ground gas to the micro front end?
  27. How to connect the ground gas to the micro front end?
  28. How to connect the ground gas to the micro front end?
  29. Vue server rendering principle analysis and introduction
  30. Realize the correct loading of text message
  31. Building my own project scaffolding with yeoman
  32. JavaScript advanced prototype and prototype chain
  33. React background management front end system (based on open source framework development) start
  34. JS practical skills breakpoint debugging
  35. I'd like to share with you 20 super easy-to-use Chrome extension plug-ins
  36. Get page element location
  37. Use the powerful API of modern browser to record any interface in the browser and realize export, save and management
  38. Delayed code execution in flutter
  39. Reconfiguration experience of KOA middleware system
  40. Add comments to your blog
  41. Svg editor -- new path
  42. Detailed explanation of debounce and throttle of JavaScript function
  43. Anti shake and throttling and corresponding react hooks package
  44. C2m: the first CSDN article moved to MOOC script 5000 words, detailed painstaking development process, there are renderings and source code at the end of the article
  45. Front end, school recruitment, Taobao, guide
  46. [vue2 & G6] get started quickly
  47. Canvas from the beginning to the pig
  48. Take five minutes to standardize the code comments?
  49. Some thoughts on sass
  50. what?! You haven't filled in the award information yet
  51. How to get the interface + tsdoc needed by TS through swagger
  52. Binary tree
  53. Canvas drawing method in Web screenshot
  54. Front end docker image volume optimization (node + nginx / node + multi-stage construction)
  55. Become a big influence of technology? Coding pages quickly build personal blog
  56. Object and array deconstruction, spread operator, rest operator
  57. Analysis of Axios source code
  58. Two ways to delete useless code in project (Practical)
  59. Edit your picture with canvas
  60. Today's chat: 2-4 years to walk out of the resignation dilemma and comfort zone