最近行ったプロジェクトはAngular6を使用して開発されました。フロントエンドとバックエンドを分離することでした。元々はバックエンドを実行していましたが、フロントエンドに引き込まれました。Angularを使用したことはありません。私は間違いなく開発プロセスでそれを行います。次々とピットに遭遇し、方法はありません。次々と解決することができます。
その中で、携帯電話のアルバムやカメラに電話をかけることもその1つであり、サードパーティのパートナーのjsが使用されています。あまり意味がなく、発生した問題を直接説明します。
1つは、Angularプロジェクトが外部JSファイルを導入する方法です。
実際、インターネット上にはこの問題に対する多くの解決策があります。主なことは、ファイルをassertディレクトリに配置し、angular.jsonに構成を追加することです。これについては、ここでは詳しく説明しません。
次に、外部jsによって提供されるメソッドを呼び出します。このクラスの変数は、コールバック関数で取得できません。
写真を選択した後、または写真を撮った後、コールバック関数は、base64でエンコードされたpic属性とファイル名fileName属性の値を持つpictureオブジェクトを返すため、base64エンコードをimgタグに渡す必要があります。コールバック。転送プロセス中に、imgにバインドされた値が常に空であることがわかりました。数回チェックした後、base64値もtsの変数に渡されます。ただし、出力される場合、値は空です。他の人に相談したところ、それがコールバックであることがわかりました。メソッドの理由、コールバックメソッドのthis。変数はtsにない可能性があり、メソッドはそれがコールバックの変数であると見なすため、最終的にbindメソッドは次のようになります。クラス内の変数を取得するためにメソッド本体の後ろに追加されました。コードは次のとおりです。
iPortal.getCamera().takePicture(function (picture) {
// 调用拍照功能
this.pictures.push(picture.pic);
// 将图片对象放入另一个数组 上传图片使用
this.pictBase64.push(picture);
// 及时更新图片数组，选择后显示在页面
this.zone.run(() => {
setTimeout(() => this.pictures = this.pictures, this.pictBase64 = this.pictBase64, 10);
// setTimeout(() => this.pictBase64 = this.pictBase64, 10);
});
}.bind(this),
function (err) {
this.toastTip(err);
}.bind(this),
1);3. IOSはbase64でエンコードされた画像を表示できますが、Androidは表示できません。
コールバックでバインド変数に値を割り当てることができた後、iPhoneは画像を表示できますが、Androidは画像を表示できないことがわかりました。長い間勉強した後、まだ問題は見つかりませんでした。最後に、2台の携帯電話のbase64コードしか印刷できません。違いを確認してください。確かに、Appleの電話に表示されるコードは非常にコンパクトで、スペースがありません。ただし、Androidについてはどうでしょうか。
改行やスペースがあるので、エンコーディングでこれらを取り除くことしかできず、現在のデバイスのタイプを区別する必要があります。それはAppleですか？またはアンドロイド
iPortal.getCamera().takePicture(function (picture) {
// 调用拍照功能
let u = navigator.userAgent;
// 当前设备信息
let device = '';
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
// 安卓手机
device = 'Android';
let codeArr = picture.pic;
// 图片不超过9张的情况下放入数组
this.pictures.push(codeArr.replace(/\s*/g, ''));
} else if (u.indexOf('iPhone') > -1) {
// 苹果手机
device = 'iPhone';
// 图片不超过9张的情况下放入数组
this.pictures.push(picture.pic);
}
// 将图片对象放入另一个数组 上传图片使用
this.pictBase64.push(picture);
// 及时更新图片数组，选择后显示在页面
this.zone.run(() => {
setTimeout(() => this.pictures = this.pictures, this.pictBase64 = this.pictBase64, 10);
// setTimeout(() => this.pictBase64 = this.pictBase64, 10);
});
}.bind(this),
function (err) {
this.toastTip(err);
}.bind(this),
1);codeArr.replace（/ \ s * / g、 ''）は、コード内のスペースと改行を削除します。
第四に、データの更新と強力な読み込み
写真を選択した後、imgタグは画像をすぐに表示できません。画像が表示される前に、別の空白スペースをクリックする必要があります。コードのこの段落は、この問題を解決します。
this.zone.run(() => {
setTimeout(() => this.pictures = this.pictures, this.pictBase64 = this.pictBase64, 10);
// setTimeout(() => this.pictBase64 = this.pictBase64, 10);
});遅延ロードを与え、問題を解決するために時間内に変数のデータを更新します。