微信开发者服务器未启用

2018-03-04 18:58:27 tiandixuanwuliang 阅读数 8966

很多人都有自己的服务器,特别是对于大学生而言,很多服务器公司都对学生有优惠,例如腾讯云只要1元每月:http://blog.csdn.net/tiandixuanwuliang/article/details/56494528 ,那么我们作为一名程序员,总想把一切掌控在自己手中,<哈哈>,那么如何使用我们开发者服务器去管理微信公众号呢?这就是本文介绍的内容。
本文介绍以下内容:

  • (1)如何把微信公众号授权给开发者服务器
  • (2)如何使用代码把开发者服务器与微信服务器进行关联
  • (3)实现接受和发送消息
  • (4)自定义菜单

1 如何把微信公众号授权给开发者服务器

  • (1)进入微信公众号平台,https://mp.weixin.qq.com/,首先请取消其他第三方服务器的授权,方法如下:
    这里写图片描述
    这里写图片描述
    这里写图片描述
    注:这里也可以不取消第三方服务器的授权,不取消的话,公众号粉丝发送的数据会同时1发送到第三方服务器和开发者服务器,本人已经验证了,有兴趣可以自行研究
  • (2)回到微信公众号管理平台首页,页面往下拉,选择“基本配置”,如图:
    这里写图片描述
  • (3)添加ip白名单
    这里写图片描述
  • (4)选择修改配置
    这里写图片描述
  • (5)下图中的url,指向你自己的服务器中正在运行的php地址,这是本文代码开发的重点,具体内容请看下一章。token可以随便写,但是需要与上述php文件中配置的一样,具体内容请看下一章
    这里写图片描述

2 如何使用代码把开发者服务器与微信服务器进行关联

  • (0)这一章讲解代码的开发。第一章第5小节中的url指向自己的服务器中正在运行的php文件,本章将介绍这一个文件的内容。关于如何运行这个php文件,请看php教程http://blog.csdn.net/tiandixuanwuliang/article/category/7344088
  • (1)该php文件内容如下,下面的代码实现了连接开发者服务器、关键字回复、图灵机器人功能,注:请把下面的token填写为第一章第5小节中截图中设置的token
<?php
/**
 * 微信公众号开发-入门
 *
 * api
 */
define("TOKEN",'we--xxxx');   //这里和你微信公众号开放平台上的tonken填写一样的即可
$weixinApi=new WeixinApi();
if(isset($_GET["echostr"])){
    $weixinApi->valid();
}else{
    $weixinApi->responseMsg();
}

