微信js sdk图片接口 上传图片

　　开发微信平台网页不可避免的需要调用微信提供的接口。微信JS-SDK提供了方便的调用。
　　需要实现上传图片更换头像的功能，要用到图片相关的几个接口。根据微信开发者文档的说明，步骤一绑定域名，步骤二引入js文件都比较简单。
　　步骤三：通过config接口注入权限验证配置。项目所使用的是通过ajax获取数据，所以我是在success中注入config。

 success: function (signature, status, xhr) {   　
     wx.config({
         debug: true,
         appId: signature.appid,
         timestamp: signature.timestamp,
         nonceStr: signature.noncestr,
         signature: signature.signature,
         jsApiList: ['chooseImage',uploadImage','downloadImage'] 
         });
 }

　　需要注意的是nonceStr，appId的大小写问题，可以看到这里后端拿到的是小写的。
　　测试的时候总是提示invalid signature，文档上列出了常见错误可以对照着排查。其实出现这个问题的主要原因还是url不对。

      $$.ajax({
          url: "http://",
          method: 'POST',
          data: JSON.stringify({url: location.href}),`
       }

　　1. 确定url是否正确。
　　2. 确定data中url是当前页面的地址。如果分享还要注意使用encodeURIComponent(location.href.split(‘#’)[0]) 。因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
　　如果config注入成功控制台会打印“ok”,接着在wx.ready()中处理。
　　我想要实现的功能是点击头像选择图片可以自动更换。其实这个过程涉及到几个接口[‘chooseImage’, ‘uploadImage’,’downloadImage’] 。 chooseImage已经可以在选择图片时预览了，通过localId可以直接在设备上显示，但并没有存到自己的服务器上。可以先传到微信服务器上再下载到本地服务器。

   wx.ready(function() {
      var images = {
        localId: [],
        serverId: [],
        downloadId: []
      };
      wx.chooseImage({
        success: function (res) {
          images.localId = res.localIds;
          if (images.localId.length == 0) {
            alert('请先选择图片');
            return;
          }else {
            wx.uploadImage({
              localId: images.localId.toString(),
              success: function (res) {
                alert("上传成功！"+res.serverId);
                images.serverId.push(res.serverId);
                ///存储到本地服务器
              },
              fail: function (res) {
                  alert(JSON.stringify(res));
              }
            });
          }
        }
      });
    });`

　　这里是只能选择一张图片的情况。同时要注意函数的执行顺序，直到有返回结果才可以进行下一步。也可以用回调函数的形式写。