執行流程
前端 --> 后端服務 --> 微信服務（openId/UnionID）
微信公眾號網頁開發授權：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#0

<template><div></div> </template><script> export default {name: 'Index',data () {return {}},created () {this.getCode()},// ***放main.js中；放入口文件中methods: {getCode () { // 非靜默授權，第一次有彈框const code = getUrlParam('code') // 截取路徑中的code，如果沒有就去微信授權，如果已經獲取到了就直接傳code給后臺獲取openIdconst local = window.location.hrefif (code == null || code === '') {window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + window.APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'} else {this.getOpenId(code) //把code傳給后臺獲取用戶信息}},getOpenId (code) { // 通過code獲取 openId等用戶信息，/api/user/wechat/login 為后臺接口let _this = this// 后端接口實現：獲取code后，請求以下連接獲取access_token: https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_codethis.$http.post('/api/user/wechat/login', {code: code}).then((res) => {let datas = res.data/* // 前端--> 應用后臺 --> 微信后臺{"access_token": "ACCESS_TOKEN","expires_in": 7200,"refresh_token": "REFRESH_TOKEN","openid": "OPENID","scope": "SCOPE"}*/ if (datas.code === 0 ) {console.log('成功')}}).catch((error) => {console.log(error)})},getUrlParam (name) { // 獲取url指定參數var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)') // 構造一個含有目標的正則表達式對象var r = window.location.search.substr(1).match(reg) // 匹配目標參數if (r != null) return unescape(r[2])return null // 返回參數值}} } </script><style lang="less" scoped></style>

微信h5靜默、非靜默授權獲取用戶openId的方法和步驟https://blog.csdn.net/qq_35430000/article/details/79299529

解決微信授權成功后點擊按返回鍵出現空白頁和報錯的問題https://blog.csdn.net/qq_35430000/article/details/79299529

總結

以上是生活随笔為你收集整理的微信—前端获取openId方法和步骤的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。