没有不值得去解决的问题,也没有不值得去学习的技术!

在ShopNC中实现微信登录,使用Detector来检测浏览器相关的流程

在mobile客户端下,直接跳转至授权页面的网页

1、在微信客户端中实现微信登录,弹出二维码扫描层,应该取消,直接跳转至授权页面才是,如图1:

在微信客户端中实现微信登录,弹出二维码扫描层
在微信客户端中实现微信登录,弹出二维码扫描层

2、在移动浏览器中,弹出二维码扫描层,扫描之后报错,如图2:

在移动浏览器中,弹出二维码扫描层,扫描之后报错
在移动浏览器中,弹出二维码扫描层,扫描之后报错

3、后台 – 平台 – 会员 – 账号同步 – 微信公众平台,如图3:
执行SQL:
INSERT INTO `trade_setting`(`name`, `value`) VALUES (‘mp_weixin_isuse’,’1′)
INSERT INTO `trade_setting`(`name`, `value`) VALUES (‘mp_weixin_appid’,’wx5c318e640e87f7e8′)
INSERT INTO `trade_setting`(`name`, `value`) VALUES (‘mp_weixin_secret’,’1f436a3aa0dbfdac1c8e1c8f72d2fbec’)

后台 - 平台 - 会员 - 账号同步 - 微信公众平台
后台 – 平台 – 会员 – 账号同步 – 微信公众平台

4、使用Detector来检测浏览器,网址:http://detector.dmolsen.com/ ,其是可以自动适应新的浏览器、版本和设备对每一个浏览器使用独特的用户代理字符,基于Modernizr实现,如图4:

使用Detector来检测浏览器,网址:http://detector.dmolsen.com/
使用Detector来检测浏览器,网址:http://detector.dmolsen.com/

5、复制目录lib/Detector至core/framework/Detector,如图5:

且设置目录:user-agents/core/, user-agents/extended/, config 为可写;

复制目录lib/Detector至core/framework/Detector
复制目录lib/Detector至core/framework/Detector

6、规则制定如下,控制器、模板文件中代码如图6、7:

(1)pc、tablet:弹出二维码扫描层(此处微信开放平台,网站应用);

(2)mobile浏览器:隐藏;

(3)mobile客户端:直接跳转至授权页面(此处微信公众平台,服务号);

36kr.com:移动端暂不支持微信登录,请使用绑定的手机或邮箱进行登录。
dianping.com:隐藏微信登录按钮(采用此方案);

控制器文件中代码
控制器文件中代码
模板文件中代码
模板文件中代码

7、在mobile客户端下,直接跳转至授权页面的代码如图8:

在mobile客户端下,直接跳转至授权页面的代码
在mobile客户端下,直接跳转至授权页面的代码

8、在mobile客户端下,直接跳转至授权页面的网页,如图9:

在mobile客户端下,直接跳转至授权页面的网页
在mobile客户端下,直接跳转至授权页面的网页

9、提交SVN时报错,如图10:

the working copy at

is too old(format 10) to work with client version ‘1.8.10(r1615264)’ (expects format 31).you need upgrade the working copy first.

the working copy at is too old(format 10) to work with client version '1.8.10(r1615264)' (expects format 31)
the working copy at is too old(format 10) to work with client version ‘1.8.10(r1615264)’ (expects format 31)

10、删除core/framework/Detector下的所有.svn目录,以防止SVN冲突,提交成功,如图11、12:

删除core/framework/Detector下的所有.svn目录,以防止SVN冲突
删除core/framework/Detector下的所有.svn目录,以防止SVN冲突
SVN提交成功
SVN提交成功

11、在Edge浏览器下,报错,如图13:

SCRIPT16389: 未指明的错误。

在Edge浏览器下,报错:SCRIPT16389: 未指明的错误。
在Edge浏览器下,报错:SCRIPT16389: 未指明的错误。

12、打开网址:http://detector.dmolsen.com/ ,发现也有此错误,如图14:

打开网址:http://detector.dmolsen.com/ ,发现也有此错误
打开网址:http://detector.dmolsen.com/ ,发现也有此错误

13、解决方案,便是基于$_SERVER[‘HTTP_USER_AGENT’],如果为IE10、IE11、Edge,则不使用Detector来检测浏览器,如图15:

基于$_SERVER['HTTP_USER_AGENT'],如果为IE10、IE11、Edge,则不使用Detector来检测浏览器
基于$_SERVER[‘HTTP_USER_AGENT’],如果为IE10、IE11、Edge,则不使用Detector来检测浏览器

关于作者 · 持续学习与技术实践

我是一名拥有 15 年以上开发经验的技术从业者,自 2013 年起持续运营个人技术博客,记录工作与个人项目中遇到的真实问题,以及解决问题过程中的探索、实践和思考。

除了技术写作,我也在持续开发和维护自己的独立项目,探索新技术和新工具在实际场景中的应用。我始终相信,没有不值得去解决的问题,也没有不值得去学习的技术。

如果这篇文章对你有所帮助,欢迎浏览博客中的其他文章,也欢迎交流技术经验与想法。

关于我  ·  GitHub  ·  邮件联系