directory

  • Before the words

  • The premise condition

  • Technical approaches

  • Solution Steps

    • 1. Create a New Web-View page (small program side)
    • 2. Access openId(public number back end) with accessToken
    • 3. Get openId page (public account back end)
    • 4. Get openId in jump parameter in applet (applet side)

  • Points to note

    • The public,
    • Small program

Before the words

Hi~ o(￣▽￣)ブ, I stole back, are you still there? Recently in the public number and small program development, the public number and small program users need to communicate. Online search, ask people, said the need for public platform binding public number and small program, get unionId to communicate, but according to my own practice (messing), found that without unionId can achieve communication.

Code language/framework: UniAPP for small programs, back-end Java (Wxjava public account framework)

The premise condition

  • The public number and small program are bound to each other (the background of the two ends need to do the corresponding binding operation)

Technical approaches

1. Use the small program web-View component to pull up the official account authorization page for authorization (silent authorization, without user consent) 2. The authorization page jumps to the page of obtaining openId (the public number back-end page, written by yourself), and then jumps back to applie 3 as URL parameters after obtaining it. Jump back to the small program, you can get from the parameters to the user public number openId 4. 5. You can use one of the openids as a unique key or a custom unique key to bind the openId back to the backend

Solution Steps

1. Create a New Web-View page (small program side)

Use the Web-View component to jump to the official number authorization page (so you need to bind each other, otherwise you cannot open)

<template> <web-view SRC = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxx&redirect_uri=https:// your domain name/number of public backend for openid page & response _type=code&scope=snsapi_base&state=123#wechat_redirect"></web-view> </template>Copy the code

2. Access openId(public number back end) with accessToken

Here use WxJava wechat open framework github.com/Wechat-Grou… Get accessToken by getting the code back from the openID page. Get the openId from accessToken

@RequestMapping("/getOpenId") public String getOpenId(@PathVariable String appid, @RequestParam String code, ModelMap map) { String openId= ""; try { WxOAuth2AccessToken accessToken = wxService.getOAuth2Service().getAccessToken(code); openId = accessToken.getOpenId(); Log.info (" openId:{}", openId); } catch (WxErrorException e) { e.printStackTrace(); } return openId; }Copy the code

3. Get openId page (public account back end)

Here is a simple use of HTML and JS, introduced weixin JS, used to jump back to small programs

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script Type = "text/javascript" SRC = "https://res.wx.qq.com/open/js/jweixin-1.3.2.js" > < / script > < script > / / get the url parameter function getParameterByName(name, url) { if(! url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); / / match all in conformity with the conditions, and take a final var regex = new RegExp (" [?] of& "+ name +" (= ([^ & #] *) | & # | | $) ", "g"); var results = url.match(regex); var tempResults= results! =null && results[results.length-1]! =undefined? results[results.length-1]:''; var finalResults=regex.exec(tempResults); if(! finalResults) return ""; if(! finalResults[2]) return ''; return decodeURIComponent(finalResults[2].replace(/\+/g, " ")); } function getOpenId(){var code = getParameterByName("code") console.log("wx public code{}",code) var httpRequest =new XMLHttpRequest(); Var url = "https://appid /getOpenId /wx/redirect? code="+code; httpRequest.open('GET',url,true); name=test&nameone=testone" httpRequest.send(); var res; httpRequest.onreadystatechange =function () { if (httpRequest.readyState == 4 && httpRequest.status == 200) { var openId  = httpRequest.responseText; If (openId) {the console. The log (" openId {} ", openId) / / jump back to the small program home page, bring the public issue of openId past wx. MiniProgram. RedirectTo ({url: "/ pages/index/index? MpOpenid ="+openId})}else {/** public id authorization method */ var uri = window.location.href; window.location.href = "Https://open.weixin.qq.com/connect/oauth2/authorize?appid= public appid&redirect _uri =" + + for openId backend page & the payload = code & scope=snsapi_base&state=123#wechat_redirect"; }}}; } getOpenId(); </script>Copy the code

4. Get openId in jump parameter in applet (applet side)

Obtain the openId when the home page is loaded

OnLoad (e) {if (e.popenid) {uni.setStoragesync ('mpOpenid', e.popenid) //Copy the code

Points to note

The public,

  • Background small program management, associated small program

  • You need to set the domain name of the License jump page (get openId page)
  • Setting the IP address whitelist (Obtain the Public IP address of the openId page server)

Small program

  • HTTPS domain name is required for the official environment (SSL certificate can be obtained for free in huawei Cloud, and HTTP can be used for the test environment)
  • Background association Settings, associated with the public number

This article uses the Article Synchronization Assistant to synchronize