微信JS-SDK选取手机照片上传功能


Posted in Javascript onApril 21, 2017

项目中遇到需要选取照片上传的需求,因为网页运行在微信的浏览器里面,所以用微信的 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微信开发技巧汇总》,欢迎大家学习阅读。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
javascript 防止刷新,后退,关闭
Aug 07 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
有关Promises异步问题详解
Nov 13 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 #Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 #Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 #jQuery
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 #Javascript
H5图片压缩与上传实例
Apr 21 #Javascript
H5手机端多文件上传预览插件
Apr 21 #Javascript
ES6新特性八:async函数用法实例详解
Apr 21 #Javascript
You might like
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
JS实现两个大数(整数)相乘
2014/04/28 Javascript
js实现右键菜单功能
2016/11/28 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
JavaScript 异步时序问题
2020/11/20 Javascript
推荐下python/ironpython:从入门到精通
2007/10/02 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Python实现代码块儿折叠
2020/04/15 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
幼师自荐信范文
2013/10/06 职场文书
教师党员思想汇报
2014/01/06 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
文明市民先进事迹
2014/05/15 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
大学生毕业个人总结
2015/02/15 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
Python List remove()实例用法详解
2021/08/02 Python