记一次微信H5(公众号H5)开发流程

一  处理内网穿透

1.注册一个内网穿透(调试微信api)  https://qydev.com/index.html

到处内网穿透配置完成 

接下来下载客户端 https://qydev.com/download.html

下载完 安装完后双击 

启动输入 '隧道列表中的 key'

即可使用你配置的域名访问本地项目 我这里是 用http://hm.free.qydev.com 访问

二 配置微信测试账号的相关信息

1. 注册一个公众号https://mp.weixin.qq.com/

2.使用注册公众号的微信登录测试接口https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

将appid 和 appsecret 保存下来

    通过appid 拿code

    拖到页面底部 找到网页服务 找到网页账号 点击网页授权获取用户基本信息 选项中的修改 

展示弹窗 输入上面使用内网穿透的域名地址 

即可在微信开发者工具中使用这个地址访问你本地项目

获取code  在项目中打开这个地址 

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 

APPID: 就是上面的appid    REDIRECT_URI 需要重定向的地址(微信会将把code拼在你的url后面重定向到你的项目中)

  前端获取code后 将code 和appsecret 传给后端  必须后端去获取用户信息 (微信规定的)

微信官方文档 

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html