微信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 相关文章推荐
jQuery的slideToggle方法实例
May 07 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
vue多个元素的样式选择器问题
Nov 29 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实现将GB编码转换为UTF8
2006/11/25 PHP
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
PHP入门学习笔记之一
2010/10/12 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
php中引用符号(&)的使用详细介绍
2016/12/06 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
YUI的Tab切换实现代码
2010/04/11 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python删除windows垃圾文件的方法
2015/07/14 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
社团活动总结怎么写
2014/06/30 职场文书
相亲活动方案
2014/08/26 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
出国留学自荐信模板
2015/03/06 职场文书
Python 语言实现六大查找算法
2021/06/30 Python