上周的主要任务是做一个走微信公众号的h5分享页面，对于从来没有接触过微信程序的我，有点懵，还有h5页面本来就不咋会写，而且基本上没人能给啥指导，所以基本是自己一步步摸索。记录一下这个苦逼的过程。
1: 既然说是要走微信公众号，所以第一步，登录微信公众号后台，不同功能的公众号，所能调用的微信接口是不一样的，可以登录在接口权限的地方看一下自己具体有哪些权限。若是没有公众号，只是想自己练习如何做，在微信公众平台的文档中有注册测试帐号，附上链接：微信公众平台接口测试帐号申请
2: 拿到了id和secret，那如何进行第一步的连接呢？首先url是外网地址，最好是将自己的程序放在服务器上，而且是默认端口是80端口。若是没有自己的服务器，可以将自己的服务器借助于花生壳、ngrok等工具将内网的地址影射到外网（这里我用过ngrok，弄了挺长时间，但当访问的时候总是显示不出来，后来就直接放弃了，部署在服务器上了）。
另外一个就是对于token，token是你自己定义的，刚开始并不知道自己定义是啥意思，其实这一步的验证和后面的你要想是隔离开的，先进行验证。
验证代码：

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

//define your token
define("TOKEN", "weixinxijiji");
$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;
    }
}
}

?>

测试帐号进行检测

申请的公众号设置检测

3: 如何检测我有没有成功呢，需要借助微信web开发者工具。微信web开发者工具下载地址
使用方法：要在微信公众号平台中，开发->开发者工具->web开发者工具 上面绑定需要开发的微信帐号。这样之后 就有权限进行开发调试。

4: 如何进行微信网页开发，参照微信网页开发文档，因为服务器端的是php环境，所以使用的是php写的，主要分为，获取access_token，获取ticket，进行校验等。

<?php
$appid = "xxxx";
$secret = "xxxxxxxxxx";
$token = read('access_token', 3600);
$ticket = read('jsapi_ticket', 3600);
if (!$token || strlen($token) < 6) {
    $res = file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$secret);
    $res = json_decode($res, true);
    $token = $res['access_token'];
    write('access_token', $token, 3600);
}
if (!$ticket || strlen($ticket) < 6) {
    $res = file_get_contents('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$token.'&type=jsapi');
    $res = json_decode($res, true);
    $ticket = $res['ticket'];
    write('jsapi_ticket', $ticket, 3600);
}

$timestamp = time();
$nonceStr = getRandChar(15);
//url为当前页面的url
$url = 'http://'.$_SERVER['HTTP_HOST'].'/act/icevelive2/third/';
$testurl = $_SERVER['QUERY_STRING'];
$first = strpos($testurl, '?');
$urltest = substr($testurl, 0, $first+0);
$url = $url.$urltest;
$str = "jsapi_ticket=".$ticket."&noncestr=".$nonceStr."&timestamp=".$timestamp."&url=".$url;
$signature = sha1($str);
echo $timestamp.",".$nonceStr.",".$signature;

function read($file, $expires){
    if(file_exists($file)) {
        $time = filemtime($file);
        if(time() - $time > $expires) {
            return null;
        }else {
            return file_get_contents($file);
        }
    }
    return null;
}

function write($file, $value){
    @file_put_contents($file, $value);
}

function getRandChar($length){
    $str = null;
    $strPol = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";
    $max = strlen($strPol)-1;

    for($i=0;$i<$length;$i++){
        $str.=$strPol[rand(0,$max)];//rand($min,$max)生成介于min和max两个数之间的一个随机整数
    }

    return $str;
}

若是成功了，就可以进行调用各种接口了。