【微信公衆號開發】【10】JSJDK相關

前言：

1，優勢：官方提供的，會調用後還算使用方便，不用費勁瞭解各個原生組件

缺點：使用上有限制（如：上傳文件有大小限制），很容易踩坑，部分安卓手機及電腦端不支持pjax

總結：上手容易，坑不少　

2，官方文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 （內容較多）

3，退出頁面

4，選擇性隱藏右上角的功能按鈕

5，自定義分享內容

6，上傳圖片

7，圖片查看

正文：

步驟：綁定域名——引入JS文件——權限驗證——經過ready接口處理成功驗證/經過error接口處理失敗驗證   （ 前三步請參照第二章—JS接口安全域名部分 ）

1，權限驗證 

//1.js 入口頁面URL，只在主頁引用。
//主要爲了解決使用pjax的頁面，在獲取微信受權時，在微信PC端，手機端表現形式不一致的問題
var entryUrl = location.href.split("#")[0]; 

//2.js 每一個頁面引用
var wxCount = 0; //獲取受權失敗後，從新嘗試
var WX_URL = "http://" + document.domain; //當前域名

$(function () {    
    //獲取受權
    var wxUrl = location.href.split("#")[0];
    getWxTicket(wxUrl); 
    //微信的簽名只認第一個加載的頁面的URL，只在入口簽名一次在iOS上是能夠的，但在安卓有些機型會簽名不上，因此保險起見，每一個頁面都簽名一次
}); 

function getWxTicket(wxUrl){
    var url = window.location.href;
    if(url.indexOf("/index") != -1){ //回退後首頁簽名不上，此處爲特殊處理，應當不須要用到
        wxUrl = WX_URL + "/index";
    }
    
    $.ajax({
        type : "post",
        url : "/getTicket",
        data : {
            "url" : wxUrl
        },
        dataType : "json",
        success : function(data){
            var obj = data;
            wx.config({
                debug: false, //開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
                appId: obj.appId, //必填，公衆號的惟一標識
                timestamp: obj.timestamp, //必填，生成簽名的時間戳
                nonceStr: obj.nonceStr, //必填，生成簽名的隨機串
                signature: obj.signature,//必填，簽名，見微信開發文檔附錄1
                jsApiList: ["hideMenuItems","showMenuItems","chooseImage","previewImage","uploadImage","downloadImage","closeWindow",
                            "onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareWeibo","onMenuShareQZone",
                            "scanQRCode", "getLocation"], // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
            });
             wx.error(function (res) {
                if(wxCount == 0){
                    wxCount = 1;
                    getWxTicket(entryUrl);
                }    
            });
        }
    });
}

2，ready接口/error接口

wx.ready(function(){
    // config信息驗證後會執行ready方法，全部接口調用都必須在config接口得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。
　　　　對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。
});

wx.error(function(res){
    // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
});

3，退出頁面

WeixinJSBridge.invoke('closeWindow',{},function(res){}); 

但因爲這個事件有響應時間，因此在還沒退出時點回退按鈕會退到上一頁面

改進的寫法：

history.pushState(null, null, document.URL);
setTimeout(function(){WeixinJSBridge.invoke('closeWindow',{},function(res){});},1000);

注：不知是不是我採用pjax的緣由，部分手機出現進入頁面當即閃退而不是點擊回退再退出的問題，因此我實際開發中是把沒有用這個方法的，直接都是退到入口頁面

4，選擇性隱藏右上角的功能按鈕

wx.ready(function (){
    wx.hideMenuItems({
        menuList: [
        'menuItem:favorite',
        'menuItem:share:qq',
        'menuItem:share:QZone',
        'menuItem:share:weiboApp',
        'menuItem:share:facebook',
        'menuItem:openWithQQBrowser',
        'menuItem:openWithSafari',
        'menuItem:share:email',
        'menuItem:originPage',
        'menuItem:copyUrl',
        'menuItem:share:brand'
        ]
    });
    wx.showMenuItems({
        menuList: [        
        'menuItem:addContact'
        ]
    });
});

