À propos de la fonction de sélection des téléchargements de photos sur téléphone mobile de WeChat JS-SDK

Cet article présente principalement en détail la fonction WeChat JS-SDK de sélection des photos de téléphone portable à télécharger. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

si vous rencontrez le besoin de sélectionner des photos dans le. projet. Pour les exigences de téléchargement, étant donné que la page Web s'exécute dans le navigateur de WeChat, la fonction de sélection de photos fournie par le js-sdk de WeChat est utilisée pour le développement du projet. Les outils de développement Web WeChat doivent être utilisés dans le développement réel. Lien de référence détaillé : https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html.

1. Configurez les fichiers liés à WeChat JS-SDK

1), JSSDk utilise la dernière version 1.2.0 : https://res.wx.qq.com /open/js/jweixin-1.2.0.js.

Problèmes d'adaptation du développement Web iOS :

Changement : les versions JSSDK inférieures à 1.2.0 ne prennent plus en charge localld renvoyé en utilisant l'API ChooseImage, tel que : "img src=wxLocalResource : / /50114659201332" pour prévisualiser l'image.

Suggestion d'adaptation : mettez directement à niveau le JSSDK vers la dernière version 1.2.0 pour aider la page à s'adapter automatiquement, mais cela peut ne pas être efficace dans certains scénarios. Dans ce cas, vous pouvez utiliser l'interface getLocalImgData pour obtenir directement. les données.

(Code détaillé ci-joint)

2), fichier 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 . Processus d'implémentation spécifique

1), sélectionner les photos

Ici, nous utilisons la méthode ChooseImage de WeChat js-sdk pour obtenir l'identifiant de la photo stockée localement, ce qui est très simple :

2), obtenir des données photo

Selon les documents de développement officiels de WeChat, le localId obtenu peut être directement affiché comme l'attribut src de l'élément img

3), télécharger photos

La méthode uploadImage de WeChat js-sdk est utilisée ici

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. 🎜>

Adaptation liée à JSAPI

1), le cache ne sera plus pris en charge

Changement : le cache jsapi ne sera pas pris en charge dans WKWebview.

Suggestion d'adaptation : tous les développeurs utilisant cette API peuvent supprimer la logique liée à la page.

2), la page prévisualise l'image via LocalID

Modification : les versions JSSDK inférieures à 1.2.0 ne prennent plus en charge localld renvoyé en utilisant l'API ChooseImage, telle que : "img src=wxLocalResource : // 50114659201332" pour prévisualiser l'image.

Suggestion d'adaptation : mettez directement à niveau le JSSDK vers la dernière version 1.2.0 pour aider la page à s'adapter automatiquement, mais cela peut ne pas être efficace dans certains scénarios. Dans ce cas, vous pouvez utiliser l'interface getLocalImgData pour obtenir directement. les données.

(Les versions en ligne actuelles de JSSDk sont 1.0.0 et 1.1.0, et la version mise à jour est 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 Si vous utilisez JSSDK et utilisez wx.config pour l'autorisation, vous devez faire attention à l'échec de l'appel jsapi

Changements : Les changements d'implémentation internes de WKWebview nous ont amenés à apporter certains ajustements logiques à la gestion des autorisations jsapi de la page dans WeChat. Il y a une très petite possibilité que ce soit auparavant. jsapi autorisé n'obtiendra pas les autorisations normalement, ce qui entraînera l'échec de l'appel de jsapi.

Suggestions d'adaptation :

1. iOS WeChat 6.5.1, WKWebview est connu pour avoir les problèmes suivants dans cette version : la page utilise API d'historique HTML5 pushState ; popstate ; replaceState et autres navigations dans les pages de contrôle (généralement, comme une seule page d'application), et utilisez le wx.config de JSSDK pour autoriser jsapi. À l'heure actuelle, il existe une forte probabilité que jsapi ne parvienne pas à appeler. faute d'autorisation. Si possible, la technologie de hachage Anchor peut être utilisée pour remplacer la technologie History sur la page 6.5.1 pour résoudre ce problème.

2. iOS WeChat 6.5.2 et les versions ultérieures n'auront pas les problèmes ci-dessus, mais il ne peut pas être confirmé à 100 % que les pages qui utilisent l'historique ou la technologie de hachage pour modifier l'adresse de navigation des pages n'auront pas de tels problèmes à Pourtant, les développeurs doivent prêter attention à ces problèmes.

Cet article a été compilé dans le « Résumé des compétences de développement JavaScript WeChat ». Tout le monde est invité à apprendre et à lire.

Je voudrais recommander un didacticiel de mini-programme WeChat qui retient beaucoup d'attention en ce moment : "Tutoriel de développement de mini-programme WeChat" que l'éditeur a soigneusement compilé pour vous. J'espère qu'il vous plaira.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Méthode de notification asynchrone et de commande de vérification pour appeler le SDK après paiement dans le mini-programme WeChat

WeChat Network requêtes dans les mini programmes (poster des requêtes et obtenir des requêtes)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!