项目中遇到需要选取照片上传的需求,因为网页运行在微信的浏览器里面,所以用微信的 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 微信开发技巧汇总》,欢迎大家学习阅读。
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
来源: http://www.jb51.net/article/111781.htm