微信开发点击链接

2014-06-18 15:52:15 wkrjwlt 阅读数 17805

这个功能和微信提供的接口无关,只牵扯到微信的图文消息的另一种应用。

1、登录进入需要被关注的微信公众号,进入管理-》素材管理,新增一条单图文消息,标题为点击下方链接关注XXX,图片可以是一张白色的图片,正文可以是此微信公众号的一些简介。

2、保存后回到图文消息列表,打开刚才保存的图文消息,复制打开窗口的URL地址,这个地址就是在微信上点击以后跳转到图文消息,在图文消息第二行有一行蓝色字,点击就会弹出关注提示

2017-12-25 11:25:04 lykio_881210 阅读数 96874

背景描述

-w272

相信有模拟微信页面请求的测试都有看到过这个页面,简单点说就是爬虫爬微信页面,进行回放的时候会出现这个页面。大概在1年前,专门安排了一个人去解决这个技术问题,遗憾的是当时没有找到解决方案,接下来所有微信端的接口测试和性能测试都无法进行,今天和大家分享下我们的解决方案,希望大家可以绕过微信的坑。

业务场景

我这里以JMeter来举例,我们可以通过在JMeter上开启代理,手机上设置代理来录制微信端的请求,以下为在微信端的业务对应生成的脚本:

-w800

录制完成后,我们进行回放,你会发现在查看结果树中,会重定向到微信授权,接着就开始提示:请在微信客户端打开链接。

-w800

这里补充几个录制的小技巧

-w800

1、每个组放入一个新的控制器:在手机端上做的一次操作所产生的请求会被放在一个控制器中,非常方便;
2、选中记录HTTP信息头、添加断言、Regex matching :自动添加信息头和断言;

问题分析

这里我们看一下请在微信客户端打开链接页面对应的代码:

<script type="text/javascript">
            var ua = navigator.userAgent.toLowerCase();
            var isWeixin = ua.indexOf('micromessenger') != -1;
            var isAndroid = ua.indexOf('android') != -1;
            var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
            if (!isWeixin) {
                document.head.innerHTML = '<title>抱歉,出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">';
                document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在微信客户端打开链接</h4></div></div>';
            }
        </script>

重点看:

var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;

说明微信的这个提示是通过判断userAgent中是否包含micromessenger确认是否从微信中打开。
好了,我们查看以下HTTP头中的userAgent:

-w800

录制的时候自动添加了录制HTTP请求头的,那么为什么在JMeter打开会仍然会提示呢?这里怀疑是微信故意留的坑或者是微信开发这个页面的人英语四级没过。

解决方案

经过和我们程序猿哥哥陈丹明陈建清一番讨论,一开始没有解决方案;此时丹明怀疑MicroMessenger这个单词写错了,应该是:micromessage!一试,果然!
好吧,程序猿你赢了,看来懂英语是多么的重要。

最终解决

在HTTP请求头里面将MicroMessenger修改成 micromessage

-w800

小结

1、请在微信客户端打开链接 这个问题困扰了我们很久,今天总算解决,完美解决;
2、感谢程序猿的大胆怀疑,给他们点赞;
3、自动化测试过程中如果碰见了技术瓶颈,不妨多和研发沟通,他们总能给你一些指导。

Note:

1、单纯的访问页面,则修改成:micromessage就好;
2、在访问页面之前需要进行授权登录,则需要和开发沟通下具体的业务逻辑

3.、是将MicroMessenger替换成micromessage

2015-12-15 17:20:04 u013142781 阅读数 14160

时间葱葱,小宝鸽入职也有半年了,刚入的时候刚好有负责开发一个微信企业号的新项目。从项目的一无所有到第一版上线,再一步步完善升级。期间学到了许多东西。对微信开发也是有了一定的认识。在此,小宝鸽再次无私地分享给大家啦。

其实微信开发跟web开发没有多大的区别,只是经过了微信,然后再由浏览器打开。因为经过微信,因此你的web会附加一些微信平台所提供的一些功能,如获取用户地理位置、获取微信用户头像、拍照上传、发送微信消息等等,通过微信接口即可调用。要将web项目挂靠在微信公众平台上是需要一个帐号的。微信公众平号分为服务号、订阅号、企业号。这三种帐号有一些小区别,但是开发流程都是差不多的,只是开放的功能上有些区别,知道其中一种开发,其他的也差不多。关于具体区别先不作过多介绍,后面的文章会讲到。接下来我们以企业号为例带大家进入微信开发之旅。

接下来将从下面几个角度带大家了解微信开发:

(1)申请企业号体验号
(2)企业号的一些配置
(3)微信JS接口调用

好了现在马上开始:

一、申请企业号体验号

