文章目录

业务场景具体实现1. 配置微信后台2. 上传校验文件3. 网页静默授权附：官方文档

业务场景

最近我司有个2C的需求，以分享链接的形式推广某线上活动， 要求一个链接覆盖微信、H5和PC三端，尤其要利用好微信用户的分享能力，因此重在提升微信端用户体验。

于是自然有了微信用户免登录（静默登录）的需求，这就要用到微信H5的网页授权功能。

微信H5网页，共有四种入口：

微信公众号内打开手机微信内打开分享链接手机第三方浏览器打开分享链接PC端浏览器打开分享链接

通过浏览器APInavigator.userAgent区分入口。

第1、2个入口，都是微信内置浏览器打开，都能静默获得用户的公众号openid，同一套逻辑。第3个入口，第三方浏览器，无法获得openid，所以跳转到登录页面，需要用户输入手机号和短信验证码登录，常规登录流程。因为pc端我们有独立的项目，所以第4个入口PC浏览器，直接跳转到pc端项目，不考虑。

具体实现

下面具体讲讲微信内置浏览器打开，如何静默获得公众号openid

1. 配置微信后台

公众号管理后台 —— 设置 —— 公众号设置 —— 功能设置 —— 网页授权域名

校验文件静态资源要放在项目根路径，并确保可访问。

2. 上传校验文件

基于 vue Cli 3.0 的相关 webpack 配置，用于设置静态资源线上地址

vue.config.js

const CopyWebpackPlugin = require("copy-webpack-plugin");module.exports = {publicPath: './',configureWebpack: config => {config.plugins.push(new CopyWebpackPlugin({patterns: [{from: "./public/MP_verify_Z7kvg3KVhKYseefd.txt" },]}));},};

项目部署后，检查线上是否能访问到 MP_verify_Z7kvg3KVhKYseefd.txt 文件。例如你的项目地址是/project，那么校验文件地址就是/project/MP_verify_Z7kvg3KVhKYseefd.txt

3. 网页静默授权

配置appid、redirect_uri等参数，从项目页面跳转到微信授权页面https://open./connect/oauth2/authorize，获取code； 参数详见 微信开放文档

const url = location.href; const href = `https://open./connect/oauth2/authorize?appid=${appid}&redirect_uri=${url.slice(0, url.indexOf("#"))}&response_type=code&scope=snsapi_base#wechat_redirect`;window.location.href = href;

url 携带code，从微信授权页面自动跳转回你配置的 redirect_uri 页面，相当于带着code参数重新打开项目网站；解析url中的code，把code传给后端，后端解析出公众号openid，实现绑定

附：官方文档

微信开放文档 - 微信网页开发 - 网页授权