实战微信JS SDK开发：贺卡制作与播放（1)

前段时间忙于CanTK 2.0的开发，所以博客一直没有更新。CanTK 2.0主要增强了游戏和富媒体的开发，现在编码和测试基本完成了，等文档完成了再正式发布，里面有不少激动人心的功能，等发布时再一一细说吧。

最近同事用CanTK开发了一个基于微信的贺卡制作APP，我虽然没有参与开发，但是提供CanTK和GameBuilder的技术支持，觉得有些东西比较有意思，写几篇博客和大家分享吧。这个贺卡APP完全开源，有需要的朋友可以随意修改和发布。

CanTK(Canvas ToolKit)是一个开源的游戏引擎和APP框架，是开发HTML5游戏和APP的利器，如果你喜欢它，请在github上给它加星，您的支持是我们努力的动力：https://github.com/drawapp8/cantk

0.先Show一下最终成果:



在线运行：http://gamebuilder.duapp.com/apprun.php?appid=osgames1-821423377846894



在线编辑：http://gamebuilder.duapp.com/gamebuilder.php?appid=osgames1-821423377846894

微信扫码：

1.生成微信JS SDK配置

生成微信JS SDK配置的资料，网上已经不少，我们拿来时做些几点改进：

1. 缓存放到临时目录，而不是当前目录。
2. 过期时间改成3600秒，而不是官方的两个小时。
3. 把它做成一个服务，APP通过AJAX来生成当前URL需要的配置，方便CanTK的调用。

代码如下：

<?php
class JSSDK {
  private $appId;
  private $appSecret;
  public function __construct($appId, $appSecret) {
    $this->appId = $appId;
    $this->appSecret = $appSecret;
  }
  public function getSignPackage($url) {
    $jsapiTicket = $this->getJsApiTicket();
    if(!$url) {
    	$url = "http://$_SERVER[HTTP_HOST]" . '/weixin/demo/index.html';
    }
    $timestamp = time();
    $nonceStr = $this->createNonceStr();
    // 这里参数的顺序要按照 key 值 ASCII 码升序排序
    $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
    $signature = sha1($string);
    $signPackage = array(
      "appId"     => $this->appId,
      "nonceStr"  => $nonceStr,
      "timestamp" => $timestamp,
      "url"       => $url,
      "signature" => $signature,
      "rawString" => $string
    );
    return $signPackage;
  }
  private function createNonceStr($length = 16) {
    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    $str = "";
    for ($i = 0; $i < $length; $i++) {
      $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
    }
    return $str;
  }

  private function getFileName($name) {
  	$fileName = sys_get_temp_dir() . "/weixin-" . $name;
  	return $fileName;
  }

  private function saveData($name, $content) {
  	$fileName = $this->getFileName($name);

    $fp = fopen($fileName, "wb+");
    if($fp) {
    	fwrite($fp, $content);
    	fclose($fp);
    }

  	return;
  }

  private function loadData($name, $defaultContent) {
  	$fileName = $this->getFileName($name);
  	$content = file_get_contents($fileName);

  	if($content) {
  		return $content;
  	}
  	else {
  		return $defaultContent;
  	}

  	return;
  }

  private function getJsApiTicket() {
    $data = json_decode($this->loadData("jsapi_ticket.json", '{"jsapi_ticket":"", "expire_time":0}'));
    if ($data->expire_time < time()) {
      $accessToken = $this->getAccessToken();
      $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
      $res = json_decode($this->httpGet($url));
      $ticket = $res->ticket;
      if ($ticket) {
        $data->expire_time = time() + 3600;
        $data->jsapi_ticket = $ticket;
        $this->saveData("jsapi_ticket.json",  json_encode($data));
      }
    } else {
      $ticket = $data->jsapi_ticket;
    }
    return $ticket;
  }
  private function getAccessToken() {
    $data = json_decode($this->loadData("access_token.json", '{"access_token":"", "expire_time": 0}'));
    if ($data->expire_time < time()) {
      $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
      $res = json_decode($this->httpGet($url));
      if(!isset($res->access_token)) {
      	print_r($res);
      	exit;
      }

      $access_token = $res->access_token;
      if ($access_token) {
        $data->expire_time = time() + 3000;
        $data->access_token = $access_token;
        $this->saveData("access_token.json", json_encode($data));
      }
    } else {
      $access_token = $data->access_token;
    }
    return $access_token;
  }
  private function httpGet($url) {
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($curl, CURLOPT_URL, $url);
    $res = curl_exec($curl);
    curl_close($curl);
    return $res;
  }
}

session_start();
if(!isset($_REQUEST['url'])) {
	echo "invalid arguments";
	exit;
}

$appID = "xxxxx";
$appSecret = "xxxxx";

$url = $_REQUEST['url'];
$url = base64_decode($url);

$jssdk = new JSSDK($appID, $appSecret);
$signPackage = $jssdk->getSignPackage($url);
$signPackage['jsApiList'] = [
        'checkJsApi',
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getNetworkType'
      ];

echo json_encode($signPackage);
?>