1.1、首先来到微信企业号的网址 https://qy.weixin.qq.com/

这里写图片描述

1.2、可以看到“开发者中心”字眼,点击进入相应页面

这里写图片描述

1.3、进入后可以看到“欢迎你,开发者”的公告,右侧有个“申请体验号”,点击进入相应页面。

这里写图片描述

1.4、进入“申请体验号”后,可以看到注册流程,按照注册流程填写相应资料并申请,验证邮箱绑定微信号后体验号就申请成功啦。

这里写图片描述

1.5、申请成功之后,回到https://qy.weixin.qq.com/,用微信扫一扫扫描登录下方的二维码,输入对应密码即可登录成功,来到你的微信企业号首页啦。

这里写图片描述

二、企业号的一些配置

2.1、添加子部门,如下图,将鼠标放到“企业号体验43560625”就会出现小下标,然后点击添加子部门,填写好信息保存,然后刷新页面即可。

这里写图片描述
这里写图片描述

2.2、添加成员,点击通讯录,然后如下图进行操作,即可添加成员。部门选择刚刚添加的部门

这里写图片描述

2.3、然成员关注该企业号,如果添加成员的时候有输入邮箱,可以在通讯录的成员管理那里给成员发送关注邀请,邀请会将企业号二维码发送到对应成员邮箱。另外一种方法直接点击“设置”即可看到体验号二维码。让成员扫这个二维码关注也是可以的(需要注意的是,体验号只能最多关注10个成员哦)。另外下图中的CorpID (wx7099477f2de8aded)非常重要的,先记录起来,下面接口微信JS调用的时候会用到。

这里写图片描述

2.4、添加管理组,点击“设置”–>”权限管理”,就会跳转到下图页面,然后“新建管理组”,选择管理员的时候,如果提示该成员已在其他管理组,那么估计需要添加成员了。小宝鸽添加了一个管理组“测试”,添加成功后如下图。其中Secret也是非常重要的东西,之后JS接口调用获取签名需要用到。

这里写图片描述

2.5、应用管理。猿友们可以看到左侧菜单中有个”应用中心”。点击应用中心将来到下图页面。”企业小助手”就是本企业号默认存在的一个应用。猿友们可以自行创建更多的应用。

这里写图片描述

点击”企业小助手”将会来到下面的界面,默认是回调模式,我们需要设置成普通模式。

这里写图片描述

点击”普通模式”,启用模式,然后启用”自定义菜单”。

这里写图片描述

自定义菜单启用完成之后,点击自定义菜单中的设置,将会跳转到如下页面:

这里写图片描述

添加菜单”测试”,然后设置”微信信息”,内容为”测试啦啦啦”,保存–>发布,然后右边有个预览,点击菜单”测试”,就会自动回复消息,如下图:

这里写图片描述

菜单响应除了发送微信消息也可以是跳转到某个链接,因为跳转链接是需要配置可信域名的,因此先介绍如何配置可信域名
应用管理还有一个地方需要设置的,那就可信域名,如下图,回到”企业小助手”应用的详情页面,添加可信域名,可信域名是有一些要求的(1. 设置的应用域名须通过ICP备案的验证,2. 请使用二级或二级以上域名),这里小宝鸽网上找了一个”yo.bbdfun.com”,猿友们也可以使用这个

这里写图片描述

配置了可信域名之后呢,猿友们可以配置跳转到链接的菜单啦,注意配置的url必须是已可信域名作为域名哈,例如:

这里写图片描述

三、微信JS接口调用

3.1、微信提供了一系列的JS接口,使得公众号企开发十分快捷高效,微信JS-SDK接口:
http://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3
各位猿友们可粗略看一下上面文档,便可知道大概提供的一些功能。

3.2、各位猿友们粗略看完”微信JS-SDK接口”,应该有看到下图的说明吧,接口的使用是需要注入权限验证配置的,现在我们上面的体验号等等的一系列操作就派上用场啦。

这里写图片描述

3.3、接下来将会一点点向大家介绍怎么调用微信接口啦

微信接口文档之后的猿友们应该都知道微信接口的调用步骤如下:

这里写图片描述

最重要的还是步骤二:权限验证配置。里面有几个参数,小宝鸽将会为猿友们一一介绍:
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: ”, // 必填,企业号的唯一标识,此处填写企业号corpid
timestamp: , // 必填,生成签名的时间戳
nonceStr: ”, // 必填,生成签名的随机串
signature: ”,// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

debug、appId和jsApiList相信各位猿友们应该都知道大概是什么东西。那么现在给各位猿友们重点介绍:timestamp、nonceStr、signature。
其实timestamp、nonceStr是用来生成signature的。
js生成时间戳方法:timestamp = Date.parse(new Date()); //1414587457
另外,nonceStr也是一串随机串,我们也用时间戳就好了nonceStr=Date.parse(new Date()); //1414587457

