全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[泉州专业seo优化公司]关于微信JS-SDK选取手机照片上传的功能

  这篇文章主要为大家详细介绍了微信JS-SDK选取手机照片上传功能…★□◁,具有一定的参考价值•▲△,感兴趣的小伙伴们可以参考一下

  项目中遇到需要选取照片上传的需求▲=,因为网页运行在微信的浏览器里面,所以用微信的 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 系统里面得到的数据,[泉州专业seo优化公司]类型为 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微信开发技巧汇总》,东方市小程序制作公司[郑州哪家seo公司好]关于微信小程序实现顶部选项卡(swiper)的介绍。欢迎大家学习阅读。

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

  以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网☆▷◁!

  相关推荐■▽◆□:

  微信小程序中支付后调用SDK的异步通知及验证处理订单方法
 

  微信小程序中的网络请求(post请求和get请求)

  

 

  以上就是关于微信JS-SDK选取手机照片上传的功能的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[泉州专业seo优化公司]关于微信JS-SDK选取手机照片上传的功能

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。