微信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 相关文章推荐
js 浏览器事件介绍
Mar 30 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
详解Angular2响应式表单
Jun 14 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
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
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
深入解析Python中的上下文管理器
2016/06/28 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python中if有多个条件处理方法
2020/02/26 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
好军嫂事迹材料
2014/01/15 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
入党自荐书范文
2014/03/09 职场文书
电子专业自荐信
2014/07/01 职场文书
2014年教学工作总结
2014/11/13 职场文书
职代会闭幕词
2015/01/28 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
中标通知书格式
2015/04/17 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL