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

時間 2019-11-24

標籤 web 微信開發前期準備最新詳細流程欄目 HTML 简体版

原文原文鏈接

1、申請配置測試公衆號與配置本地服務器 php

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

二、進入到該頁面，能夠看到測試公衆號的微信名，以及很是重要的appID和appsecretajax

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

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

個人配置以及本地服務器文件夾以下，所以http://162c24l811.iok.la是個人服務器地址，可是這不是微信想要的哦api

配置完畢而且確認花生殼外網地址能夠訪問獲得後，在微信官方開發者文檔接入指南頁面下載認證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瀏覽器

四、填寫Token，能夠自行填寫，可是必須與wx_sample.php中的Token一致，打開wx_sample.php便可看到，可修改緩存

五、填寫域名，域名即爲花生殼給你的域名，個人是162c24l811.iok.la服務器

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

2、配置調用微信接口須要的access_token和簽名微信開發

微信有寫好各類語言版本的，本身忽然暫時找不到，就在這裏分享本身的雲盤連接吧：http://pan.baidu.com/s/1gfgKOHP，我用的是php語言版。不過，裏面有些東西仍是要本身配置，不懂php仍是難搞得的，因此，送給看到這篇文章又有須要的人一個禮，分享個基本弄好的，簡單配置就能夠用的版本吧：http://pan.baidu.com/s/1sk9qySl

目錄以下：

接下來講說怎麼配置吧：

一、access_token.json和jsapi_ticket.json創建好內容保持爲空哦，這裏是接收自動更新生成的access_token和jsapi_ticket用的。

二、配置get_jjsdk.php，require_once後爲jssdk.php的路徑，我都是放在一塊兒的，直接寫jssdk.php；$jssdk = new JSSDK（）裏面前兩個更換爲你的測試公衆號的appID和appsecret

三、配置jssdk.php，把如下file_get_contents後的改成你的json，注意路徑，這裏是生成簽名等寫入json文件的地方

到此不出意外便成功了。

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

一、除了微信網頁js-sdk等不能經過微信開發文檔帶的在線調試工具開發的功能，其餘都可按照官方文檔的要求，經過在線調試工具直接操做和寫上本身的代碼，微信公衆號會更新相應的功能，好比自定義菜單、語音回覆等。

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

三、建立一個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'
                      ]
                          });    
            }
        })  
})

四、開始根據官方文檔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了：

相關標籤/搜索