WeChat JS-SDKのアップロードする携帯写真選択機能について

この記事では、主に携帯電話の写真アップロード機能を選択するための WeChat JS-SDK を詳しく紹介します。興味のある友人は参考にしてください。

プロジェクトでは、Web ページであるため、写真のアップロードを選択する必要があります。 WeChatのブラウザ上で動作するため、プロジェクト開発にはWeChatのjs-sdkが提供する写真選択機能が利用されます。実際の開発では WeChat Web 開発者ツールを使用する必要があります。詳細な参照リンク: 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 Web 開発適応の問題:

変更: 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)、写真を選択

ここでは 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 Web開発適応

JSAPI関連適応

1)、キャッシュサポートされなくなります

変更: WKWebview では、Lieutenant General はキャッシュ 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 系统里面得到的数据，类型为 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 には、このバージョンで次の問題があることが知られています。シングルアプリケーションページ) を使用し、JSSDK の wx.config を使用して jsapi を認可します。 このとき、権限がないために jsapi の呼び出しに失敗する可能性が高くなります。 可能であれば、アンカー ハッシュ テクノロジを使用して 6.5.1 のページの履歴テクノロジを置き換えて、この問題を解決できます。

2. iOS WeChat 6.5.2 以降のバージョンでは上記の問題は発生しませんが、履歴またはハッシュ技術を使用してページ ナビゲーション アドレスを変更するページにそのような問題がまったく発生しないことを 100% 確認することはできません。引き続き注意が必要です。

この記事は「JavaScript WeChat 開発スキルのまとめ」としてまとめられており、どなたでも学習して読むことができます。

今注目を集めているWeChatミニプログラムチュートリアルをおすすめしたいと思います。編集者が丁寧にまとめた「WeChatミニプログラム開発チュートリアル」を気に入っていただければ幸いです。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

WeChat アプレットでの支払い後に SDK の非同期通知と検証注文メソッドを呼び出す

WeChat アプレットでのネットワーク リクエスト (post リクエストと get リクエスト)

以上がWeChat JS-SDKのアップロードする携帯写真選択機能についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。