ミニ プログラム自体が提供するミニ プログラム Web ビューを使用する
最初のステップ: まず、ミニ プログラムと組み込み h5 間の通信チャネルを開きます。
ミニプログラムパート
<web-view id="起个自己的定义的名字" :src="`${h5Url}`" @message="通信的方法"></web-view>
import 'dingtalk-jsapi/entry/mobile';
export default {
data() {
return {
h5Url: '替换为实际的H5页面地址',
token: this.$store.state.userInfo.token,
webViewContext: ''
};
},
onLoad() {
this.webViewContext = dd.createWebViewContext('起个自己的定义的名字')
},
methods: {
test(e) {
//接收来自网页的信息和传递信息的作用
this.webViewContext.postMessage({
token: this.token
// 携带token
})
console.log('内嵌网页传到小程序',e);
},
},
};
Webページ部分js
ここでは、コードの一部のみを参考のために記載します。
let token = ''; //上传时设置的文件头token
dd.onMessage = function(e) {
//接收小程序传过来的token
console.log('接收消息',e)
token = e.token
}
let mess = '文件上传后想给小程序的信息';
my.postMessage({
message: mess;
})
//文件提交格式力推 'Content-Type': 'multipart/form-data',
次のステップでは、フォームでファイルのアップロードを監視し、axios を使用してバックエンドをリクエストし、それを処理します。
ステップ 2: いくつかの落とし穴があり、主にさまざまなプラットフォームでの問題が発生します Android の使用には問題ありませんが、Apple には特別な落とし穴がいくつかあります。
1. Apple は埋め込み Web ページ (Web ビュー) に特別な制限を設けているようです。プロンプト ボックスなど、一部の JS 関数は無効です。今後上司からの回答を待ちます。
2. Apple による formData フォーム データの送信に問題があるため、埋め込み h5 の先頭に Android と ios の両方と互換性のある js をインポートする必要があります。
3. 以前は uniapp 開発を選択しましたが、uni.onMessage と uni.postMessage メソッドが iOS では使用できないことを考慮していなかったので、埋め込みビューの開発では、DingTalk ミニ プログラムだけでなく、どのプラットフォームに対応していますか? ミニ プログラムは、それが何であっても開始する必要があります。たとえば、Alipay には my を使用し、WeChat には wx を使用します。uni は使用しないでください。私はここにいます、一日のほとんどを騙され続けてきました。
録音して勉強を続けてください、さようなら!!!
ご質問がございましたら、コメント欄に残すか、私にプライベートメッセージを送っていただければ、可能な限りお答えします。