微信官方jssdk Demo -php版

已经经过修订，解决了https验证出错的问题，解决方案：跳过验证。

tp5下的开发

控制器：Lists.php

文件如下：

 1 <?php
 2 
 3 namespace apphomecontroller;
 4  
 5 use thinkController;
 6   
 7 use apphomemodelJssdk as Jsdk;
 8 Class Lists extends Base
 9 {   
10    public function lists()
11    {
12      //$jssdk = new JSSDK("yourAppID", "yourAppSecret");
13      $jssdk = new Jsdk("XXXX", "XXXXXX");
14      $cateres = $jssdk->GetSignPackage();
15      return  var_dump( $cateres);
16      exit;
17      $this->assign('cateres',$cateres);
18      
19      return $this->fetch('mendianinfo');
20    }
21    public function mendianinfo()
22    {
23      return $this->fetch();
24    }
25     
26 }

jsdk核心文件

Jsdk.php

  1 <?php
  2 namespace apphomemodel;
  3 
  4 use thinkModel;
  5  
  6 class Jssdk extends Model{ //微信官网的jssdk
  7   private $appId;
  8   private $appSecret;
  9 
 10   public function __construct($appId, $appSecret) {
 11     $this->appId = $appId;
 12     $this->appSecret = $appSecret;
 13   }
 14 
 15   public function getSignPackage() {
 16     $jsapiTicket = $this->getJsApiTicket();
 17 
 18     // 注意 URL 一定要动态获取，不能 hardcode.
 19     $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
 20     $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
 21 
 22     $timestamp = time();
 23     $nonceStr = $this->createNonceStr();
 24 
 25     // 这里参数的顺序要按照 key 值 ASCII 码升序排序
 26     $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
 27 
 28     $signature = sha1($string);
 29 
 30     $signPackage = array(
 31       "appId"     => $this->appId,
 32       "nonceStr"  => $nonceStr,
 33       "timestamp" => $timestamp,
 34       "url"       => $url,
 35       "signature" => $signature,
 36       "rawString" => $string
 37     );
 38     return $signPackage; 
 39   }
 40 
 41   private function createNonceStr($length = 16) {
 42     $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 43     $str = "";
 44     for ($i = 0; $i < $length; $i++) {
 45       $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
 46     }
 47     return $str;
 48   }
 49 
 50   private function getJsApiTicket() {
 51     // jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例
 52     $data = json_decode($this->get_php_file("jsapi_ticket.php"));
 53     if ($data->expire_time < time()) {
 54       $accessToken = $this->getAccessToken();
 55       // 如果是企业号用以下 URL 获取 ticket
 56       // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
 57       $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
 58       $res = json_decode($this->httpGet($url));
 59       $ticket = $res->ticket;
 60       if ($ticket) {
 61         $data->expire_time = time() + 7000;
 62         $data->jsapi_ticket = $ticket;
 63         $this->set_php_file("jsapi_ticket.php", json_encode($data));
 64       }
 65     } else {
 66       $ticket = $data->jsapi_ticket;
 67     }
 68 
 69     return $ticket;
 70   }
 71 
 72   private function getAccessToken() {
 73     // access_token 应该全局存储与更新，以下代码以写入到文件中做示例
 74     $data = json_decode($this->get_php_file("access_token.php"));
 75     if ($data->expire_time < time()) {
 76       // 如果是企业号用以下URL获取access_token
 77       // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
 78       $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
 79       $res = json_decode($this->httpGet($url));
 80       $access_token = $res->access_token;
 81       if ($access_token) {
 82         $data->expire_time = time() + 7000;
 83         $data->access_token = $access_token;
 84         $this->set_php_file("access_token.php", json_encode($data));
 85       }
 86     } else {
 87       $access_token = $data->access_token;
 88     }
 89     return $access_token;
 90   }
 91 
 92   private function httpGet($url) {//https不是必需的
 93     $curl = curl_init();
 94     curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
 95     curl_setopt($curl, CURLOPT_TIMEOUT, 500);
 96     // 为保证第三方服务器与微信服务器之间数据传输的安全性，所有微信接口采用https方式调用，必须使用下面2行代码打开ssl安全校验。
 97     // 如果在部署过程中代码在此处验证失败，请到 http://curl.haxx.se/ca/cacert.pem 下载新的证书判别文件。
 98     curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);//同时关闭这2项
 99     curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);//同时关闭这2项即可跳过https验证
100     curl_setopt($curl, CURLOPT_URL, $url);
101     $res = curl_exec($curl);
102     curl_close($curl);
103     return $res;
104   }
135   private function get_php_file($filename) {
136       $filename="E:phpStudyWWWweb1wexinapplicationhomemodel\".$filename;//反斜杠需要转义
137       var_dump($filename);
138     return trim(substr(file_get_contents($filename), 15));
139   }
140   private function set_php_file($filename, $content) {
141     $filename="E:phpStudyWWWweb1wexinapplicationhomemodel\".$filename;//反斜杠需要转义
142     $fp = fopen($filename, "w");
143     fwrite($fp, "<?php exit();?>" . $content);
144     fclose($fp);
145   }
146 }

lists.html文件

改文件是我自己更改的，主要看js是怎么引入的，不用在意我的html内容，部分js经过修改，我会标出。

  1 <!DOCTYPE html>
  2 <html lang="zh-cmn-Hans">
  3     <head>
  4         <meta charset="UTF-8">
  5         <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  6         <title>门店列表</title>
  7         <link rel="stylesheet" href="__PUBLIC__home/css/weui.css"/>
  8         <link rel="stylesheet" href="__PUBLIC__home/css/example.css"/>
  9         <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
 10         <style type="text/css">
 11             body{
 12                 background: #f1f0f6;
 13             }
 14             .weui-cell{
 15                 background: #fff;
 16                 margin-top: 1%;
 17                 border-bottom: 1px #e4e4e4 solid;
 18                 border-top: 1px #e4e4e4 solid;
 19                 padding: 20px 15px;
 20             }
 21             .icon-money img{
 22                 width: 15px;
 23                 position: relative;
 24                 top: 1px;
 25                 left: 10px;
 26             }
 27             .right{
 28                 border-left: 1px #e4e4e4 solid;
 29                 padding-left:5% ;
 30             }
 31             .right img{
 32                 width: 18px;
 33                 margin: 0 28%;
 34             }
 35             .right span{
 36                 display: block;
 37                 font-size: 12px;
 38                 width: 48px;
 39                 text-align: center;
 40                 border: 1px #e4e4e4 solid;
 41                 background: #f1f1f1;
 42                 border-radius: 4px;
 43                 color: #737373;
 44             }
 45         </style>
 46     </head>
 47     <body ontouchstart>
 48         <ul>
 49             <a href="{:url('home/Lists/mendianinfo')}">
 50                 <li class="weui-cell">
 51                     <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
 52                         <img src="__PUBLIC__home/images/index/icon.png" style=" 72px;display: block">
 53                     </div>
 54                     <div class="weui-cell__bd">
 55                         <p style="margin-bottom: 10px;color: #888;"><span>服务石化</span><i class="icon-money"><img src="__PUBLIC__home/images/index/price.png"/></i></p>
 56                         <p style="font-size: 13px;color: #888888;">河南省 郑州市 金水区</p>
 57                         <p style="font-size: 13px;color: #888888;">地址：东风南路</p>
 58                     </div>
 59                     <div class="right">
 60                         <img src="__PUBLIC__home/images/index/sate.png" alt="" />
 61                         <span>123m</span>
 62                     </div>
 63                 </li>
 64             </a>
 65             <a href="{:url('home/Lists/mendianinfo')}">
 66                 <li class="weui-cell">
 67                     <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
 68                         <img src="__PUBLIC__home/images/index/icon.png" style=" 72px;display: block">
 69                     </div>
 70                     <div class="weui-cell__bd">
 71                         <p style="margin-bottom: 10px;color: #888;"><span>服务石化</span><i class="icon-money"><img src="__PUBLIC__home/images/index/price.png"/></i></p>
 72                         <p style="font-size: 13px;color: #888888;">河南省 郑州市 金水区</p>
 73                         <p style="font-size: 13px;color: #888888;">地址：东风南路</p>
 74                     </div>
 75                     <div class="right">
 76                         <img src="__PUBLIC__home/images/index/sate.png" alt="" />
 77                         <span>123m</span>
 78                     </div>
 79                 </li>
 80             </a>
 81             <a href="{:url('home/Lists/mendianinfo')}">
 82                 <li class="weui-cell">
 83                     <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
 84                         <img src="__PUBLIC__home/images/index/icon.png" style=" 72px;display: block">
 85                     </div>
 86                     <div class="weui-cell__bd">
 87                         <p style="margin-bottom: 10px;color: #888;"><span>服务石化</span><i class="icon-money"><img src="__PUBLIC__home/images/index/price.png"/></i></p>
 88                         <p style="font-size: 13px;color: #888888;">河南省 郑州市 金水区</p>
 89                         <p style="font-size: 13px;color: #888888;">地址：东风南路</p>
 90                     </div>
 91                     <div class="right">
 92                         <img src="__PUBLIC__home/images/index/sate.png" alt="" />
 93                         <span>123m</span>
 94                     </div>
 95                 </li>
 96             </a>
 97         </ul>
 98         
 99     </body>
