Mainly use WeChat open label wx – open – launch – weapp detailed reference website: developers.weixin.qq.com/doc/offiacc…

Uniapp implementation code
View part
<template> <view class="home" style="margin-top: 20rpx;" > <wx-open-launch-weapp id="launch-btn" username="gh_xxxx" path="pages/home/index.html? type=123&name=1234" @launch="handleLaunchFn" @error="handleErrorFn"> <script type="text/wxtag-template"> <style> .btn { padding: 12px; width: 300px; border-radius: 5px; background-color:#2F89DC; border: none; outline: none; color: #FFFFFF; </style> <button class=" appellate "> </ frame > </ frame > </ frame > </ frame > </ frame > </ frame >Copy the code

The important thing here is to write the style inside

Js part

At first I direct the introduction of external js file has a problem, then I direct use of NPM’s official website said res.wx.qq.com/open/js/jwe… Note that version

< script SRC = "/ / res.wx.qq.com/open/js/jweixin-1.6.0.js" > < / script > direct introduction, can try, unnecessary codeCopy the code
npm install weixin-js-sdk
Copy the code

If used in uniapp, it can be imported through import

import wx from 'weixin-js-sdk'
Copy the code

Next comes the more important authentication of wx.config, which is required to use any API provided by wechat

Wx. config({debug: false, // Enable the debug mode, the return value of all API calls will be displayed in the client alert, if you want to view the parameter, you can open it in the PC, the parameter information will be printed in the log, only in the PC will print the appId: Timestamp :timestamp, // Required, generated signature timestamp nonceStr: nonceStr, // Required, generated signature random string signature: JsApiList: ['scanQRCode'], // Required, list of JS interfaces to use openTagList: [' wX-open-launch-appellate '] // Appellate appellate tags,});Copy the code

Timestamp, nonceStr, signature, timestamp, nonceStr, timestamp, nonceStr, signature, timestamp, nonceStr, signature, timestamp, nonceStr, signature, timestamp, nonceStr, signature, timestamp, nonceStr, timestamp, nonceStr, signature, timestamp, nonceStr

Url: the window. The location. The href. Split (' # ') [0]Copy the code

Then the function section, here is complete, click the button to bring up the following prompt

Methods: {handleLaunchFn:function(e){console.log(e)} handleErrorFn:function(e){console.log(e)}}Copy the code

If the following error message is displayed in the browser, do not worry, the test is fine on the real machine