5，自定義分享內容

　　wx.ready(function (){        
        //分享給好友
        wx.onMenuShareAppMessage({
            title: title,//標題
            desc: desc,//描述
            link: shareUrl,//地址
            imgUrl: 'http://XX.png',//分享圖片，若是不設定，會讀取該頁面第一張
            type: '', // 分享類型,music、video或link，不填默認爲link
            dataUrl: '', // 若是type是music或video，則要提供數據連接，默認爲空
            success: function () { 
            },
            cancel: function () { 
            }
        });
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: title,
            desc：desc，
            link: shareUrl,
            imgUrl: 'http://XX.jpg',
            success: function () { 
            },
            cancel: function () { 
            }
        });
        wx.onMenuShareQQ({
            title: title,
            desc: desc,
            link: shareUrl,
            imgUrl: '',
            success: function () { 
               // 用戶確認分享後執行的回調函數
            },
            cancel: function () { 
               // 用戶取消分享後執行的回調函數
            }
        });
        wx.onMenuShareWeibo({
            title: title,
            desc: desc,
            link: shareUrl,
            imgUrl: '',
            success: function () { 
               // 用戶確認分享後執行的回調函數
            },
            cancel: function () { 
                // 用戶取消分享後執行的回調函數
            }
        });
        wx.onMenuShareQZone({
            title: title,
            desc: desc,
            link: shareUrl,
            imgUrl: '',
            success: function () { 
               // 用戶確認分享後執行的回調函數
            },
            cancel: function () { 
                // 用戶取消分享後執行的回調函數
            }
        });
    });

6，上傳圖片（若是隻是上傳到微信，微信只會保留一段時間的，因此上傳後還要下載回本地）

function chooseImage() {
    var length = $("#img1 li").length;//已經上傳的張數
    var count = 3-length;
    if(length < 3){
         wx.chooseImage({
            count: count, // 默認9
            sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
            sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
            success: function (res) {
                var localIds = res.localIds;
                if(localIds.length == 0){
                    layer.open({content:"請先選擇圖片", btn: '我知道了'});
                    return;
                }
                uploadImage(0,localIds.length,localIds,"exercise");
            }
        });
    }else{
        layer.open({content:"只能上傳3張圖片哦", btn: '我知道了'});
    }
};

/** 
 * 該方法用來上傳文件 
 * @param start:本地ID開始的下標(當前上傳的圖片的下標) 
 * @param end:本地ID的總個數（也就是選擇的圖片的總個數） 
 * @param IDs:當前批次選擇的全部圖片在本地ID的集合 
 * @param source:來源，後臺根據這個存入不一樣的文件夾 
 * */  
function uploadImage(start,end,IDs,source){  
    if(start<end){  
        var localId = IDs[start].toString();  
        wx.uploadImage({  
            localId: localId,  
            isShowProgressTips: 1,//顯示進度條  
            success: function (res) {  
                var serverId = res.serverId; // 返回圖片的服務器端ID  
                serverId = serverId.toString();  
                //上傳到服務器
                $.ajax({
                    type : "POST",
                    url : "downloadMedia",
                    data:{
                        "mediaId" : serverId,
                        "source" : source,
                    },
                    success : function(data){
                        if(data == ""){
                            layer.open({content:"格式錯誤", btn: '我知道了'}); 
                            return;
                        }else if(data == "false"){
                            layer.open({content:"access_token失效，請聯繫開發人員", btn: '我知道了'}); 
                            return;
                        }else{
                            if(source == "issue"){
                                $("#img1").html("<li data-path="+data+"><img src="+data+" style='cursor:pointer' class='myImg'></li>");
                            }else{   
                                $("#img1").append("<li data-path="+data+"><img src="+data+" style='cursor:pointer' class='myImg'></li>");
                            }
                        }                        
                    },
                    error : function(){
                        layer.open({content:"抱歉，圖片上傳失敗，請稍後再試", btn: '我知道了'});      
                    }
                });                   
                start++;  
                //延遲1s，這1s用來顯示圖片信息，避免出現連續上傳幾回最後一次性顯示圖片的問題  
                setTimeout(function(){  
                    uploadImage(start,end,IDs,source);  
                },500);  
            }  
        });  
    }  
};   

