WeChat JS-SDK의 휴대폰 사진 업로드 선택 기능에 대해

이 글에서는 주로 휴대폰 사진 업로드 기능을 선택하기 위한 WeChat JS-SDK를 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

프로젝트에서는 웹페이지에서 사진 업로드를 선택해야 합니다. 위챗의 브라우저에서 실행되기 때문에 위챗의 js-sdk에서 제공하는 사진 선택 기능을 프로젝트 개발에 사용합니다. 실제 개발에는 WeChat 웹 개발자 도구를 사용해야 합니다. 자세한 참조 링크: https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html.

1. WeChat JS-SDK 관련 파일 구성

1) JSSDk는 최신 1.2.0 버전을 사용합니다: https://res.wx.qq.com/open/js/jweixin-1.2.0.js .

　ios 웹 페이지 개발 적응 문제:

　변경: 1.2.0 이하 JSSDK 버전은 "img src=wxLocalResource://50114659201332"와 같이 chooseImage API에서 반환된 localld를 사용하여 이미지 미리보기를 더 이상 지원하지 않습니다.

　적응 제안: 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), 사진 선택

여기서는 WeChat js의 chooseImage 메소드를 사용합니다. SDK를 사용하면 로컬에 저장된 사진의 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), 캐시는 없음 더 이상 지원되지 않습니다

Change: WKWebview에서 중장은 아직 캐시 jsapi를 지원하지 않습니다.

적응 제안: 이 API를 사용하는 모든 개발자는 페이지 관련 로직을 제거할 수 있습니다.

2), 페이지는 LocalID를 통해 이미지를 미리 봅니다.

변경: JSSDK 버전 1.2.0 미만에서는 "img src=wxLocalResource://50114659201332"와 같이 chooseImage API에서 반환된 localld를 사용하여 이미지 미리 보기를 더 이상 지원하지 않습니다.

적응 제안: 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("显示失败");
 }
 });
}

3. JSSDK를 사용하고 권한 승인을 위해 wx.config를 사용하는 경우 jsapi 호출 실패에 주의해야 합니다.

변경 사항: WKWebview의 내부 구현 변경으로 인해 다음이 가능해졌습니다. WeChat 페이지의 jsapi 권한 관리 변경 특정 논리적 조정으로 인해 이전에 정상적으로 승인된 jsapi가 정상적으로 권한을 얻지 못해 jsapi 호출에 실패할 가능성이 매우 적습니다.

적응 제안:

1. iOS WeChat 6.5.1, WKWebview는 이 버전에서 다음과 같은 문제가 있는 것으로 알려져 있습니다. 페이지는 페이지 탐색을 제어하기 위해 HTML5의 History API pushState를 사용합니다. 단일 애플리케이션 페이지), JSSDK의 wx.config를 사용하여 jsapi를 승인합니다. 이때 권한 부족으로 인해 jsapi 호출에 실패할 확률이 높습니다. 가능하다면 6.5.1 페이지의 History 기술을 대체하여 Anchor hash 기술을 사용하여 이 문제를 해결할 수 있습니다.

2. iOS WeChat 6.5.2 이상 버전에서는 위의 문제가 발생하지 않으나 페이지 탐색 주소를 변경하기 위해 기록이나 해시 기술을 사용하는 페이지에는 전혀 문제가 발생하지 않을 것이라고 100% 확신할 수 없으며, 개발자는 여전히 주의가 필요합니다. 이러한 문제에 주의를 기울이십시오.

이 기사는 "JavaScript WeChat 개발 기술 요약"으로 편집되었습니다. 누구나 배우고 읽을 수 있습니다.

지금 많은 주목을 받고 있는 위챗 미니 프로그램 튜토리얼을 추천하고 싶습니다. 편집자가 정성껏 정리한 "위챗 미니 프로그램 개발 튜토리얼"이 마음에 드셨으면 좋겠습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

WeChat 애플릿에서 결제 후 SDK의 비동기 알림 및 확인 주문 방법을 호출

WeChat 애플릿에서 네트워크 요청(요청 게시 및 요청 받기)

위 내용은 WeChat JS-SDK의 휴대폰 사진 업로드 선택 기능에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!