class WeixinApi{
    //验证接口
    public function valid(){
        $echoStr = $_GET["echostr"];//从微信用户端获取一个随机字符赋予变量echostr
        if($this->checkSignature()){
            echo $echoStr;
            exit;
        }
    }
    //检查签名
    private function checkSignature(){
        //1 接受微信服务器get请求发送过来的4个参数
        $signature = $_GET["signature"];//从用户端获取签名赋予变量signature
        $timestamp = $_GET["timestamp"];//从用户端获取时间戳赋予变量timestamp
        $nonce = $_GET["nonce"];    //从用户端获取随机数赋予变量nonce
        //2 加密和校验请求
        //2.1 将token、timestamp、nonce三个参数进行字典序排序
        $tmpArr = array(TOKEN, $timestamp, $nonce);//简历数组变量tmpArr
        sort($tmpArr, SORT_STRING);//新建排序
        //2.2 将三个参数字符串拼接成一个字符串进行sha1加密
        $tmpStr = implode($tmpArr);//数组转字符串
        $tmpStr = sha1($tmpStr);//shal加密
        //2.3 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信
        if ($tmpStr == $signature) {
            return true;
        } else {
            return false;
        }
    }
    //回复消息
    public function responseMsg(){
        //3 以下代码接受消息
        //3.1 接受微信服务器发送过来的原生的POST的数据包
//        $postData = $GLOBALS["HTTP_RAW_POST_DATA"];
        $postData = isset($GLOBALS['HTTP_RAW_POST_DATA']) ? $GLOBALS['HTTP_RAW_POST_DATA'] :file_get_contents("php://input");

        //3.2 处理数据包
        $xmlObj = simplexml_load_string($postData, "SimpleXMLElement", LIBXML_NOCDATA);
        $msgType = $xmlObj->MsgType;
        //4 根据消息类型进行业务处理
        switch ($msgType) {
            //接受事件消息
            case 'event':
                $this->disposeEvent($xmlObj);
                break;
            //接受文本消息
            case 'text':
                $this->disposeText($xmlObj);
                break;
            //接受图片消息
            case 'image':
                $this->disposeImage($xmlObj);
                break;
        }
    }
    //处理接收的事件消息
    private function disposeEvent($xmlObj){
        switch ($xmlObj->Event){
            case 'subscribe'://订阅事件
                $this->sendText('欢迎您的订阅');
                break;
            case 'unsubscribe'://取消订阅事件
                $this->sendText('good-bye');//该消息用户其实是看不到的,取消订阅事件一般用来清除数据库记录
                break;
        }
    }
    //处理接收的文本消息
    private function disposeText($xmlObj){
        $text=trim($xmlObj->Content);
        //包含关键字都不做处理
        if (!(
            strstr($text,'违规')    //这里对违规的关键字做排除,不予理睬
        )){
            switch ($text){
                case '你好':
                    $this->sendText($xmlObj,'Hi 我是开发者服务器');
                    break;
                case 'new':
                    $newsArr=array(
                        array(
                            "title"=>"看到这条消息,你可以买彩票了",
                            "description"=>"本公众号有许多小彩蛋,欢迎您的探索。",
                            "picUrl"=>"http://img.mp.itc.cn/upload/20170610/03d69e8df0524b8cb59fd16dc2fec989.jpg",
                            "url"=>"http://www.baidu.com"
                        )
                    );
                    $this->sendNews($xmlObj,$newsArr);
                    break;
                default:
                    $this->tuling123($xmlObj,trim($xmlObj->Content));   //图灵机器人
            }
        }
    }
    //处理接收的图片消息
    private function disposeImage($xmlObj){    //一般情况下,不会去处理用户发送的图片
        $this->sendImage($xmlObj,$xmlObj->PicUrl,$xmlObj->MediaId);
    }

    //发送文本的方法
    private function sendText($xmlObj,$content){
        $replyTextMsg="<xml>
                        <ToUserName><![CDATA[%s]]></ToUserName>
                        <FromUserName><![CDATA[%s]]></FromUserName>
                        <CreateTime>%s</CreateTime>
                        <MsgType><![CDATA[text]]></MsgType>
                        <Content><![CDATA[%s]]></Content>
                    </xml>";
        echo sprintf($replyTextMsg,$xmlObj->FromUserName,$xmlObj->ToUserName,time(),$content);
    }
    //发送图片的方法
    private function sendImage($xmlObj,$mediaId){
        $replyImageMsg="<xml>
                        <ToUserName><![CDATA[%s]]></ToUserName>
                        <FromUserName><![CDATA[%s]]></FromUserName>
                        <CreateTime>%s</CreateTime>
                        <MsgType><![CDATA[image]]></MsgType>
                        <Image>
                            <MediaId><![CDATA[%s]]></MediaId>
                        </Image>
                    </xml>";
        echo sprintf($replyImageMsg,$xmlObj->FromUserName,$xmlObj->ToUserName,time(),$mediaId);
    }
    //发送图文的方法
    private function sendNews($xmlObj,$newsArr){
        $newsTplHead = "<xml>
                        <ToUserName><![CDATA[%s]]></ToUserName>
                        <FromUserName><![CDATA[%s]]></FromUserName>
                        <CreateTime>%s</CreateTime>
                        <MsgType><![CDATA[news]]></MsgType>
                        <ArticleCount>%s</ArticleCount>
                        <Articles>";
        $newsTplBody = "<item>
                        <Title><![CDATA[%s]]></Title> 
                        <Description><![CDATA[%s]]></Description>
                        <PicUrl><![CDATA[%s]]></PicUrl>
                        <Url><![CDATA[%s]]></Url>
                    </item>";
        $newsTplFoot = "</Articles>
                    <FuncFlag>%s</FuncFlag>
                </xml>";
        $replyNewsMsg = sprintf($newsTplHead, $xmlObj->FromUserName, $xmlObj->ToUserName, time(),count($newsArr));
        foreach($newsArr as $key => $value){
            $replyNewsMsg .= sprintf($newsTplBody, $value['title'], $value['description'], $value['picUrl'], $value['url']);
        }
        $replyNewsMsg  .= sprintf($newsTplFoot, 0);
        echo $replyNewsMsg;
    }

