欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-20 11:29:32
项目中遇到需要选取照片上传的需求,因为网页运行在微信的浏览器里面,所以用微信的 js-sdk 提供的选取照片功能,来进行项目开发。实际开发中需要用到微信web开发者工具,详...

项目中遇到需要选取照片上传的需求,因为网页运行在微信的浏览器里面,所以用微信的 js-sdk 提供的选取照片功能,来进行项目开发。实际开发中需要用到微信web开发者工具,详细参考链接:。

1.配置微信js-sdk相关文件

1)、jssdk使用最新的1.2.0版本:。

  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 ,  )

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微信开发技巧汇总》,欢迎大家学习阅读。

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

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