web微信開發前期准備最新詳細流程

一、申請配置測試公眾號與配置本地服務器  

1、打開瀏覽器，輸入：http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login，微信掃碼確認登錄

 

2、進入到該頁面，可以看到測試公眾號的微信名，以及非常重要的appID和appsecret

 

3、填寫服務器url，這個地址是要可以外網訪問的，同時給微信服務器認證的，所以分兩步走，一是先弄個外網可以訪問的服務器地址，二是在該地址下放置微信官方要求的php文件

• 網上許多教程都是配置外網服務器，比如百度雲服務或者新浪雲服務，不利於提高開發效率，本人推薦配置本地服務器，主要是通過花生殼與阿帕奇，具體怎么配置外網可訪問的本地服務器，請看我這篇文章的前半部分：http://www.cnblogs.com/ahao68/p/6250398.html

        我的配置以及本地服務器文件夾如下，因此http://162c24l811.iok.la是我的服務器地址，但是這不是微信想要的哦

         

  

• 配置完畢並且確認花生殼外網地址可以訪問得到后，在微信官方開發者文檔接入指南頁面下載認證php文件：wx_sample.php https://mp.weixin.qq.com/wiki/8/f9a0b8382e0b77d87b3bcc1ce6fbc104.html#.E7.AC.AC.E4.B8.80.E6.AD.A5.EF.BC.9A.E5.A1.AB.E5.86.99.E6.9C.8D.E5.8A.A1.E5.99.A8.E9.85.8D.E7.BD.AE
• 放到服務器地址或者服務器里的文件夾，此時訪問到wx_sample.php 為止的路徑才是微信想要的服務器可驗證url地址，比如我的放在core里面，因此這個url地址為：

         http://162c24l811.iok.la/core/wx_sample.php

 

 

4、填寫Token，可以自行填寫，但是必須與wx_sample.php中的Token一致，打開wx_sample.php即可看到，可修改

 

5、填寫域名，域名即為花生殼給你的域名，我的是162c24l811.iok.la

 到此測試公眾號與本地服務器配置完畢。

 

二、配置調用微信接口需要的access_token和簽名

     微信有寫好各種語言版本的，自己突然暫時找不到，就在這里分享自己的雲盤鏈接吧：http://pan.baidu.com/s/1gfgKOHP，我用的是php語言版。不過，里面有些東西還是要自己配置，不懂php還是難搞得的，所以，送給看到這篇文章又有需要的人一個禮，分享個基本弄好的，簡單配置就可以用的版本吧：http://pan.baidu.com/s/1sk9qySl

目錄如下：

 

     接下來說說怎么配置吧：

1、access_token.json和jsapi_ticket.json建立好內容保持為空哦，這里是接收自動更新生成的access_token和jsapi_ticket用的。

2、配置get_jjsdk.php，require_once后為jssdk.php的路徑，我都是放在一起的，直接寫jssdk.php；$jssdk = new JSSDK（）里面前兩個更換為你的測試公眾號的appID和appsecret

3、配置jssdk.php，把以下file_get_contents后的改為你的json，注意路徑，這里是生成簽名等寫入json文件的地方

到此不出意外便成功了。

 

三、開始調用接口和使用微信調試工具

1、除了微信網頁js-sdk等不能通過微信開發文檔帶的在線調試工具開發的功能，其他均可按照官方文檔的要求，通過在線調試工具直接操作和寫上自己的代碼，微信公眾號會更新相應的功能，比如自定義菜單、語音回復等。

 

2、關於使用微信jssdk進行開發，首先先在html頁面引入微信js（官方文檔為1.1版本，部分功能不支持蘋果，比如蘋果不支持1版本的圖片預覽，在這里貢獻找了好久的1.2版本）：<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js "></script>

3、創建一個js文件引入，這個文件用來請求之前配置好的php文件，更新生成和緩存簽名等，以及初始化微信接口，即config。

//獲取當前url
var host = window.location.host;
//請求的php地址
get_jjsdk='http://'+window.location.host+'/core/get_jjsdk.php';
$(function(){ 
       var url = window.location.href;
        $.ajax({
        　　url : get_jjsdk,
        　　type: "post", 
            data:{'url':url},
        　　error : function(XMLHttpRequest,textStatus, errorThrown) {
                    console.log(XMLHttpRequest.status);//200客戶端請求已成功
                    console.log(XMLHttpRequest.readyState);//4響應內容解析完成，可以在客戶端調用了
                    console.log(textStatus);//parsererror
        　　},
            success:function(data){
                //返回的簽名時間戳id等等
                  var jssdk = data;
                //console.log(data);
                //初始化接口config
                  wx.config({
                        debug: false , // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
                        appId: jssdk.appId, // 必填，公眾號的唯一標識
                        timestamp:jssdk.timestamp, // 必填，生成簽名的時間戳
                        nonceStr: jssdk.nonceStr, // 必填，生成簽名的隨機串
                        signature: jssdk.signature,// 必填，簽名，見附錄1
                        // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
                      jsApiList: [
                          'checkJsApi',
                          'onMenuShareTimeline',
                          'onMenuShareAppMessage',
                          'onMenuShareQQ',
                          'onMenuShareWeibo',
                          'hideMenuItems',
                          'showMenuItems',
                          'hideAllNonBaseMenuItem',
                          'showAllNonBaseMenuItem',
                          'translateVoice',
                          'startRecord',
                          'stopRecord',
                          'onRecordEnd',
                          'playVoice',
                          'pauseVoice',
                          'stopVoice',
                          'uploadVoice',
                          'downloadVoice',
                          'chooseImage',
                          'previewImage',
                          'uploadImage',
                          'downloadImage',
                          'getNetworkType',
                          'openLocation',
                          'getLocation',
                          'hideOptionMenu',
                          'showOptionMenu',
                          'closeWindow',
                          'scanQRCode',
                          'chooseWXPay',
                          'openProductSpecificView',
                          'addCard',
                          'chooseCard',
                          'openCard'
                      ]
                          });    
            }
        })  
})

4、開始根據官方文檔jssdk開發想要的功能吧~~，這里舉例選擇圖片和上傳圖片接口的簡單案例：

wx.ready(function () {
    //點擊觸發選擇圖片
$('.chooseImage').click(function(){

    wx.chooseImage({
        count: 9, // 默認9
        sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
        sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
        success: function(res) {
            console.log(res);
            images.localId = res.localIds;
            alert('已選擇 ' + res.localIds.length + ' 張圖片');
          var i=0;length = images.localId.length;

            function upload() {
                //上傳圖片到微信服務器
                //if (images.localId.length == 0) {
                //    alert('請先使用 chooseImage 接口選擇圖片');
                //    return;
                //}
                wx.uploadImage({
                    localId: images.localId[i],
                    isShowProgressTips: 1, // 默認為1，顯示進度提示
                    success: function(res) {
                        console.log(res);
                        i++;
                      if (i < length) {
                            upload();
                        }else{
                           
                        }

                    },
                    fail: function(res) {
                        alert(JSON.stringify(res));
                    }
                });
            }
            upload();
           



        }
    });
});

 PS:如果你接手的不是自己一手開發的微信網頁，那么你首先要找后台要接口地址和Token；比如我的一個項目接口和Token是后台配置的，直接在本地運行會出現報錯：

后台給我配置是這樣的：

除了把這個接入微信測試公眾號，記得集成服務器也得修改地址，我的是阿帕奇xampp，每次修改記得重啟集成服務器！！

 

再次訪問項目入口文件，ok了：