1.准备工作

第一步:
通过该地址https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
获取到微信公众号测试号AppID与appsecret （测试公众号可以测试使用，个人公众号不允许使用。微信认证服务号可以使用，微信认证订阅号不可以使用）。
接口权限查看链接:
https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html
测试公众号在生成测试公众号界面中按照提示微信关注即可。非测试不仅需要关注，还需要将微信公众平台中还需要将开发人员给设置一下才可以使用web-view。

同时需要修改一下网页授权接口

因为是测试，就修改成本地IPv4地址加你后端的端口号即可。注意不允许127.0.0.1奥。

以上是我的。正式环境下需要使用到域名，测试环境可以不需要。

第二步:
还需要弄一个微信小程序的测试号。拿到其中的AppID与appsecrt。注意:小程序的跟微信公众号的AppID不是同一个。

第三步:
我这边后端使用的是WeiXin-JAVA开发包。具体可以通过链接访问
https://github.com/Wechat-Group/WxJava
也可以自己根据自己能力自行实现。

2.应用场景说明

其他应用场景我不知道，根据我个人实际情况(不使用unionID情况下可以使用当前方法)

3.实现步骤

第一步: 下载微信开发工具(不然怎么测试呢对吧)

第二步: 使用微信小程序的AppId创建一个微信小程序项目，然后官方提供的简单入门Demo，你可以使用也可以不使用。很简单的程序，一下就写好了，可以不用官方的。

第三步: 编写一个按钮，通过点击按钮实现去获取微信公众号OpenID

// index.wxml
<button bindtap="getGzhOpenId">获取公众号OpenId</button>

一个按钮一个点击事件。

点击事件中代码如下:

// index.js
getGzhOpenId(){wx.navigateTo({url: '/pages/test/test',})}

写过小程序的都知道，这就是一个页面跳转。但是这个跳转的不是正常页面，而是一个带有web-view的界面。

// test.wxml
<web-view src="{{src}}">
</web-view>

整个页面就两行代码，这等于是一个中转站，不需要被用户看到。src是可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。

// test.js
onLoad(){let redirect_url = 'http://测试公众号网页授权的地址/后台接口地址/appid';   this.data.src = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=测试号AppID&redirect_uri=' + escape(redirect_url) + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';this.setData({src: this.data.src})
}

以上是重点。重新梳理一下:
小程序加载进入index.wxml -> 点击按钮跳转到test.wxml -> 来到test.wxml会执行js中的渲染方法也就是onLoad(){} 渲染中我们就可以开始获取公众号OpenID了。

redirect_url: 回调地址

this.data.src: 也就是给web-view中的src赋值一个地址，web-view会去打开这个地址。打开后就会获取到code然后回调redirect_url地址并且携带微信公众号code(该code非小程序wx.login()的code)。

地址中参数可以参考官方文档:
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

需要特别注意的就是 scope 参数。他有两个值一个是snsapi_base。另一个是 snsapi_userinfo。前者是获取openId。后者是获取OpenId以及用户信息，并且不需要关注公众号也可以获取到。WeiXin-Java-Demo中接口是获取userInfo，所以需要将scope更换一下，否则会报错。如果只需要获取OpenId。看以下示例：

@RequestMapping({"/getOpenId"})public String getOpenId(@PathVariable String appid, @RequestParam String code, ModelMap map) {if (!this.wxService.switchover(appid)) {throw new IllegalArgumentException(String.format("未找到对应appid=[%s]的配置，请核实！", appid));} else {try {WxOAuth2AccessToken accessToken = this.wxService.getOAuth2Service().getAccessToken(code);map.addAttribute("openId",accessToken.getOpenId());} catch (WxErrorException var6) {var6.printStackTrace();}return "xxx";   }}

其实就是weixin工具包封装了其方法，Demo中没有使用而已，copy接口，粘贴修改一下即可。

到此就拿到了OpenId了，可以Debug调试，但是奇怪，我的小程序为啥还是白屏中啊。哈哈哈因为web-view界面就我得理解就是html中的ifrname嵌入式页面。

