首先创建一个项目,我们采用uni-app来作为我们的前端框架
使用正式版(对应HBuilderX最新正式版)
在安装过程中选择默认版本即可
安装完成后按照提示进入我们的项目根目录下执行启动命令
这里我们本地学习,所以可以申请一个测试哈,方便我们快速了解微信相关配置。在实际开发中我们会将我们的网站配置在真正的公众号中。
请求如下接口获取Access token,这个Access token有7200秒的有效期,并且接口每天限制2000次请求,所以一般由后端去请求该接口并保存起来,并且设置定时刷新。但是由于现在学习阶段,所以我们前端可以直接请求
新建 src\util\
会产生跨域问题,所以我配置了前端代理,配置方式如下:
首先在项目根目录新建 /
",
然后重启项目,之后在发送请求时,用 /weixin
开头去发送请求,则node会自动帮我们吧请求地址代理到 /
,从而解决跨域问题
下面代码即可为测试号创建一个普通菜单
授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理 |
返回类型,请填写code |
应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 ) |
重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节 |
无论直接打开还是做页面302重定向时候,必须带此参数 |
点击按钮跳转到授权页面,然后微信会将参数拼接到回调地址中,我们从地址中获取code参数来获取网页授权的 access token
获取token的接口地址
首先我们封装一个获取路径参数的方法
然后再添加一个根据code
获取token
的方法,这里的APPID
和APPSECRET
放在了data
中,这里可以优化成写一个配置文件,页面可以从配置文件中获取。
然后在 onLoad
中先判断路径上能否获取到 code 值,如果获取到后再调用接口去获取网页授权token
// 根据网页授权token和openid获取用户基础信息
微信获取用户信息demo
* 通过跳转获取用户的openid,跳转流程如下:
* 2、微信服务处理完成之后会跳转回用户redirect_uri地址,此时会带上一些参数,如:code
//触发微信返回code码
* @return 返回已经拼接好的字符串