jssdk的图像接口

项目中遇到了需要在微信公众号里上传图片的功能。如图所示：

点击“认证照片”按钮就需要调用微信图像接口，上传到微信服务器，可以预览，也可以下载到自己的服务器上，代码如下：

1.引入js（有些新接口需要引用到1.2.0，这个是目前最新的版本）

<script src='http://res.wx.qq.com/open/js/jweixin-1.2.0.js'></script>

2.初始化配置

wx.config({
        // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '{{appId}}', // 必填，公众号的唯一标识
        timestamp:'{{timestamp}}' , // 必填，生成签名的时间戳
        nonceStr: '{{nonceStr}}', // 必填，生成签名的随机串
        signature: '{{signature}}',// 必填，签名，见附录1
        jsApiList: [
            'chooseImage',  
            'previewImage',  
            'uploadImage',  
            'downloadImage',
            'getLocalImgData'
            // 'openAddress'//收货地址
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });

3.调用图像接口（适配苹果的图像显示）

wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        // wx.checkJsApi({
        //     jsApiList: ['openAddress'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        //     success: function(res) {
        //         // 以键值对的形式返回，可用的api值true，不可用为false
        //         // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        //         // alert(res)
        //     }
        // });


        $('.addFir').on('click',function(){
          //type:  1:图片一   2:图片二
          var type = 1;
          wxImg(type);
        });
        $('.addSec').on('click',function(){
          var type = 2;
          wxImg(type);
        });
        function wxImg(type){
          // var images = {localId:[],serverId:[]};
          var localId = [];
          var serverId = [];
           //调用 拍照或从手机相册中选图接口
           wx.chooseImage({
               success: function(res) {
                   if (res.localIds.length > 2) {
                       $.toast("只能上传一张图片");
                       return;
                   }
                   // console.log(res.localIds.length)
                   //返回选定照片的本地ID列表
                   localId = res.localIds;
                   if(type==1){
                      $('.cardImg01').attr('src',localId[0]);
                   }else if(type==2){
                      $('.cardImg02').attr('src',localId[0]);
                   }

                   //获取本地地址，修复苹果无法显示图片的bug
                   if(window.__wxjs_is_wkwebview){//判断iphone是不是用的wkwebview内核
                      wx.getLocalImgData({
                          localId: localId[0], // 图片的localID
                          success: function (res) {
                              var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                              if(type==1){
                                  $('.cardImg01').attr('src',localData);
                               }else if(type==2){
                                  $('.cardImg02').attr('src',localData);
                               }
                          }
                      });
                   }

                   //上传图片函数
                   function upload() {
                       //调用上传图片接口
                       wx.uploadImage({
                           localId: localId[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                           isShowProcess: 1,   // 默认为1，显示进度提示
                           success: function(res) {
                               //返回图片的服务器端ID res.serverId,然后调用wxImgCallback函数进行图片serverId操作
                               wxImgCallback(res.serverId,type);
                           },
                           fail: function(res) {
                              $.toast("图片上传失败");
                           }
                       });
                   }
                   upload();
               }
           });
        }
        function wxImgCallback(serverId,type) {
          if(type==1){
             $('.hid01').val(serverId);
          }else if(type==2){
             $('.hid02').val(serverId);

          }
        }
        // wx.openAddress({
        //     success: function (res) {
        //         var userName = res.userName; // 收货人姓名
        //         var postalCode = res.postalCode; // 邮编
        //         var provinceName = res.provinceName; // 国标收货地址第一级地址（省）
        //         var cityName = res.cityName; // 国标收货地址第二级地址（市）
        //         var countryName = res.countryName; // 国标收货地址第三级地址（国家）
        //         var detailInfo = res.detailInfo; // 详细收货地址信息
        //         var nationalCode = res.nationalCode; // 收货地址国家码
        //         var telNumber = res.telNumber; // 收货人手机号码
        //         alert('省:'+provinceName+'市'+cityName+'县'+countryName)
        //     }
        // });


    });