【微信公众号开发】【10】JSJDK相关

2019年11月16日 阅读数:16
这篇文章主要向大家介绍【微信公众号开发】【10】JSJDK相关,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

前言:html

1,优势:官方提供的,会调用后还算使用方便,不用费劲了解各个原生组件ajax

缺点:使用上有限制(如:上传文件有大小限制),很容易踩坑,部分安卓手机及电脑端不支持pjaxjson

总结:上手容易,坑不少 api

2,官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 (内容较多)安全

3,退出页面服务器

4,选择性隐藏右上角的功能按钮微信

5,自定义分享内容微信开发

6,上传图片app

7,图片查看dom

正文:

步骤:绑定域名——引入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
        });
    }
});