Moment For Technology

Public number in the H5 page jump small procedures

Posted on Sept. 23, 2022, 1:37 p.m. by Purab Datta
Category: The front end Tag: Wechat applets

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=123name=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

Search
About
mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.