    public function tuling123($xmlObj,$message){//这是是使用图灵机器人
        $tuTonken='2d8aaa17141c443----xxx---fsa';   //请去图灵网http://www.tuling123.com/自己申请一个tonken
        $tuUrl='http://www.tuling123.com/openapi/api?key='.$tuTonken.'&info='.$message.'&userid='.$xmlObj->FromUserName;
        $tuData='{  
            "key": "'.$tuTonken.'", 
            "info": "'.$message.'",
            "userid": "'.$xmlObj->FromUserName.'" 
            }';
        $results = $this->htts_request($tuUrl,$tuData);
//        print_r($results);
        if ($results['code']==100000){
            $text=$results['text'];
            $this->sendText($xmlObj,$text);
        }else{
            $this->sendText($xmlObj,'有问题,请输入“帮助”');
        }
    }

    //https请求(get和post)
    private function htts_request($url,$data=array()){
        //1 初始化curl
        $ch=curl_init();
        //2 设置传输选项
        curl_setopt($ch,CURLOPT_URL,$url);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
        curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);//把页面以文件流的形式返回
        if (!empty($data)) {
            curl_setopt($ch, CURLOPT_POST, true); //设置为 POST 请求
            curl_setopt($ch, CURLOPT_POSTFIELDS, $data); //设置POST的请求数据
        }
        //3 执行curl请求
        $outopt=curl_exec($ch);
        $outoptArr=json_decode($outopt,true);
        //4 关闭curl
        curl_close($ch);
        return $outoptArr;
    }
}
?>
  • (2)上面代码可以用下面的结构图进行分析:
    这里写图片描述
  • (3)下面是自定义菜单的代码(不建议使用,原因请看下面的第5小节)
//获取access_token
    private function getAccessToken(){
        //获取微信接口凭证
        $appid="wxb4----xxx";//请在第一章第5小节的图片中看
        $appsecret="21d---xxx";//请在第一章第5小节的图片中看

        $data=json_decode(file_get_contents('./access_token.json'));
        if ($data->expires_time <time()){
            $url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$appsecret}";
            $outoptArr=$this->htts_request($url,array(),false);
            $access_token=$outoptArr['access_token'];
            if (!empty($access_token)){
                //把access_token写入文件
                $data->access_token=$outoptArr['access_token'];
                $data->expires_time=time()+7000;
                $fp=fopen('access_token.json','w');
                fwrite($fp,json_encode($data));
                fclose($fp);
            }else{
                echo '请求access_token错误';
            }
        }else{
            $access_token=$data->access_token;
        }
//        echo $access_token;
        return $access_token;
    }
