微信JS-SDK选取手机照片上传功能
项目中遇到需要选取照片上传的需求，因为网页运行在微信的浏览器里面，所以用微信的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不再支持通过使用chooseImageapi返回的localld以如："imgsrc=wxLocalResource://50114659201332”的方式预览图片。
适配建议：直接将JSSDK升级为1.2.0最新版本即可帮助页面自动适配，但在部分场景下可能无效，此时可以使用getLocalImgData接口来直接获取数据。
（后附详解代码）
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){
varlocalIds=res.localIds;//返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
wx.uploadImage({
localId:localIds[0],//需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips:1,//默认为1，显示进度提示
success:function(res){
varmedias={'lid':localIds[0].toString(),'sid':res.serverId};
$('#img_media').attr('src',medias.lid);
},fail:function(res){
alert("上传失败");
}
});
}
});
3.iOSWKWebview网页开发适配
JSAPI相关适配
1）、将不再支持cache
变化：在WKWebview中将暂不支持cachejsapi。
适配建议：所有使用此api的开发者可去掉页面相关逻辑。
2）、页面通过LocalID预览图片
变化：1.2.0以下版本的JSSDK不再支持通过使用chooseImageapi返回的localld以如：”imgsrc=wxLocalResource://50114659201332”的方式预览图片。
适配建议：直接将JSSDK升级为1.2.0最新版本即可帮助页面自动适配，但在部分场景下可能无效，此时可以使用getLocalImgData接口来直接获取数据。
（目前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){
varlocalData=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调用的失败问题
变化：WKWebview的内部实现变更使我们对微信内的页面jsapi权限管理做了一定逻辑上的调整，有极小可能会发生以前授权正常的jsapi获取权限不正常，从而导致调用jsapi失败。
适配建议：
1.iOS微信6.5.1，WKWebview在此版本中已知有以下问题：页面使用HTML5的HistoryAPIpushState;popstate; replaceState等控制页面导航（典型的如单应用页面），同时使用JSSDK的wx.config为jsapi授权，此时大几率会出现jsapi因为无权限而调用失败的问题。在6.5.1中页面若可能的情况下，可使用Anchorhash技术替换History技术来解决此问题。
2.iOS微信6.5.2及其之后版本，将不会存在以上问题，但不能100%确认有使用到history或hash技术更改页面导航地址的页面完全没有此类问题，依然需要开发者注意关注此类问题。
本文已被整理到了《JavaScript微信开发技巧汇总》，欢迎大家学习阅读。
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。