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

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

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

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

手順とコード：

1. ネットワークタイムアウト（app.json）を構(gòu)成：ネットワークリクエストタイムアウトをapp.jsonで構(gòu)成して、ネットワーク條件が良くない場合にリクエストをより適切に処理するように構(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'）;
      }、
      失?。篺unction（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 中國語 Web サイトの他の関連記事を參照してください。