微信公众号开发基础框架 |
您所在的位置：网站首页 › 公众号开发框架 › 微信公众号开发基础框架 |
微信公众号开发基础框架
|
公众号和小程序作为微信的两大生态，对于开发者而言。基本上是绕不过去的两座大山。前面我已经出了几期博客关于小程序授权登录的。那么今天就来分享一下关于公众号授权回调这块吧。业务场景：假如需要做一个公众号表单收集，那么第一步绕不开的是不是还是授权呢？ 1.准备工作相信很多程序员一般接手的都是他人项目进行二次开发，所以基本也很少去考虑项目底层的架构，请求的封装，权限的控制，路由的拦截等等这些。这些都是别人做好的，我们拿来即用就行，只管关注写页面和对接口就行。但是，如果不试试从零开始做一个完整的项目，你又怎么知道自己的不足呢。 假如，现在一个问题摆在你面前，leader要你做一个公众号进行用户信息及表单收集。整个前端就只有你自己。试问此刻阁下又该如何自处？ 底层框架的搭建，直接去git或开源社区上找。我并不反对在他人开源的项目基础上做二次开发，毕竟站在巨人的肩膀上会让我们更加事半功倍。前提你拥有理解并改动他人底层代码的能力。使其更加契合你系统本身的业务。 下面以该基础框架项目做演示，也是在git上找的。并经过了本地测试（利用测试公众号脱离后端的情况下）。实现了授权回调。 1.公众号H5基础框架：https://download.csdn.net/download/qq_34761385/89045823
2.先理解下公众号官方文档关于授权这块的说法： 网页授权 | 微信开放文档
3.申请测试公众号 微信公众平台 去该平台申请一个测试公众号，获取公众号的appid和secret。 2.本地调试过程将代码下载到本地运行后，即可在微信开发者工具中打开地址。访问后就会不出意外的报错。不要害怕，我们针对问题一步步解决，这个解决问题的过程也是我们了解微信公众号生态的过程。 tips:这里有人会有疑问，为什么能授权回调获取到信息，一般不是通过后端才能解密获取吗，这里是因为用了代理。直接和微信服务器做了对接。 这里授权回调核心代码就是app.vue 
加载中... 
本地调试请在微信开发者工具中打开 1.微信开发者工具左上角-->微信开发者工具 2.更换开发模式-->公众号网页调试 3.输入 复制 {{ open_url }} 务必是该公众号的开发人员并且关注了公众号
请在微信中打开
加载失败，请刷新或退出重试 import wx from '@/utils/wx' import { getWxToekn, getWxUserInfo } from '@/api/public' export default { name: 'App', data() { return { // 微信配置 wxConfig: { appid: 'wxc3c853868437900d', AppSecret: '3ba0e66a7a12fd1434f2fbbd759143ef', // 本地的时候需要netapp映射一下，具体可百度 redirect_url: process.env.NODE_ENV === 'development' ? 'http://liuqing.top:8080' : location.protocol + '//' + location.host, // 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息） scope: 'snsapi_userinfo', // 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节 state: '0', // 获取code code: this.$func.getUrlParam('code') }, // 微信的url open_url: '', // 是否加载完毕 isLoading: true, // 0:本地，开发者工具环境 1:本地，浏览器环境 2:线上，浏览器环境 3:线上，微信环境 4:线上或本地(开发者工具环境)->但是加载wx-sdk失败了 runEnv: -1 } }, mounted() { // 需要微信回调code的url this.open_url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.wxConfig.appid + '&redirect_uri=' + this.wxConfig.redirect_url + '&response_type=code' + '&scope=' + this.wxConfig.scope + '&state=' + this.wxConfig.state + '#wechat_redirect' // 微信环境准备 wx(this.wxConfig, this.open_url).then((obj) => { this.runEnv = obj.env // 获取token getWxToekn({ appid: this.wxConfig.appid, secret: this.wxConfig.AppSecret, code: this.wxConfig.code, grant_type: 'authorization_code' }).then(res => { this.$store.commit('user/wxUserAc', res) // 获取用户信息 getWxUserInfo({ openid: res.openid, access_token: res.access_token }).then(res2 => { this.isLoading = false this.$store.commit('user/wxUser', res2) }) }) }).catch((obj) => { this.isLoading = false this.runEnv = obj.env this.$notify({ type: 'danger', message: obj.msg }) }) }, methods: { } } #app { width: 92%; padding: 0 4%; margin-top: 40px; word-wrap:break-word; word-break:break-all; } #app .warning > img { display: block; margin: 0 auto; } .errorColor { color: #ff4a4a; } #app .warning > p { text-align: center; font-size: 16px; margin-top: 30px; } #app .warning > ul > li { margin: 5% 0; } #app .warning > ul > li > span.errorColor { font-size: 14px; } #app .loading { width: 100%; } #app .loading > img { width: 100%; height: 100%; } #app .loading > p { font-size: 16px; text-align: center; font-weight: 600; padding: 0; margin: 0; }下面我要说的就是涉及后端做的工作，但是因为这里我们用到了测试公众号，又是走的代理直接对接微信服务请求，所以就绕过了后端。 从这里的回调地址构建代码就能看出来，appid和AppSecret填写你申请的测试公众号的，微信开发是需要有开发权限的，所以别忘了去扫码关注测试号，绑定上你的微信号。然后，回调一般来说必须走域名，而且域名还要做公众号网页授权回调域名绑定。这里我们在测试公众号进行绑定就行，域名+端口的形式。
因为本地一般都是走的ip+端口。那么怎么实现域名加端口能访问到本地启动的服务呢，这里我们就涉及到了hosts文件的修改了，一般在C:\Windows\System32\drivers\etc目录下。
这样就实现了本地的授权回调了，通过这一系列操作，是不是对微信公众号的开发有了更深刻的理解了呢。 |
【本文地址】
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |