微信官方jssdk Demo -php版


已經經過修訂,解決了https驗證出錯的問題,解決方案:跳過驗證。

tp5下的開發

控制器:Lists.php

文件如下:

 1 <?php
 2 
 3 namespace app\home\controller;
 4  
 5 use think\Controller;
 6   
 7 use app\home\model\Jssdk 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 app\home\model;
  3 
  4 use think\Model;
  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:\phpStudy\WWW\web1\wexin\application\home\model\\".$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:\phpStudy\WWW\web1\wexin\application\home\model\\".$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="width: 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="width: 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="width: 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微信開發,有疑問可以打賞后聯系我!

 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM