H5 プロジェクトは WeChat 画像アップロード関連の SDK を使用しており、主に 1. Android 携帯電話ではアップロードする画像を一度に複数選択できない、2. IOS システムの携帯電話を制御してアップロードする画像を無制限に選択する問題を解決するために使用されます。一度
1.準備：公式アカウントの設定
- 必要な SDK が要件を満たしていることを確認する
使用シナリオでは、WeChat が提供する公式WeChat、またはEnterprise WeChat が提供する公式 WeChat SDKDemoリンクを開きます。該当するインターフェースデモを選択し、要件を満たしていれば後続開発が可能ですが、要件を満たしていない場合は別の方法を検討する必要があります。
2.WeChat公式アカウントを設定する
WeChat パブリック プラットフォームでは、管理者または長期オペレーターがコードをスキャンしてログインする必要があります。長期オペレーターの場合は、人事設定で構成できます。
(1) jsインターフェースセキュリティドメイン名を追加
公式アカウント設定で js インターフェイスのセキュリティ ドメイン名を構成し、設定ポップアップ ウィンドウでプロジェクト ドメイン名を追加し、ポップアップ ウィンドウでハイパーリンクされたファイルをダウンロードし、そのファイルをフロントエンド プロジェクト サーバーに配置します。プロジェクトが存在するフォルダーにそれを置きます。なお、JSインターフェースのセキュリティドメイン名には5つのドメイン名しか追加できず、編集も月に5回までしかできないため、運用には注意が必要です。
(2) IPホワイトリストの設定
開発者パスワード (AppSecret) このデータ バックグラウンドを使用する必要があります。開発者パスワードがわからない場合は、リセットして取得できます。
IP ホワイトリストのポップアップ ウィンドウにプロジェクトの IP アドレスを追加します。プロジェクトの IP がわからない場合は、jxjtyedu 公式アカウントのホワイトリストを参照してください。公式アカウントによって設定された IP ホワイトリストには、基本的にすべてのプロジェクトの IP が含まれます。会社。IP ホワイトリストの数とリビジョンの数は無制限ですが、IP を繰り返すことはできません。
2. フロントエンド開発
1. プラグインをインストールし、SDK ファイルを設定します
(1) WeChat SDKプラグインをインストールする
npm インストール weixin-js-sdk
(2) wxSdkファイルのパッケージ化
weChatSdk.ts ファイルを utils フォルダーに追加します。
「weixin-js-sdk」から wx をインポートします
「axios」から axios をインポートします。
import { globalurl } から "./global";
const env = import.meta.env;
アクション = '' にします
スイッチ (env.MODE) {
「開発」の場合:
アクション = globalurl.development;
壊す;
ケース「テスト」:
アクション = globalurl.test;
壊す;
ケース「本番」:
アクション = globalurl.production;
壊す;
}
const wxconfig = async () =>{
const url = encodeURIComponent(window.location.href.split('#')[0]);
axios.get(`${action}print/printCommon/getJsapiInit?url=${url}`).then((result) =>{ // 設定パラメータを取得するインターフェース
const {データ} = 結果.データ
wx.config({
debug: true, // デバッグ モードをオンにすると、すべての API 呼び出しの戻り値がクライアント アラートに表示されます。受信パラメーターを表示したい場合は、PC 側で開くことができ、パラメーター情報が表示されます。ログを通じて印刷されますが、PC 側でのみ印刷されます
アプリID: data.appId、
タイムスタンプ: data.timeStamp、
nonceStr: data.nonceStr、
署名: data.signature、
jsApiList:[ // 必須、使用する JS インターフェースのリスト
"画像を選択",
"getNetworkType",
"画像のアップロード",
"ダウンロード画像",
「ローカルイメージデータの取得」
】
})
})
}
デフォルトの wxconfig をエクスポートします。
WeChatアドレス上のすべてのjsインターフェースのリスト
(3) インジェクション許可検証設定
プロジェクトがハッシュ モードの場合、app.vue ファイルの weChatSdk.ts に wxconfig メソッドをインポートし、プロジェクトの任意のページで WeChat js インターフェイスを使用するためにマウント時に呼び出すだけで済みます。
プロジェクトが履歴モードの場合は、WeChat js インターフェイスを使用して呼び出しを行う必要があるページに wxconfig メソッドを導入することをお勧めします。
2. 画像をバッチでアップロードします (次のコードはまだテストされていません。使用しないでください。近い将来テストされ、テスト完了後に再度編集されます)
// 写真を選択して写真を撮る、または携帯電話のアルバムから写真を選択するためのインターフェイス
constchooseImg = (インデックス, タイプ) => {
wx.ready(() => {
wx.chooseImage({
count: 9, // 毎回のオプションの画像の数はデフォルトで 9 です
sizeType: ['original",], // オリジナル画像か圧縮画像かを指定でき、デフォルトは両方です
sourceType: ['album, Camera'], // ソースがアルバムであるかカメラであるかを指定できます。デフォルトでは両方とも使用可能です
成功: 関数 (res) {
let locaIds = res.localIds; // 選択した写真のローカル ID リストを返します。localId は画像を表示するための img の src 属性として使用できますが、IOS WKWebview は画像を直接表示するための localId をサポートしていません
// ローカル画像を取得する このインターフェイスは、IOS WKWebview でのみ提供されます。IOS との互換性のために、WKWebview は画像を直接表示するための localId をサポートしていません。
localIds.map(item => {
getLocalImg(アイテム)
})
}
})
})
}
// ローカルイメージを取得する
const getLocalImg = (localId) => {
wx.ready(() => {
wx.getLocalImgData({
localId: localId, // 画像のローカルID
成功: 関数 (res) [
let localData = res.localData; // localData は画像の Base64 データであり、img タグで表示できます
// 一部のブラウザで取得される戻り値は標準のbase64形式ではないため、取得した画像データにbase64ヘッダがあるかどうかを判定
if (localData.indexOf('data:image') != 0) {
// そのようなヘッダーがあるかどうかを判断します
localData = 'データ:画像/jpeg;base64,' + localData
}
localData = localData.replace(/\r/\n/g,).replace('data:image/jgp','data:image/jpeg')
// 最初の文字は改行文字を置き換え、2 番目の文字は画像タイプを置き換えます。これは、IOS マシンでテストする場合、画像タイプが jgp として認識され、他のデバイスとの互換性のためにそれを jpeg に変換するためです。
// 画像をbase64からバイナリに変換してアップロードします
handleUpload(convertFile(localData))
}
})
})
}
//base64からバイナリへ
const ConvertFile = Base64 => {
fileArray = Base64.split(',')、
// ファイルタイプをフィルタリングして除外します
fileType = fileArray[0].match(/:(.*?);/)[1],
//atob は Base-64 でエンコードされた文字列をデコードします
bstr = atob(fileArray[1]),
n = bstr.length、
//Uint8Array 配列型は 8 ビット符号なし整数配列を表します
u8arr = 新しい Uint8Array(n)
一方 (n--) {
// 文字列内の n 文字の Unicode エンコードを返します。
u8arr[n] = bstr.charCodeAt(n)
}
// 新しい Blob を返します([u8arr]，[ type: fileType 3)
return new File([u8arr], 'filename', { type: fileType })
}
// ファイルのアップロード
const handleUpload = async (ファイル) => {
// サーバーコードにアップロード
}