Informationen zur Funktion des WeChat JS-SDK zum Auswählen von Foto-Uploads für Mobiltelefone

In diesem Artikel wird hauptsächlich die WeChat JS-SDK-Funktion zum Auswählen von Mobiltelefonfotos zum Hochladen vorgestellt. Sie hat einen gewissen Referenzwert.

Wenn Sie auf die Notwendigkeit stoßen, Fotos auszuwählen Da die Webseite im WeChat-Browser ausgeführt wird, wird für die Projektentwicklung die von WeChats js-sdk bereitgestellte Fotoauswahlfunktion verwendet. WeChat-Webentwicklertools müssen in der tatsächlichen Entwicklung verwendet werden. Detaillierter Referenzlink: https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html.

1. Konfigurieren Sie WeChat JS-SDK-bezogene Dateien

1), JSSDk verwendet die neueste Version 1.2.0: https://res.wx.qq.com /open/js/jweixin-1.2.0.js.

Probleme bei der Anpassung der iOS-Webentwicklung:

Änderung: JSSDK-Versionen unter 1.2.0 unterstützen nicht mehr localld, das durch die API „selectImage“ zurückgegeben wird, wie zum Beispiel: „img src=wxLocalResource: / /50114659201332“, um eine Vorschau des Bildes anzuzeigen.

Anpassungsvorschlag: Aktualisieren Sie das JSSDK direkt auf die neueste Version 1.2.0, um die automatische Anpassung der Seite zu unterstützen. In einigen Fällen ist dies jedoch möglicherweise nicht effektiv. In diesem Fall können Sie die getLocalImgData-Schnittstelle zum direkten Abrufen verwenden die Daten.

(detaillierter Code beigefügt)

2), jsapiSign.js-Datei:

/**
 * 使用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 Implementierungsprozess

1), Fotos auswählen

Hier verwenden wir die Methode ChooseImage von WeChat js-sdk, um die ID des lokal gespeicherten Fotos abzurufen, was sehr einfach ist:

2) Fotodaten abrufen

Laut der offiziellen Entwicklungsdokumentation kann die erhaltene localId direkt als src-Attribut des img-Elements angezeigt werden

3). 🎜>

Hier verwenden Sie die uploadImage-Methode von WeChat js-sdk

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-Webentwicklungsanpassung

JSAPI-bezogene Anpassungen

1), Cache wird nicht mehr unterstützt

Änderungen: Cache-JSAPI wird in WKWebview nicht unterstützt.

Anpassungsvorschlag: Alle Entwickler, die diese API verwenden, können seitenbezogene Logik entfernen.

2), die Seite zeigt eine Vorschau des Bildes über LocalID an

Änderung: JSSDK-Versionen unter 1.2.0 unterstützen nicht mehr localld, das durch die Verwendung der ChooseImage-API zurückgegeben wird, wie zum Beispiel: „img src=wxLocalResource: // 50114659201332“, um eine Vorschau des Bildes anzuzeigen.

Anpassungsvorschlag: Aktualisieren Sie das JSSDK direkt auf die neueste Version 1.2.0, um die automatische Anpassung der Seite zu unterstützen. In einigen Fällen ist dies jedoch möglicherweise nicht effektiv. In diesem Fall können Sie die getLocalImgData-Schnittstelle zum direkten Abrufen verwenden die Daten.

(Die aktuellen Online-Versionen von JSSDk sind 1.0.0 und 1.1.0, und die aktualisierte Version ist 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. Wenn Sie JSSDK verwenden und wx.config für die Berechtigungsautorisierung verwenden, müssen Sie auf den Fehler achten von jsapi call

Änderungen: Die internen Implementierungsänderungen von WKWebview haben dazu geführt, dass wir bestimmte logische Anpassungen an der jsapi-Berechtigungsverwaltung der Seite in WeChat vorgenommen haben. Es besteht eine sehr geringe Möglichkeit, dass die zuvor autorisierte jsapi erhält normalerweise keine Berechtigungen, was dazu führt, dass der Aufruf von jsapi fehlschlägt.

Anpassungsvorschläge:

1. iOS WeChat 6.5.1, WKWebview weist in dieser Version bekanntermaßen folgende Probleme auf: Die Seite verwendet HTML5-History-API pushState; wegen fehlender Erlaubnis. Wenn möglich, kann die Anchor-Hash-Technologie verwendet werden, um die History-Technologie auf der Seite in 6.5.1 zu ersetzen und dieses Problem zu lösen.

2. iOS WeChat 6.5.2 und spätere Versionen werden die oben genannten Probleme nicht haben, aber es kann nicht 100 % bestätigt werden, dass Seiten, die Verlauf oder Hash-Technologie verwenden, um die Seitennavigationsadresse zu ändern, nicht solche Probleme haben Dennoch müssen Entwickler auf solche Probleme achten.

Dieser Artikel wurde in „Zusammenfassung der JavaScript-WeChat-Entwicklungsfähigkeiten“ zusammengestellt.

Ich möchte ein WeChat-Miniprogramm-Tutorial empfehlen, das derzeit viel Aufmerksamkeit erregt: „WeChat-Miniprogramm-Entwicklungs-Tutorial“, das der Herausgeber sorgfältig für Sie zusammengestellt hat.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Asynchrone Benachrichtigungs- und Verifizierungsauftragsmethode zum Aufrufen des SDK nach der Zahlung im WeChat-Miniprogramm

WeChat Network Anfragen in Miniprogrammen (Anfragen posten und Anfragen erhalten)

Das obige ist der detaillierte Inhalt vonInformationen zur Funktion des WeChat JS-SDK zum Auswählen von Foto-Uploads für Mobiltelefone. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!