//实现自定义菜单
    public function menu_create(){
        $access_token=$this->getAccessToken();
        $url="https://api.weixin.qq.com/cgi-bin/menu/create?access_token={$access_token}";
        $data='{
		"button": [
			{
				"type": "click",
				"name": "java",
				"key": "learn_java"
			},
			{
				"name":"chengxu",
				"sub_button":[
				{
					"type": "view",
					"name": "CSDN",
					"url": "http://blog.csdn.net/tiandixuanwuliang/"
				},
				{
					"type": "view",
					"name": "Github",
					"url": "https://github.com/wllfengshu/"
				},
				{
					"type": "view",
					"name": "jianshu",
					"url": "https://www.jianshu.com/users/4d12e03d0a5f/timeline/"
				},
				{
					"type": "view",
					"name": "kaifazhe",
					"url": "https://toutiao.io/u/431066/"
				},
				{
					"type": "view",
					"name": "yuyan",
					"url": "http://www.baidu.com"
				}]
			},
			{
				"name":"jiaoliu",
				"sub_button":[
				{
					"type": "view",
					"name": "shuji",
					"url": "http://blog.csdn.net/tiandixuanwuliang/"
				},
				{
					"type": "view",
					"name": "ziyuan",
					"url": "https://github.com/wllfengshu/"
				},
				{
					"type": "view",
					"name": "sucai",
					"url": "https://www.jianshu.com/users/4d12e03d0a5f/timeline/"
				},
				{
					"type": "view",
					"name": "daxuesheng",
					"url": "https://toutiao.io/u/431066/"
				},
				{
					"type": "click",
					"name": "zuozhe",
					"key": "about_author"
				}]
			}
		]
	}';
        echo $url." ///// ".$data;
        $outoptArr=$this->htts_request($url,json_decode($data,true),true);
        echo '***';
        print_r($outoptArr);
    }
  • (4)下面是网页授权,授权后我们才可以在代码中调用(不建议使用,原因请看下面的第5小节)
    //网页授权-base型
    public function snsapi_base($redirect_uri){
        //以下是测试账号
        $appid="wxb4----xxx";//请在第一章第5小节的图片中看
        $appsecret="21da56-----xxx";//请在第一章第5小节的图片中看

        //准备scope
        $snsapi_base_url="https://open.weixin.qq.com/connect/oauth2/authorize?appid={$appid}&redirect_uri={$redirect_uri}&response_type=code&scope=SCOPE&state=123#wechat_redirect";
        $code=$_GET['code'];
        //获取code
        if (!isset($code)){
            header("Location:{$snsapi_base_url}");
        }
        //获取access_token
        $url="https://api.weixin.qq.com/sns/oauth2/access_token?appid={$appid}&secret={$appsecret}&code={$code}&grant_type=authorization_code";
        return $this->htts_request($url);
    }
  • (5)但是由于个人注册的订阅号没有自定义菜单的开发权限,所以我建议大家自定义菜单的功能交给第三方服务处理,这也是一个窍门,就是微信公众号同时授权给第三方服务器和开发者服务器,这是一个bug,哈哈。请注意,一定要先授权给开发者服务器,再授权给第三方服务器,否则将不成功。原理图如下:
    这里写图片描述
  • 上图中的第三方服务器具有关键字功能,我建议一些常用的关键字都交给第三方服务器做。一些具有逻辑性的关键字、需要存放到数据库的关键字、或者私密性的关键字可以由开发者服务器做。但是由于微信公众号粉丝发送的数据会同时发送到两个服务器,而且开发者服务器还具有图灵机器人功能,可以采取屏蔽的方法,在任意一方屏蔽一次,这样就避免了一条消息,回复了两次的问题。
  • (6)请把上述php文件,放到AppServ软件安装的根目录下的www文件夹下,然后重启AppServ中的服务,最后再把 http://服务器ip地址/index.php 填写到第一章第5节的url中即可。可以开始玩了
    这里写图片描述

本文地址:http://blog.csdn.net/tiandixuanwuliang/article/details/79438662

欢迎大家看我的另一篇文章,这篇文章从需求分析、系统设计、代码实现等方面进行讲解,欢迎大家批评指正,http://blog.csdn.net/tiandixuanwuliang/article/details/79438738

欢迎大家关注,里面有很多资源分享:
这里写图片描述

2018-11-16 14:58:14 jal517486222 阅读数 1291

PHP版接入微信开发者模式,进行Token验证


一、登录微信公众号的后台,鼠标滚动到最下方,然后点击开发->基本配置,然后点击绿色的启用按钮,内容不着急填写

在这里插入图片描述


二、下载微信公众平台提供的PHP版本介入实例文件:

这是微信公众平台提供的下载链接,请点击
懒得下载的人可以将下面的代码拷贝下来,放入PHP文件里,命名为configToken.php

<?php
/**
  * wechat php test
  */

//define your token
define("TOKEN", "weixin");//此处的TOKEN就是接下来需要填在微信的配置里面的token,需要保持严格一致
$wechatObj = new wechatCallbackapiTest();
$wechatObj->valid();

