在联调页面之前需要找到联调平台,所以需要自己先建立一个测试公众号方便之后的页面联调;
一、建立测试号
1.(有公众号后台账号),在微信公众平台(https://mp.weixin.qq.com/
)登录,进入“ 开发 ”---“ 开发者工具 ”---“ 公众平台测试账号 ”,随后按照页面指示建立自己的测试公众号;
(没有公众号后台账号),在微信公众平台登录页面进入服务号 “ 开发文档 ” --- “ 开始开发 ” --- “ 接口测试号申请 ” --- “ 进入微信公众帐号测试号申请系统 ”,随后按照页面指示建立自己的测试公众号;
2.手机扫描页面上的 “ 测试号二维码 ”并关注,这样就有自己的测试公众号,之后页面调试都是在这个测试号上进行调试;
3.(有公众号后台账号),还是在刚开发者工具页面进入“ 微信公众平台接口调试工具 ”;
没有账号可直接进入https://mp.weixin.qq.com/debug?token=724775402&lang=zh_CN;
4.将自己刚测试公众号页面上的appID和appsecret分别填入appid和secret,点击 “ 检查问题 ”之后成功了就会看到access_token,复制上之后,在 “ 接口类型 ”中选择 “ 自定义菜单 ” ,“ 接口列表 ”中呈现的是 “ 自定义菜单创建接口 /menu/create ” ,将刚复制的access_token粘贴在对应的access_token中,body中填入自定义的菜单(如下),点击 “ 检查问题 ”成功后即可在手机测试公众号上看到刚定义的按钮;
举例子:(按照自己的需求选择不同的type即可)
{
"button":[
{
"type":"click",
"name":"今日歌曲",
"key":"V1001_TODAY_MUSIC"
},
{
"name":"菜单",
"sub_button":[
{
"type":"view",
"name":"搜索",
"url":"http://www.soso.com/"
},
{
"type":"miniprogram",
"name":"wxa",
"url":"http://mp.weixin.qq.com",
"appid":"wx286b93c14bbf93aa",
"pagepath":"pages/lunar/index"
},
{
"type":"click",
"name":"赞一下我们",
"key":"V1001_GOOD"
}]
}]
}
5.需要注意的是,需要启动一个页面的服务,如果没有就自己本地把项目启动后,将项目前边的域名端口号复制粘贴在如下位置确认,然后在JS接口安全域名处也同理;
6.接口配置信息模块中,URL是项目前路径域名(同上),Token随意定义;
以上就建立好一个完整的测试号功能了;
二、调试登录
1.首先声明的是登录必须后台配合,前端无法独自完成,重点!!!
官方文档上写的非常清晰,但是让我头疼的是他没有写清楚哪块是后台配合哪块是前端完成,所以对刚接触的小白来说真是难受的很;
( 开发文档--- “ 微信网页开发 ” --- “ 网页授权 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html” )
1)首先前端需要做的是新建一个页面,本文前端以vue为例;
2)建好页面后根据文档中提示将对应参数写入
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
中,redirect_uri后接的就是1)中页面的完整路径,注意页面路径应当使用https链接来确保授权code的安全性;scope有两个参数分别是 :
“ snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid)”,
“ snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )”
将上面路径完整好后,最关键的一步到了,在一中提到的自定义菜单中,定了按钮,那就将本次完整好的路径作为一个跳转路径放入自定义的JSON中,写法如下:
{
"button":[
{
"type":"view",
"name":"go go go!",
"url":"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" "&redirect_uri=" "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
}
]
}
菜单创建之后,点击 “go go go!”按钮,会自动跳转到刚定义的页面;
3)在跳转到的这个vue页面首先需要做的逻辑是获取code,微信跳转过来后会在路径中自动带有code=""的参数,前端需要的做的是拿到这个code并传给后台小哥,此时后台小哥需要提供一个接口得到code,通过微信提供的https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code 接口去得到access_token ,
之后用 https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN来获取用户信息,之后就是后台来做登录的逻辑,如果这个人没登录过,后台就返回没登录的逻辑,前端跳到 “ 登录 ” 页面进行登录,若该用户已登录,后台返回用户信息,前端跳到应跳的页面就可以了;
以上就是微信公众号第三方h5页面完成的登录逻辑介绍;
三、测试号与正式服务号的对照
最后来说说测试号与正式服务号的对照。
1)在“设置”---“公众号设置”中,选择 “功能设置” ,将里面的 “JS接口安全域名” 和 “ 网页授权域名 ”改成生产服务的域名即可
2)在“功能”---“自定义菜单”中,将页面访问的路径(二中提到的长路径)放入其中即可,
注意如果你项目已经布到了一个生产环境,那以上提到的域名以及页面路径都是生产环境的,不再是自己本地启动的服务或者测试服务。