微信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不再支持通过使用chooseImage api返回的localld以如:"img src=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) { 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=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) { 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调用的失败问题
变化:WKWebview的内部实现变更使我们对微信内的页面jsapi权限管理做了一定逻辑上的调整,有极小可能会发生以前授权正常的jsapi获取权限不正常,从而导致调用jsapi失败。
适配建议:
1. iOS微信6.5.1,WKWebview在此版本中已知有以下问题:页面使用HTML5的History API pushState; popstate; replaceState等控制页面导航(典型的如单应用页面),同时使用JSSDK的wx.config为jsapi授权,此时大几率会出现jsapi因为无权限而调用失败的问题。 在6.5.1中页面若可能的情况下,可使用Anchor hash技术替换History技术来解决此问题。
2. iOS微信6.5.2及其之后版本,将不会存在以上问题,但不能100%确认有使用到 history或hash技术更改页面导航地址的页面完全没有此类问题,依然需要开发者注意关注此类问题。
本文已被整理到了《JavaScript微信开发技巧汇总》,欢迎大家学习阅读。
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- 微信js-sdk上传与下载图片接口用法示例
- 微信js-sdk地理位置接口用法示例
- 微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
- 解析微信JS-SDK配置授权,实现分享接口
- 微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
- PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
- 微信 java 实现js-sdk 图片上传下载完整流程
- 微信js-sdk界面操作接口用法示例
- 最详细的ASP.NET微信JS-SDK支付代码
- php微信公众号js-sdk开发应用
- 微信JS-SDK坐标位置如何转换为百度地图坐标
- 详解基于Node.js的微信JS-SDK后端接口实现代码
- 微信js-sdk分享功能接口常用逻辑封装示例
- 微信JS-SDK分享功能的.Net实现代码
- php版微信js-sdk支付接口类用法示例
- ASP.NET MVC 微信JS-SDK认证
- 微信开发 JS-SDK 6.0.2 经常遇到问题总结
- 微信js-sdk+JAVA实现“分享到朋友圈”和“发送给朋友”功能详解
- 使用微信的 JS SDK 选取手机照片并进行上传,Iphone无法显示缩略图
- 微信JS-SDK选取手机照片上传并下载保存至自己的服务器
- 微信JS-SDK加载验证流程和手机图片上传
- 微信JS-SDK上传照片到本地服务器 解析与实例
- 微信服务号开发之jssdk-照片上传、下载 总结
- 微信公众号开发《四》使用微信JS-SDK实现手机图片上传,支持压缩、预览。并下载图片到自身服务器
- 微信JS-SDK加载验证流程和手机图片上传
- 微信JS-SDK]微信公众号JS开发之卡券领取功能详解
- 微信JS-SDK分享功能开发实例
- 微信JS-SDK实现自定义分享功能,分享给朋友,分享到QQ,分享到微博
- 微信开发--微信JS-SDK扫一扫功能
- 微信JS-SDK实现自定义分享功能,分享给朋友,分享到朋友圈
- 微信js_sdk的分享功能的问题
- 夺命雷公狗---微信开发56----微信js-sdk接口开发(3)所有接口功能
- 如何使用微信JS-SDK实际分享功能
- 微信开发--微信JS-SDK扫一扫功能
- thinkphp微信开发之jssdk图片上传并下载到本地服务器
- 利用微信js-sdk上传图片,在安卓下无反应,在ios下报miss miss argument的错
- ThinkPHP微信开发实例——JSSDK图像接口上传下载并将图片流写入本地