class wechatCallbackapiTest
{
	public function valid()
    {
        $echoStr = $_GET["echostr"];
        
        //valid signature , option
        if($this->checkSignature()){
        	echo $echoStr;
        	exit;
        }
    }

    public function responseMsg()
    {
		//get post data, May be due to the different environments
		$postStr = $GLOBALS["HTTP_RAW_POST_DATA"];

      	//extract post data
		if (!empty($postStr)){
                /* libxml_disable_entity_loader is to prevent XML eXternal Entity Injection,
                   the best way is to check the validity of xml by yourself */
                libxml_disable_entity_loader(true);
              	$postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
                $fromUsername = $postObj->FromUserName;
                $toUsername = $postObj->ToUserName;
                $keyword = trim($postObj->Content);
                $time = time();
                $textTpl = "<xml>
							<ToUserName><![CDATA[%s]]></ToUserName>
							<FromUserName><![CDATA[%s]]></FromUserName>
							<CreateTime>%s</CreateTime>
							<MsgType><![CDATA[%s]]></MsgType>
							<Content><![CDATA[%s]]></Content>
							<FuncFlag>0</FuncFlag>
							</xml>";             
				if(!empty( $keyword ))
                {
              		$msgType = "text";
                	$contentStr = "Welcome to wechat world!";
                	$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $contentStr);
                	echo $resultStr;
                }else{
                	echo "Input something...";
                }

        }else {
        	echo "";
        	exit;
        }
    }
		
	private function checkSignature()
	{
        // you must define TOKEN by yourself
        if (!defined("TOKEN")) {
            throw new Exception('TOKEN is not defined!');
        }
        
        $signature = $_GET["signature"];
        $timestamp = $_GET["timestamp"];
        $nonce = $_GET["nonce"];
        		
		$token = TOKEN;
		$tmpArr = array($token, $timestamp, $nonce);
        // use SORT_STRING rule
		sort($tmpArr, SORT_STRING);
		$tmpStr = implode( $tmpArr );
		$tmpStr = sha1( $tmpStr );
		
		if( $tmpStr == $signature ){
			return true;
		}else{
			return false;
		}
	}
}

?>

三、建一个PHP项目,我起的名称叫做WeiXinWeb,将刚才下载的wx_sample文件解压缩,然后重命名为configToken.php(就是我上面的代码)放到项目的根目录中(我的项目中还有其他几个文件都是从git上克隆下来的,你们的项目中没有也没关系,只需要有configToken.php就行了)

在这里插入图片描述


四、将这个项目放到公网能访问的服务器上,开发人员都懂该怎么操作吧,没有服务器的可以自己去各个云购买去,此处默认你有公网服务器


五、回到第一步微信公众平台的开发者的配置下面,点击“修改配置”, 将服务器地址写上你的configToken.php能被访问到的路径,我中间的马赛克是我的服务器域名,你们修改成自己的即可。此处的token就是刚才填在configToken的TOKEN,需要保持严格一致

在这里插入图片描述

到此就大功告成了,分分钟就解决问题,庆祝一下~

2018-04-07 22:26:53 lff1123 阅读数 1828

首先,什么是开发者模式?

开发者模式,就是先验证你的服务器地址,验证完成之后,用户一旦给微信公众号发消息,微信的就会把微信用户的消息转发到这个地址上。你的服务器接到数据后,然后你自己设计一套程序,输出一个结果,再由微信服务器返回给用户。

个人学习开发建议使用测试号 

微信测试号地址:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 

登录后,在接口配置信息中填写刚才生成的URL地址和Token.

URL地址就是二级域名地址。

Token在程序中固定为 weixin

填写好提交,提示配置成功!

如果提示“token验证失败”,多重次几次。

<?php

//define your token
define("TOKEN", "weixin");
$wechatObj = new wechatCallbackapiTest();
$wechatObj->run();

class wechatCallbackapiTest
{
	public function run(){
        if($this->checkSignature() == false){
            die("非法请求");
        }
        if(isset($_GET["echostr"])){
            $echoStr = $_GET["echostr"];
            echo $echoStr;
            exit;
        }else{
            $this->responseMsg();
        }
    }

