项目中遇到需要选取照片上传的需求，因为网页运行在微信的浏览器里面，所以用微信的 js-sdk 提供的选取照片功能，来进行项目开发。实际开发中需要用到微信web开发者工具，详细参考链接：https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html。
1.配置微信JS-SDK相关文件
1）、JSSDk使用最新的1.2.0版本：https://res.wx.qq.com/open/js/jweixin-1.2.0.js。
ios网页开发适配问题：
变化：1.2.0以下版本的JSSDK不再支持通过使用chooseImage api返回的localld以如："img src=https://www.jb51.net/wxLocalResource:/50114659201332”的方式预览图片。
适配建议：直接将JSSDK升级为1.2.0最新版本即可帮助页面自动适配，但在部分场景下可能无效，此时可以使用接口来直接获取数据。
（后附详解代码）
2）、jsapiSign.js文件：
/** * 使用jssdk接口的页面，必须引用该文件 * actionUrl：后台服务请求地址 * url：微信jssdk授权页面地址 */ $.post("/getJsapiSign", {'url':location.href.split('#')[0]}, function(data) { wx.config({ debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId : data.appid, // 必填，公众号的唯一标识 timestamp : data.timestamp, // 必填，生成签名的时间戳 nonceStr : data.noncestr, // 必填，生成签名的随机串 signature : data.signature,// 必填，签名，见附录1 jsApiList : [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'translateVoice', 'startRecord', 'stopRecord', 'onRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard', 'getLocalImgData' ] }); wx.error(function(res) { alert("wx.config加载失败"); }); }, 'json');
2.具体实现过程
1）、选取照片
这里使用微信 js-sdk 的 chooseImage 方法，得到照片在本地存储的 id，十分简单：
2）、获取照片数据
根据微信的官方开发文档，得到的 localId 可以直接作为 img 元素的 src 属性进行显示
3）、照片上传
这里使用微信 js-sdk 的 uploadImage 方法
wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片 wx.uploadImage({ localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得 isShowProgressTips: 1, // 默认为1，显示进度提示 success: function (res) { var medias = {'lid':localIds[0].toString(), 'sid':res.serverId}; $('#img_media').attr('src', medias.lid); },fail:function(res){ alert("上传失败"); } }); } });
3.iOS WKWebview 网页开发适配
JSAPI相关适配
1）、将不再支持cache
变化：在WKWebview中将暂不支持cache jsapi。
适配建议：所有使用此api的开发者可去掉页面相关逻辑。
2）、页面通过LocalID预览图片
变化：1.2.0以下版本的JSSDK不再支持通过使用chooseImage api返回的localld以如：”img src=https://www.jb51.net/wxLocalResource:/50114659201332”的方式预览图片。
适配建议：直接将JSSDK升级为1.2.0最新版本即可帮助页面自动适配，但在部分场景下可能无效，此时可以使用接口来直接获取数据。
（目前JSSDk线上版本是 1.0.0 和 1.1.0，更新版本为1.2.0 ，https://res.wx.qq.com/open/js/jweixin-1.2.0.js ）
if (window.__wxjs_is_wkwebview) { wx.getLocalImgData({ localId: localIds[0], // 图片的localID success: function (res) { var localData = res.localData; // localData是图片的base64数据，可以用img标签显示 localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下 $('#img_media').attr('src', localData); },fail:function(res){ alert("显示失败"); } }); }
三、有使用JSSDK，并且使用了wx.config进行权限授权需关注jsapi调用的失败问题