剩下的就是最关键的signature生成方法,这里需要引入access_token概念
生成signature签名第一步获得access_token:
浏览器输入:https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=wx5f24fa0db1819ea2&corpsecret=uQtWzF0bQtl2KRHX0amekjpq8L0aO96LSpSNfctOBLRbuYPO4DUBhMn0_v2jHS-9
即可得到access_token:YoxXjnJS57r8gk5Nf-Ki_mSvn98fILxv56EE7NFWE3qQNOH3OaW4iDWwLc05g1mdbuNhipK8fgy-q-pA93DqFw(其有效期为7200秒,即两个小时)

这里写图片描述

生成signature签名第二步通过access_token获得ticket:
浏览器输入:https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=YoxXjnJS57r8gk5Nf-Ki_mSvn98fILxv56EE7NFWE3qQNOH3OaW4iDWwLc05g1mdbuNhipK8fgy-q-pA93DqFw
即可得到ticket:”sM4AOVdWfPE4DxkXGEs8VLMMSNOZxIv5IhnWCyv5sA4UgJuWuMQdfMCeyC5kSL_c7OIMGeETC2y9PXfLbFIFNw(其有效期也是7200秒,即两个小时)

这里写图片描述

生成signature签名第三步通过ticket以及下面参数拼成字符串:
noncestr=1414587457
jsapi_ticket(即上面的ticket)=sM4AOVdWfPE4DxkXGEs8VLMMSNOZxIv5IhnWCyv5sA5kumyWTQ2VcKEcphBAW62J_HUgmaiKEQ3qhwj5Vlqq7g
timestamp=1414587457
url=http://mp.weixin.qq.com

通过上面的参数拼成(注意参数顺序必须一样):jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VLMMSNOZxIv5IhnWCyv5sA5kumyW
TQ2VcKEcphBAW62J_HUgmaiKEQ3qhwj5Vlqq7g
&noncestr=1414587457&timestamp=1414587457&url=http://mp.weixin.qq.com

最后利用上面的字符串进行sha1加密,有在线的校验工具http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign。但是真正开发的时候肯定是需要写代码的,下面附上sha1加密的java算法:`

jdk也有提供这个java.security这个包,里面封装好了sha1加密算法。使用方法可参考博主的另外一篇博客AES加密解密 SHA1、SHA加密 MD5加密

注意真正获取access_token、ticket的时候是需要通过代码实现的,上面在浏览器输入对应地址获取只是为了理顺流程。下面是通过java代码获取。

3.4、java代码获取签名

关于使用java代码获取签名的详细过程请参考博主的另外一篇文章 微信开发之使用java获取签名signature(贴源码,附工程)

该文章有详细的代码,而且附工程下载。

获取到了签名之后就可以调用微信js接口了,例子后面的文章将会讲到。

2017-04-18 15:21:00 weixin_33755847 阅读数 118

这个功能和微信提供的接口无关。仅仅牵扯到微信的图文消息的还有一种应用。

1、登录进入须要被关注的微信公众号,进入管理-》素材管理。新增一条单图文消息,标题为点击下方链接关注XXX。图片能够是一张白色的图片,正文能够是此微信公众号的一些简单介绍。

2、保存后回到图文消息列表。打开刚才保存的图文消息,复制打开窗体的URL地址,这个地址就是在微信上点击以后跳转到图文消息,在图文消息第二行有一行蓝色字,点击就会弹出关注提示

2018-10-10 00:34:48 weixin_41190571 阅读数 91827

当我们将微信页面地址复制到电脑自带的浏览器上打开时候就会提示“请在微信客户端打开链接”如图所示:

 

百度上很多都是告诉我们用什么抓包工具破解什么的,结果呢没 luan用!这给我们开发人员调试带来了诸多不便。下面我教大家如何解决:

1.下载微信开发者工具:微信开发者工具(点击跳转到官网下载)选择你自己的系统下载安装就好了。

2.安装完成之后启动程序,扫码登录你的公众号或者企业微信号管理员账号(ps:一定要是管理员账号哦!)

3.选择小程序项目或者公众号网页项目

4.这里我选择的是公众号网页项目进入,然后再从你的公众号或者微信企业号需要调试的页面点击右上角选择“复制链接”,将地址复制到我们开发者工具的地址栏就能打开你的项目愉快的调试了。

如有不懂可以给我留言,我会一一回复。

最后给大家普及一个移动端真机调试神器,"一个轻量、可拓展、针对手机网页的前端开发者调试面板。" 扫一扫下面的二维码赶紧体验一下吧!

想要学习详细使用教程请参考官方:vConsole