    public function responseMsg(){
		//get post data, May be due to the different environments
		$postStr = $GLOBALS["HTTP_RAW_POST_DATA"];
		// $postStr = file_get_contents("php://input");
		file_put_contents('msg.txt',$postStr, FILE_APPEND);
		
      	//extract post data
		if (!empty($postStr)){
              	$postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
                $fromUsername = $postObj->FromUserName;
                $toUsername = $postObj->ToUserName;
                $keyword = trim($postObj->Content);
                $time = time();
                $textTpl = "<xml>
							<ToUserName><![CDATA[%s]]></ToUserName>
							<FromUserName><![CDATA[%s]]></FromUserName>
							<CreateTime>%s</CreateTime>
							<MsgType><![CDATA[%s]]></MsgType>
							<Content><![CDATA[%s]]></Content>
							<FuncFlag>0</FuncFlag>
							</xml>";             
				if(!empty($keyword)){
              		$msgType = "text";
                	$contentStr = "你好!";
                	// $contentStr = "hi!";
                	$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $contentStr);
                	echo $resultStr;
                }else{
                	echo "Input something...";
                }
        }else {
        	echo "";
        	exit;
        }
    }
		
	private function checkSignature(){
        $signature = $_GET["signature"];
        $timestamp = $_GET["timestamp"];
        $nonce = $_GET["nonce"];	
        		
		$token = TOKEN;
		$tmpArr = array($token, $timestamp, $nonce);
		sort($tmpArr);
		$tmpStr = implode( $tmpArr );
		$tmpStr = sha1( $tmpStr );
		
		if( $tmpStr == $signature ){
			return true;
		}else{
			return false;
		}
	}
}

?>

2017-05-31 16:18:58 dxmgood 阅读数 7396

需求:通过二维码扫描后,先关注公众号,再自动建立分销中的上下级关系。

分析:那么必须利用微信公众号的生成带参数的二维码的机制,把上级的ID生成到二维码中,然别人扫描的时候就可以获得到,再进行上下级绑定。

总体来说还是挺好实现的,只是再测试的过程中,发现服务器配置启用没有立马生效,启用旁边又没有提示需要几分钟的缓存时间,导致我们怀疑我们程序有错误,经过几天的排查发现没有。再经过测试,最终发现不管启用停止都需要等一段时间才会生效,启用大概需要10分钟的缓存时间,停用大概5分钟的反应时间。


后来去搜了一下百度,看到这个请原谅我笑了很久:


2018-03-05 18:12:02 zhangjing1019 阅读数 7000

使用微信web开发者工具调试微信企业号页面(前端页面,已发布在服务器上的)

前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大。这篇文章只是做一个记录,方便自己以后使用的时候看看,不对的地方请大家批评指正。放入官方的微信web开发者工具下载链接以及文档说明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html,参考这个文档,我又给细节化了一些内容。下载以后直接安装就好。

1.下载安装好以后,打开界面是这样的。

 

 

2.我们点击登录,会出现扫描二维码页面,用你自己的微信扫一下登录就可以

  

 

3.登录以后,就可以对我们的微信企业号页面进行调试,请注意!!!要想调试当前的企业号页面,你登录的微信号,必须是这个企业号的管理员(这在微信开发者工具的说明文档有写),如果不是,请在你们的企业号开发端把你的微信设置为管理员。否则在开发者工具里面将会出现下面这个页面,如图

 

   管理员设置界面如图:

   

 

在企业号管理页面添加完毕以后,会在你的手机微信端有提醒,记得按照他的提醒设置一下开发者工具的登陆密码,如果没有设置密码,你依然登陆不上去,如图所示:

 

设置完密码以后,我们点击登录,发现还是上不去,如图所示:

 

点进去以后,如图所示:

 

2.上面所有的都设置过以后,我们登陆开发工具,随意打开一个公众号的页面,复制链接放在开发工具的地址栏,现在基本上就可以在电脑上面进行调试了。页面如图:(关注一下移动调试)

 

