wechatアプレットオフラインフォーム：データはネットワークなしで送信できます

多くの開発者は、ミニプログラムがオフラインまたは貧弱なネットワークであっても優(yōu)れたユーザーエクスペリエンスを提供できることを望んでいます。この記事では、WeChatアプレットにオフラインフォーム提出機(jī)能を?qū)g裝する方法を詳細(xì)に紹介し、コードの例が付屬しています。

要件：フォームを含むWeChatアプレットを作成します。ネットワークのネットワークや不安定性がない場(chǎng)合でも、ユーザーはフォームに記入し、データをローカルに保存し、ネットワークが復(fù)元された後に自動(dòng)的に送信できます。

実裝方法： WeChatアプレット自體は完全にオフライン機(jī)能をサポートしていませんが、 wx.setStorageSync 、 wx.getStorageSync 、およびwx.onNetworkStatusChangeを組み合わせて、オフライン機(jī)能をシミュレートできます。

手順とコード：

1. ネットワークタイムアウト（app.json）を構(gòu)成：ネットワークリクエストタイムアウトをapp.jsonで構(gòu)成して、ネットワーク條件が良くない場(chǎng)合にリクエストをより適切に処理するように構(gòu)成します。

 {
  「ページ」：[「ページ/フォーム/フォーム "]、
  「ウィンドウ」：{
    「BackgroundTextStyle」：「Light」、
    「navigationbarbackgroundcolor」：「#fff」、
    「NavigationBartitletext」：「オフラインフォーム」、
    「NavigationBartextStyle」：「Black」
  }、
  「NetworkTimeOut」：{
    「リクエスト」：10000、
    「ダウンロードファイル」：10000
  }、
  「デバッグ」：本當(dāng)です
}

2. フォームページ（ページ/フォーム/form.wxml）：（ここで省略して、実際のニーズに応じてフォームを作成します）

3. フォームロジック（Pages/Form/form.js）：このファイルは、フォームデータ、ローカルストレージ、ネットワークステータスチェックの収集を擔(dān)當(dāng)します。

ページ（{
  データ： {
    formdata：{}
  }、
  submitform：function（e）{
    const formdata = e.detail.value;
    this.saveformdata（formdata）;
    this.checknetworkandsubmit（）;
  }、
  saveformdata：function（formdata）{
    wx.setstoragesync（ 'formdata'、formdata）;
  }、
  checknetworkandsubmit：function（）{
    const that = this;
    wx.getnetworktype（{
      成功：function（res）{
        if（res.networktype！== 'none'）{
          that.submitformdata（）;
        } それ以外 {
          wx.showtoast（{title： 'ネットは利用できません、データは保存されていません」、アイコン：' none '}）;
        }
      }
    }）;
  }、
  submitformdata：function（）{
    const formdata = wx.getStoragesync（ 'formdata'）;
    wx.request（{
      URL：「サーバーインターフェイスアドレス」、
      方法：「投稿」、
      データ：FormData、
      成功：function（res）{
        wx.showtoast（{title： 'submit suctune'、icon： 'success'}）;
        wx.removestoragesync（ 'formdata'）;
      }、
      失敗：function（res）{
        wx.showtoast（{title： '提出失敗、再試行してください'、アイコン： 'none'}）;
        //ここにRETRYロジックを追加できます}
    }）;
  }
}）;

4. ネットワークステータスリスニング（app.js）： app.jsのネットワークステータスの変更を聞き、ネットワークが復(fù)元されたときにローカルに保存されたデータを送信してみてください。

アプリ（{
  onlaunch：function（）{
    const that = this;
    wx.onnetworkstatuschange（function（res）{
      if（res.isconnected）{
        const formdata = wx.getStoragesync（ 'formdata'）;
        if（formdata）{
          that.submitformdata（formdata）;
        }
      }
    }）;
  }、
  submitformdata：function（formdata）{
    // pages/form/form.jsのsubmitformdata関數(shù)と同じ}
}）;

コードの'你的服務(wù)器接口地址'実際のサーバーインターフェイスアドレスに置き換えることを忘れないでください。開発者は、実際の條件に基づいてエラー処理と再試行メカニズムを改善する必要があります。

以上がWechatアプレットオフラインフォームの提出：ネットワークがなくてもユーザーデータを保存および送信する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。