100 <script src="__PUBLIC__home/js/jweixin-1.0.0.js"></script>
101 <script>
102   /*
103    * 注意：
104    * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
105    * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
106    * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
107    *
108    * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
109    * 邮箱地址：weixin-open@qq.com
110    * 邮件主题：【微信JS-SDK反馈】具体问题
111    * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
112    */
113   wx.config({
        //这里要以次填写自己的配置信息
114     debug: true,
115       appId: "  ",
116       timestamp: " ",
117       nonceStr: ' ',
118       signature: ' ',
119     jsApiList: [
120       // 所有要调用的 API 都要加到这个列表中
121         'checkJsApi',
122         'onMenuShareTimeline',
123         'onMenuShareAppMessage',
124         'onMenuShareQQ',
125         'onMenuShareWeibo',
126         'onMenuShareQZone',
127         'hideMenuItems',
128         'showMenuItems',
129         'hideAllNonBaseMenuItem',
130         'showAllNonBaseMenuItem',
131         'translateVoice',
132         'startRecord',
133         'stopRecord',
134         'onVoiceRecordEnd',
135         'playVoice',
136         'onVoicePlayEnd',
137         'pauseVoice',
138         'stopVoice',
139         'uploadVoice',
140         'downloadVoice',
141         'chooseImage',
142         'previewImage',
143         'uploadImage',
144         'downloadImage',
145         'getNetworkType',
146         'openLocation',
147         'getLocation',
148         'hideOptionMenu',
149         'showOptionMenu',
150         'closeWindow',
151         'scanQRCode',
152         'chooseWXPay',
153         'openProductSpecificView',
154         'addCard',
155         'chooseCard',
156         'openCard'
157     ]
158   });  
159 
160 </script>

161 <script src="__PUBLIC__home/js/zepto.min.js"></script>

162 <script src="__PUBLIC__home/js/demo.js"> </script>

163 </html>

上面的文件里需要引入3个js文件，代码较多就不贴出来了，3个都是官方demo里的js文件，需要找我要的，可以扫描最下方的微信二维码打赏我，获取源文件。

还有2个文件用来保存access_token和jsapi_ticket。

以上是基于tp5进行的php微信开发，有疑问可以打赏后联系我！