接下来也是重点
看后台接口上图，返回的是xxx。xxx代表一个页面，也就是xxx.html界面。我们需要通过springmvc将视图返回给小程序，小程序的web-view打开的就是你在后台写的界面。
那么 xxx.html中写什么呢？继续往下看

xxx.html在小程序中被打开，然后你要展示东西吗？No!No!No! 不需要，不过如果你刚需我就不说啥了。

// xxx.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</HEAD>
<BODY>
</BODY>
<SCRIPT LANGUAGE="JavaScript">function back(){wx.miniProgram.redirectTo({url: "/pages/index/index?mpOpenid=${openId}"})//wx.miniProgram.postMessage({data:"${openId}"})}back();
</SCRIPT>
</HTML>

将xxx.html返回给小程序后加载该视图，视图执行back()方法。使用小程序中redirectTo返回到你想去的界面。该界面必须小程序中存在哦！然后一定一定要引入jweixin。否则无法在网页中使用小程序的方法。返回呢可以将微信公众号的openId带在url上返回到小程序的index界面。

onLoad(e){console.log(e);
}

就可以获取到OpenID了，通过以上方式拿到后就可以与wx.login获取到的小程序OpenID进行对应起来。

以上方法呢还可以拓展很多种情况。例如小程序首次加载先看10s的注意公告。也可以在打开web-view页面携带上小程序OpenId，一口气在后端拿到公众号OpenID后持久化存储。就不需要再返回了。

结语

本人第一次编写CSDN，也是第一次使用markdown写，写得少，也没美化的眼光。重点还是解决了一个工作中的问题。以此作为记录，以防下次面试官问我项目中碰到的问题(解决了那还叫碰到的问题吗?)。同时该文章也希望大家遇到困难能够用得上，不懂可以在评论区中交流或者私信。因为第一次，所以也是自己查百度然后慢慢摸索折腾明白的。也看了其他类似的文章。从他们文章中找到的灵感并且，我也附带在下面，可以同时看，这样就会更快速的明白。

https://blog.csdn.net/qq_41929578/article/details/121748935
https://blog.csdn.net/daengwei/article/details/124535274
https://blog.csdn.net/qq_21492635/article/details/119491131

微信小程序通过web-view网页授权获取用户公众号OpenID相关推荐

微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序结合腾讯位置服务获取用户所在城市信息
背景实现小程序进去后获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上. 微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是 ...
【微信小程序腾讯位置服务】获取用户所在城市信息实战
背景实现小程序进去后获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上. 微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是 ...
微信小店里的微信小程序跳转产品及类目，公众号产品吐槽
首先要吐槽一下微信公众号,这个产品真是不完善,搞了个微信小店,里面的产品没有搜索栏,无语了.还有微信搜索商品,怎么总是搜索别的平台的产品呢?咋不搜索微信小店里的商品呢?这个公域流量为啥微信要给别的电商 ...
记录毕设做小程序的坑（微信小程序体验版wx.request无法获取用户的openid）
毕设想做一个微信小程序,在体验版进行测试时发现,用户登录时不能把用户的信息存储到云数据库中,我当时真的谢了.测试了一下发现是wx.request获取不到openid了,因为我写的是获取到openid之 ...
uniapp 微信小程序保存图片到系统相册（获取用户是否开启授权保存图片到相册。）
1.预览效果图当用户点击拒绝按钮后的截图: 用户点击不授权则关闭弹窗单独给用户点击授权后, 跳转到授权页面开启授权后: 2.代码 <template><view class ...
微信小程序与web页面制作的区别
前言最近在做一个微信小程序版的个人博客,本来我还有点胆颤,毕竟也没正儿八经的去学一下,不过我之前接触过,而且web方面(网页制作)的基础还可以,所以斗胆就试一试咯,到今天为止,微信小程序页面终于算是 ...

微信小程序通过web-view网页授权获取用户公众号OpenID

小程序中实现网页授权获取微信公众号OpenID

1.准备工作

2.应用场景说明

3.实现步骤

结语

微信小程序通过web-view网页授权获取用户公众号OpenID相关推荐

最新文章

热门文章