uniapp - 微信公众号授权登录

【缘由】

采用uniapp进行微信小程序和微信公众号双版本开发;考虑到用户唯一性,我们后端确定了以“unionid”.作为唯一标识。

有的小伙伴估计也是刚入这坑,我就简单说一下步骤流程

 

【摸索】

很抱歉,这个uniapp是高度仿造微信小程序的,路由管理也是;请不要用vue的路由管理做比较

假设我们的入口是:pages/index/index ,那么我们就要在这个页面获取到code码,并且与后端交互

对于这种应用,我们一般让后端多次跳转获取到code,然后发送到前端,所以我和后端摸索了一下午,终于有了结果

 

【运用】

后端跳转获取code码,最后拼接,假如主域名是: https://www.playsort.cn; 那么支付目录就是: https://www.playsort.cn/ (注意参数大小写还有就是协议,最后用真机调试)

后端:主域名是 https://www.playsort.cn,那么redirect_uri回调返回地址就是: https://www.playsort.cn/#/pages/index/index?code='xxxxxx'

前端:在onload调用一个后端获取code的那个接口即可实现跳转,最后在pages/index/index的options参数接受到code

 

【结尾】

我想问问uniapp公众号怎么在本地调试呢?哈哈 - 已在示例中解决

 

【本地调试】 - 2019-09-26踩坑记录


一、需要微信开发者工具(网页),可能会出现跨域(CORS);接上参数

 

--args --disable-web-security --user-data-dir

 

 

 二、配置一下h5 devServer

 

 

 

三、调试一定会用到ngrok(先可以用免费版测试) ,需要把本地地址映射到域名(每次debug务必先打开浏览器,否则无法进行跨域请求).

详情见本篇博主文章:微信公众号授权问题

 

 

四、下载uniapp-前端微信公众号授权demo

点击下载

 

posted @ 2019-06-10 21:13  Sunsin  阅读(33508)  评论(3编辑  收藏  举报