小小创客技术点

前段时间我和我的团队制作了小小创客，当然内容相关的技术点和多，我们用的了本地数据库，数据缓存，延缓加载，微信接口上传图片。

这里我想分享下微信平台上传图片：

一． 调用微信接口实现图片的上传

最开始实现图片上传用的是<input type=”file”>插件来实现的。用这种方法在pc以及苹果的平台上可以很好的兼容，但是在android上各种机型的兼容性各有差异，总体上看兼容性很差。因为小小创客是属于移动端微信开发的一部分，如果不能很好的兼容苹果，android，一切都是徒劳的。为了解决这一问题，我们团队从原来的使用<input type=”file”>上传转向调用微信现成接口实现上传。

微信接口上传的思路为：移动端调用微信接口拍照或者从相册选择图片è调用微信上传接口上传图片到微信服务器（图片只能在微信服务器保存3天）è利用图片下载接口将上传到微信服务器上的图片下载到自己服务器,这样就完成了图片的上传。

微信为开发者提供了一套非常完备的接口：

上图是微信开发js-sdk文档中的部分接口，其中就有专门的图像接口，而且功能十分完备有拍照、从相册选择图片，预览图片，上传图片，下载图片的接口。

实现微信接口上传的第一步便是要获得接口权限。

一． 调用微信接口实现图片的上传

最开始实现图片上传用的是<input type=”file”>插件来实现的。用这种方法在pc以及苹果的平台上可以很好的兼容，但是在android上各种机型的兼容性各有差异，总体上看兼容性很差。因为小小创客是属于移动端微信开发的一部分，如果不能很好的兼容苹果，android，一切都是徒劳的。为了解决这一问题，我们团队从原来的使用<input type=”file”>上传转向调用微信现成接口实现上传。

微信接口上传的思路为：移动端调用微信接口拍照或者从相册选择图片è调用微信上传接口上传图片到微信服务器（图片只能在微信服务器保存3天）è利用图片下载接口将上传到微信服务器上的图片下载到自己服务器,这样就完成了图片的上传。

微信为开发者提供了一套非常完备的接口：

 

上图是微信开发js-sdk文档中的部分接口，其中就有专门的图像接口，而且功能十分完备有拍照、从相册选择图片，预览图片，上传图片，下载图片的接口。

实现微信接口上传的第一步便是要获得接口权限。

1． 接口权限获得方法

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。如果你使用了支付类接口，请确保支付目录在该安全域名下，否则将无法完成支付。

备注：登录后可在“开发者中心”查看对应的接口权限。

步骤二：引入JS文件

 

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK

如需使用摇一摇周边功能，请引入 jweixin-1.1.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息

wx.config({

    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

    appId: '', // 必填，公众号的唯一标识

    timestamp: , // 必填，生成签名的时间戳

    nonceStr: '', // 必填，生成签名的随机串

    signature: '',// 必填，签名，见附录1

    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

       其中最重要的一步就是签名生成。签名生成步骤：使用AppID和AppSecret调用本接口来获取access_tokenè拿到的access_token 采用http GET方式请求获得jsapi_ticket

成功返回如下JSON：

{

"errcode":0,

"errmsg":"ok",

"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",

"expires_in":7200

}

     获得jsapi_ticket之后，就可以生成JS-SDK权限验证的签名了。

     签名生成算法：

        （签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。）

         步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1

         步骤2. 对string1进行sha1签名，得到signature

2.调用接口实现上传功能

  当第一步中config接口注入权限验证配置完成后便能使用微信提供的接口来实现上传功能了。

   wx.ready(function(){

 

    // 在这里面调用微信接口

   debug: false,

      appId: '',

      timestamp:’’,

      nonceStr: '',

      signature: '',

      jsApiList: [

             //这里是所要调用的接口名称，因为要实现上传，所以调用图像的四个接口

            'chooseImage',

            'previewImage',

            'uploadImage',

            'downloadImage', 

       ]

    //在这里写具体调用接口的函数

});

     四个接口的使用方法：

        拍照或从手机相册中选图接口

            wx.chooseImage({

    count: 1, // 默认9

    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

    success: function (res) {

        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

    }

});

预览图片接口

wx.previewImage({

    current: '', // 当前显示图片的http链接

    urls: [] // 需要预览的图片http链接列表

});

上传图片接口

wx.uploadImage({

    localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得

    isShowProgressTips: 1, // 默认为1，显示进度提示

    success: function (res) {

        var serverId = res.serverId; // 返回图片的服务器端ID

    }

});

 

下载图片接口

wx.downloadImage({

    serverId: '', // 需要下载的图片的服务器端ID，由uploadImage接口获得

    isShowProgressTips: 1, // 默认为1，显示进度提示

    success: function (res) {

        var localId = res.localId; // 返回图片下载后的本地ID

    }

});

二． 七牛镜像存储——实现将增量图片自动同步保存到七牛云服务器上

l 小小创客产品中涉及大量图片，当大量用户同时访问时我们自己的服务器将面临很大的压力，而且图片加载的速度必然缓慢。为了减轻我们服务器压力和提高图片加载的速度。我们选择了将图片放到七牛云服务器上。

相比其他云服务器，选择七牛的原因：1.七牛云服务器中有自动批量处理图片的功能2.七牛中提供了镜像存储，能自动同步新增图片到七牛云服务器上3.七牛还提供了众多同步工具，有图形操作也有命令行操作。

镜像存储

镜像存储是指你网站的数据在存储在自己服务器上的情况下，额外使用七牛云存储作为镜像服务器，让网站的用户每次访问的时候都从七牛云存储上读取。如果七牛云存储上没有用户需要读取的数据，则七牛的服务器会从源站拉取资源，然后再返回给网站的用户。

镜像存储的实现非常简单，主要步骤如下：

步骤一：申请七牛账号，创建空间xxck，注意一定要设置为公开空间

         

步骤二：找到空间设置，里面就会看到镜像存储，点击一键加速网站 

  

步骤三：在镜像源设置自己服务器的中小小创客所在的位置，点击加速就可以了。

  示例：http：//xxx.xxx.com/xxck

  

   这样就实现了七牛的镜像存储