微信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语言本身谈项目实战
Dec 27 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
详解如何在vue-cli中使用vuex
Aug 07 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
使用PHP开发留言板功能
2019/11/19 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
JS作用域链详解
2017/06/26 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
如何利用find命令查找文件
2015/02/07 面试题
管理失职检讨书
2014/02/12 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
护士个人自我鉴定
2014/03/24 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书