3.这个工具更加强大的功能!点击窗口中的移动调试。

  3-1.如图所示,我们先选择Android设备调试--普通调试,

  

 

 

  接着我们只要按照他的提示--调试步骤设置我们的手机就可以,手机代理设置如图所示:

 

手机设置完毕代理以后,点击开发者工具页面中的开始调试就可以,很强大,我们选中的页面部分,会在手机上面实时显示出来。(自己体验一下。)

  3-2.如图所示,我们先选择Android设备调试--X5 Blink内核调试,这个功能更强大!

这一部分强烈建议看一下官网的文档说明,我先copy一下放在这。

移动调试

移动端网页的表现,通常和桌面浏览器上有所区别,包括样式的呈现、脚本的逻辑等等,这会给开发者带来一定的困扰。现在,微信安卓客户端 webview 已经开始全面升级至 X5 Blink 内核,新的内核无论在渲染能力、API 支持还是在开发辅助上都有很大进步。通过微信 web 开发者工具中的远程调试功能,实时映射手机屏幕到微信 web 开发者工具上,将帮助开发者更高效地调试 X5 Blink 内核的网页,具体步骤如下:

(1)准备工作

1. 安装0.5.0或以上版本的微信 web 开发者工具

2. 确认移动设备是否支持远程调试功能

  打开微信 web 开发者工具,选择“移动调试”tab,点击验证移动设备是否支持。随后使用移动设备扫描弹出的二维码,在设备上即可获得支持信息。

3. 打开移动设备中的 USB 调试功能

  1.打开移动设备,进入“设置”->“开发人员选项”

  2.勾选“USB 调试功能”

 

  需要注意的是,Android 4.2 之后的设备,开发人员选项默认是隐藏的,通过以下步骤可以打开:

  1.打开移动设备,进入“设置”->“关于手机”

  2.找到并单击“内部版本号”7次

4. 安装移动设备 USB 驱动

  通常开发者可以在移动设备厂商的官网中下载到相关驱动,或者使用腾讯手机管家来安装设备驱动。

5. 打开 X5 Blink 内核的 inspector 功能

  打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。

  如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。

  

(2)开始调试

使用 USB 数据线连接移动设备与 PC 或者 Mac 后,点击打开微信 web 开发者工具“移动调试”tab,选择 X5 Blink 调试功能,将会打开一个新窗口,在微信中访问任意网页即可开始调试。关于 X5 Blink 内核更多信息,可以查看官网介绍

在所有准备工作都完成的情况下,窗口中可以看到当前设备的基本信息:

点击任意页面的“inspect”,打开新窗口,开发者会看到熟悉的调试界面:

点击上图右上角的“手机”图标,将启用屏幕映射功能:

 

 

下面我来补充一下:

3-2-1.打开我们手机的调试USB调试功能,我的手机是三星S7,(高版本Android好像都这么弄,如果你的不可以,就问问度娘)找了半天没找到,问了度娘才找到。。。。写个记录

在下拉通知栏里面选择设置,如图:

                    

在版本号那里多点击几次,页面就会有提醒,再点击几次就可以打开开发者选项,打开以后,在我们设置里面就出现了开发者选项,点进去,把USB调试打开就好了。

额外内容----如何关闭开发者选项???如图所示

                

 

3-2-2打开 X5 Blink 内核的 inspector 功能

             打开微信 web 开发者工具,选择“移动调试”tab ,使用设备扫描“调试步骤”中的二维码。如下图,勾选“是否打开 TBS 内核 Inspector 调试功能”,并重启微信。

 

3-2-3开始调试

    上面的设置都弄完以后,点击页面的的开始调试按钮,手机上出现下面这个页面,如图,我们点击确定就可以。

 

然后我们的调试工具就会弹出这个页面:

此时基本上就可以了,我们在我们的手机上随意打开一个我们要调试的微信公众号的页面。如图

打开以后如图所示:左侧是我们的调试工具页面,右侧是我们的手机上显示的页面,是不是非常棒,哈哈哈哈,

           

 

点击调试工具页面右上角的手机图标,可以将手机页面映射到调试工具里面,如图所示:

 转载至  https://www.cnblogs.com/Gabriel-Wei/p/5977850.html      Gabriel-Wei