@ApiOperation(value = "使用微信上傳圖片接口後將圖片下載回本地", notes = " ", response = Result.class)
@RequestMapping(value = "downloadMedia", method = RequestMethod.POST)
public String downloadMedia(String mediaId, String appId, String active) throws IOException { 
    logger.info(String.format("downloadMedia mediaId:%s appId:%s active:%s", mediaId, appId, active));
    
    String savePath = dealSavePath(active); //拼接存儲路徑，視狀況而定
    
    String access_token = WeixinUtil.getAccessToken(appId);                          
    String requestUrl = String.format(WxConfig.MEDIA_GET_URL, access_token, mediaId); // 拼接請求地址 
    
    try {   
        URL url = new URL(requestUrl);   
        HttpURLConnection conn = (HttpURLConnection) url.openConnection();   
        conn.setDoInput(true);   
        conn.setRequestMethod("GET");
        String fileExt = getFileType(conn.getHeaderField("Content-Type"));  // 根據內容類型獲取擴展名     
        
        if (fileExt.equals("") || !fileExt.equals(".jpg")){
            return "";
        }
        
        String fileName = mediaId + fileExt;
        String filePath = Config.MEDIA_FILE + savePath + fileName; 
        
        BufferedInputStream bis = new BufferedInputStream(conn.getInputStream());   
        FileOutputStream fos = new FileOutputStream(new File(filePath));   
        byte[] buf = new byte[8096];   
        int size = 0;   
        while ((size = bis.read(buf)) != -1)    
            fos.write(buf, 0, size);   
        fos.close();   
        bis.close();     
        conn.disconnect(); 
        
        String realUrl = Config.REAL_MEDIA_DOMAIN + savePath + fileName;
        logger.info("downloadMedia success, realUrl=" + realUrl);
        
        return realUrl;
    } catch (Exception e) {   
        logger.error("downloadMedia error:" + e.getMessage());
        return "";  
    }        
}

7，圖片查看（這裏的圖片地址必需要加上域名）

var imgDomain = "https://i.cnblogs.com/"; //當前域名

//單張
$("#pjax-content").on("click", ".my_singleImg",function(event) {
    var imgArray = [];
    var oParent = $(this).parent();
    var imgSrc = $(this).data("src"); //當前圖片路徑
    var curImageSrc = imgSrc.indexOf("http") != -1 ? imgSrc : imgDomain + imgSrc;
    
    if (curImageSrc && !oParent.attr("href")) {       
        var itemSrc = $(this).data("src");
        var curItemSrc = itemSrc.indexOf("http") != -1 ? itemSrc : imgDomain + itemSrc;
        imgArray.push(curItemSrc);
        wx.previewImage({
            current: curImageSrc,
            urls: imgArray
        });
    }
});

//多張
$("#pjax-content").on("click", ".my_moreImg",function(event) {
    var imgArray = [];
    var oParent = $(this).parent();
    var imgSrc = $(this).data("src");
    var curImageSrc = imgSrc.indexOf("http") != -1 ? imgSrc : imgDomain + imgSrc;
    
    if (curImageSrc && !oParent.attr("href")) {
        $(this).parent().find(".my_moreImg").each(function(index, el) {
            var itemSrc = $(this).data("src");
            var curItemSrc = itemSrc.indexOf("http") != -1 ? itemSrc : imgDomain + itemSrc;
            imgArray.push(curItemSrc); 
        });
        wx.previewImage({
            current: curImageSrc,
            urls: imgArray
        });
    }
});