bob体育官方平台
微信JS-SDK选取手机照片上传功能,js-sdk选取照片上传

后天做的贰个类型刚刚用到Wechatjs-sdk的图纸上传接口,在这间做一下计算。

WechatJS-SDK选择手提式有线电话机照片上传成效,js-sdk选用照片上传

项目中相遇必要接收照片上传的须求,因为网页运转在Wechat的浏览器里面,所以用Wechat的 js-sdk 提供的取舍照片效果,来张开项目开垦。实际开支中须要利用Wechatweb开采者工具,详细参照他事他说加以考查链接:

1.安插WechatJS-SDK相关文书

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

  ios网页开辟适配难点:

  变化:1.2.0之下版本的JSSDK不再支持通过运用chooseImage api再次来到的localld以如:"img src=wxLocalResource://50114659二〇一二32”的方法预览图片。

  适配提出:间接将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)、获取照片数量

听大人说Wechat的官方开荒文书档案,获得的 localId 能够平昔作为 img 成分的 src 属性举办展示

3)、照片上传

那边运用Wechat 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://50114659贰零壹贰32”的主意预览图片。

适配建议:直接将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的中间贯彻转移使大家对Wechat内的页面jsapi权限管理做了断定逻辑上的调治,有超级小莫不会生出原先授权不奇怪的jsapi获取权力不正规,进而变成调用jsapi失利。

适配建议:

1. iOSWechat6.5.1,WKWebview在那版本中已知有以下难题:页面使用HTML5的History API pushState; popstate;      replaceState等调整页面导航(规范的如单运用页面),同临时间使用JSSDK的wx.config为jsapi授权,那时大概率会现身jsapi因为无权力而调用退步的标题。 在6.5.1中页面若或然的场馆下,可选拔Anchor hash能力替换History本事来消弭此主题素材。

  1. iOSWechat6.5.2及其之后版本,将不会存在以上难题,但不能够100%承认有接收到 history或hash能力退换页面导航地址的页面完全未有此类难题,依然亟待开采者注意关切此类主题材料。

正文已被收拾到了《JavaScriptWechat支付技巧汇总》,迎接我们学习阅读。

为大家推荐今后关心度比较高的Wechat小程序教程意气风发篇:《Wechat小程序支付教程》我为大家留神收拾的,希望中意。

如上正是本文的全体内容,希望对大家的读书抱有利于,也意在我们多多照望帮客之家。

项目中相遇需求选用照片上传的急需,因为网页运营在Wechat的浏览器里面,所以用Wechat...

在此能知晓使用js api的为主配备

t=resource/res_main&id=mp1421141115&token=&lang=zh_CN

本人那边未有用checkJsApi去看清当前客商端版本是不是扶持钦定JS接口,好。通过看支出文书档案,大家领略调用js接口直接都要透过config接口注入权限验证配置

wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名,见附录1 jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2});

收获config里面参数的代码如下,笔者那边只用到chooseImage和uploadImage接口,chooseImage接口是摄影或从手机相册中选图接口,uploadImage接口是用来上传图片,所以jsApiList里面只写这五个就可以了

import java.util.UUID;import java.util.Map;import java.util.HashMap;import java.util.Formatter;import java.security.MessageDigest;import java.security.NoSuchAlgorithmException;import java.io.UnsupportedEncodingException; public class WxConfig { public static void main { String jsapi_ticket = "jsapi_ticket"; // 注意 URL 一定要动态获取,不能 hardcode String url = "http://example.com"; Map ret = sign; for (Map.Entry entry : ret.entrySet { System.out.println + ", " + entry.getValue; } }; public static Map sign(String jsapi_ticket, String url) { Map ret = new HashMap(); String nonce_str = create_nonce_str(); String timestamp = create_timestamp(); String string1; String signature = ""; //注意这里参数名必须全部小写,且必须有序 string1 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonce_str + "×tamp=" + timestamp + "&url=" + url; System.out.println; try { MessageDigest crypt = MessageDigest.getInstance; crypt.reset(); crypt.update(string1.getBytes; signature = byteToHex; } catch (NoSuchAlgorithmException e) { e.printStackTrace(); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } ret.put; ret.put("jsapi_ticket", jsapi_ticket); ret.put("nonceStr", nonce_str); ret.put("timestamp", timestamp); ret.put("signature", signature); return ret; } private static String byteToHex { Formatter formatter = new Formatter(); for  { formatter.format; } String result = formatter.toString; return result; } private static String create_nonce_str() { return UUID.randomUUID; } private static String create_timestamp() { return Long.toString(System.currentTimeMillis; }}

ticket能够经过accessToken获取,代码如下

public static String getTicket throws ParseException, IOException { public final static String sign_ticket_create_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi"; JSONObject jsonObject = new JSONObject(); JSONObject postjson=new JSONObject(); String ticket =null; String url = sign_ticket_create_url.replace("ACCESS_TOKEN",accessToken); System.out.print; String ticketurl =""; try { jsonObject = WeixinUtil.httpsRequest(url, "POST",postjson.toString; ticket= jsonObject.getString; System.out.println; }catch  { e.printStackTrace(); } return ticket; };
返回顶部