1. Introduce the latest version of wechat JDK JS package

< script SRC = "https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type = "text/javascript" > < / script >Copy the code

2. Configure HTML

<span class="open"><span> open APP</span> <span style="position:absolute; top:0; left:0; right:0; bottom:0; opacity: 0;" id="launch-btn" appid="*****" extinfo="your-extinfo"> <template> <style> .btn { width: 100%; padding: 12px; height: 150px; </style> <button class=" BTN "> </template> </wx-open-launch-app> <script> var BTN = document.getElementById('launch-btn'); btn.addEventListener('launch', function (e) { console.log('success'); console.log(e.detail.errMsg); if(e.detail.errMsg.indexOf("fail")! = 1){// Open openStore (); }}); btn.addEventListener('error', function (e) { //console.log('fail', e.detail); console.log(e.detail.errMsg); if(e.detail.errMsg.indexOf("fail")! = 1){// Open openStore (); } // alert(e.detail.errMsg); }); </script> </span>Copy the code

3. Configure permission injection for wechat

var imgUrl = 'https://www.foresee-future.com/manager/loge.ico'; var lineLink = window.location.href.split('#')[0]; var lineLinkshare = window.location.href.split('#')[0]; Var descContent = 'App'; Var shareTitle = 'open '; Var shareTitlephone = 'open App'; $.ajax({ type: 'POST', contentType: "application/json; charset=UTF-8", url: "https://*****/getSignature", dataType: 'json', data: JSON.stringify({ 'url': lineLink }), success: function (result) { if (result.success) { configdata = result.data; Wx. config({// debug: true, // Enable debugging mode appId: configData. appId, // Mandatory, unique identifier of public id timestamp: NonceStr: configData. nonceStr, // Mandatory, generate a random string of signatures signature: Configdata.signature,// required, signature // required, list of JS interfaces to use jsApiList: ['updateAppMessageShareData', 'onMenuShareTimeline', 'updateAppMessageShareData', 'wx-open-launch-app', 'updateTimelineShareData', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareAppMessage',], // Optional, obtain open label permissions openTagList: ['wx-open-launch-app'] }); Wx.ready (function () {wx.checkjsAPI ({jsApiList: ['wx-open-launch-app']), // Check the JS interface list. Function (res) {console.log(res) console.log(' available ')}, fail: (err) = > {the console. The log (' unavailable ')}}) wx. UpdateAppMessageShareData ({title: shareTitlephone, / / share title desc: ImgUrl: imgUrl, // Share icon success: Function () {}, cancel: function () {/ / user to cancel the share executed after the callback function}}) wx. UpdateTimelineShareData ({title: ImgUrl: imgUrl, // Share icon SUCCESS: Function () {}, cancel: function () {// The user unshares the callback function}}); Wx. onMenuShareAppMessage({title: shareTitlephone, // Share title desc: descContent, // Share description link: ImgUrl: imgUrl, // Share icon type: ", // Share type,music, video or link, default link dataUrl: ", // if type is music or video, provide data link, default is null SUCCESS: function () { }, cancel: function () { } }); Wx. onMenuShareTimeline({title: shareTitle, // shareTitle desc: descContent, // share description link: ImgUrl: imgUrl, // Share icon type: ", // Share type,music, video or link, default link dataUrl: ", // if type is music or video, provide data link, default is null SUCCESS: function () { }, cancel: function () { } }); wx.onMenuShareQQ({}); wx.onMenuShareWeibo({}); wx.onMenuShareQZone({}) }); }}})Copy the code

4. Steps to open App by wechat browser

Apply for a wechat public platform account with the same subject as the wechat development platform, apply for a service account, and open wechat authentication

You need to configure the JS secure domain name IP whitelist for this service number

Meanwhile, the wechat development platform needs to bind the service number, and the wechat development platform also needs to bind the APP

The front-end SDK is introduced, the back-end provides interface injection permission, and THE APP also needs to do related cooperation