目次
2. Wechat アプレットは、リソースをダウンロードする機能の実現において H5 とは大きく異なります。
3. WeChat アプレットは、ファイル (写真ではなくドキュメント、PDF など) をダウンロードする機能を実装します (ダウンロード -> 保存 -> プレビュー)
4. 画像のプレビュー、保存、転送、お気に入り: uni.previewImage()
5. 現在、「ファイル プレビュー uni.openDocument() について」API で問題が発生しています。コメント エリアで議論してください。
1. H5でのダウンロード機能の実装方法
1. はい、ブラウザ ページでリソースのダウンロードを実装するのは非常に簡単です。<a href="#"></a> のレイヤーでリソースを囲み、その中にリンクを追加するだけで完了です。
2. Wechat アプレットは、リソースをダウンロードする機能の実現において H5 とは大きく異なります。
1. uni-appでリソースをダウンロードし始めた当初は、PC側と同じでタグを付けるだけだと単純に思っていました。
ただし、WeChat 開発者ツールでパッケージ化してコンパイルすると、a タグがナビゲーター タグにパッケージ化されてコンパイルされるため、エラーが報告されます。このコンポーネントは HTML のコンポーネントに似ています
<a>が、ローカル ページにのみジャンプできます。対象のページはpages.jsonに登録する必要があります。
2. タグを付けて Google Chrome で実行し、クリックしてダウンロードします。
3. 同じコードが WeChat 開発者ツールで実行されますが、リンクがローカル ページではなく、リモート サービスによって取得された画像リンクであるため、コードが変更され、エラーが報告されます。
3. WeChat アプレットは、ファイル (写真ではなくドキュメント、PDF など) をダウンロードする機能を実装します (ダウンロード -> 保存 -> プレビュー)
1. ダウンロード (キャッシュ、一時ファイルであり、保存されません): uni.downloadFile()
2. ローカルに保存します (ダウンロード後に自動的に保存されます): uni.getFileSystemManager().saveFile()
3. ファイルをプレビューします (プレビュー後、手動で保存することを選択できます): uni.openDocument()
1. uni.downloadFile() は一時ファイルに保存されます
この API によってダウンロードされたファイルは一時フォルダーに保存され、手動で削除しないとしばらくすると削除されます。WeChat 開発者ツールを例に挙げると、ダウンロードされたファイルは次の場所に保存されます。
......\WeChat 開発者ツール\ユーザー データ\59e9af1112483f5e41772e86ada7c016\WeappSimulator\WeappFileSystem\o6zAJszSPKIKNM8ZZHjQ_ay2z8pg\wx0fbdc7498b76fad7\tmp
tmp ファイルは、一時ファイルを保存するための特別な場所です。
したがって、長期保存のニーズを満たすには他の方法が必要です。
2.一時ファイルのプレビューと長期保存ファイルのプレビュー
uni.downloadFile()+uni.openDocument() - 一時ファイルの下のファイルをプレビューします (tmp フォルダーにのみ保存されます)。
uni.downloadFile()+uni.getFileSystemManager().saveFile()+uni.openDocument()
—— 長期ファイル (ストア フォルダーにのみ保存) の下のファイルをプレビューします。
3.コード例
download(file) {
uni.showLoading({
title: '下载中'
});
//下载文件
uni.downloadFile({ //只能是GET请求
url: file, //请求地址(后台返回的码流地址)
success: (res) => {
//下载成功
if (res.statusCode === 200) {
//保存文件
let tempFile = res.tempFilePath;
//保存成功之后 打开文件
uni.getFileSystemManager().saveFile({
tempFilePath: tempFile,
// filePath: wx.env.USER_DATA_PATH + '/' + '上传成员.pdf',//自定义文件名
success(res) {
console.log(res)
uni.openDocument({
filePath: res.savedFilePath,
showMenu: true, //是否可以分享
success: (res) => {
uni.hideLoading()
console.log(res);
},
fail: (e) => {
uni.showToast({
title: '打开失败',
icon: "error"
})
}
})
}
})
}
},
fail: (e) => {
console.log(e, '文件下载失败')
uni.showToast({
title: '文件下载失败',
icon: "error",
})
}
});
}4. 画像のプレビュー、保存、転送、お気に入り: uni.previewImage()
1. 同様に、PC 側のブラウザ デバッグのプロセスでは、a タグを通じて画像のプレビューとダウンロードを実現できますが、WeChat アプレットはまったく異なり、より複雑です。
2. コード例。urls 属性のタイプは配列であり、画像リンクが配置されることに注意してください。
methods: {
pictureReview(arr) {
uni.previewImage({
urls: [arr],
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
console.log(err.errMsg);
}
}
});
}
}5. 現在、「ファイル プレビュー uni.openDocument() について」API で問題が発生しています。コメント エリアで議論してください。
コードはWeChat開発者ツールにパッケージ化されコンパイルされており、調整が可能であり、携帯電話(ios/Android)の実機デバッグでも調整可能ですが、PC側のWeChatアプレットを実機でデバッグする場合は、 、保存はできますが、プレビューが失敗します。ずっと原因を探していたのですが失敗したのですが、原因がわかる方いらっしゃいますか？