WeChat Applet Offline Borang Penyerahan: Bagaimana untuk menyimpan dan menyerahkan data pengguna walaupun tanpa rangkaian?

WeChat Applet Offline Borang: Data boleh dikemukakan tanpa rangkaian

Ramai pemaju berharap program mini dapat memberikan pengalaman pengguna yang baik walaupun di luar talian atau rangkaian yang lemah. Artikel ini akan memperkenalkan secara terperinci bagaimana untuk melaksanakan fungsi penyerahan borang luar talian dalam applet WeChat, dan dilengkapi dengan contoh kod.

Keperluan: Buat applet WeChat yang mengandungi borang. Walaupun tanpa rangkaian atau ketidakstabilan rangkaian, pengguna boleh mengisi borang, menyimpan data secara tempatan, dan menyerahkannya secara automatik selepas rangkaian dipulihkan.

Kaedah Pelaksanaan: Applet WeChat itu sendiri tidak menyokong fungsi luar talian sepenuhnya, tetapi kami boleh menggabungkan wx.setStorageSync , wx.getStorageSync dan wx.onNetworkStatusChange untuk mensimulasikan fungsi luar talian.

Langkah dan Kod:

1. Konfigurasikan Timeout Network (App.json): Konfigurasikan masa tamat permintaan rangkaian di app.json untuk mengendalikan permintaan yang lebih baik apabila keadaan rangkaian tidak baik:

 {
  "Halaman": ["Halaman/Borang/Borang"],
  "tetingkap": {
    "Latar BelakangTextStyle": "Cahaya",
    "NavigasiBarBackgroundColor": "#fff",
    "NavigasiBartitLetext": "Borang Luar Talian",
    "NavigasiBartextStyle": "Hitam"
  },
  "NetworkTimeout": {
    "Permintaan": 10000,
    "muat turun": 10000
  },
  "Debug": Benar
}

2. Halaman Borang (Halaman/Borang/Form.wxml): (ditinggalkan di sini, buat borang mengikut keperluan sebenar)

3. Borang Logik (Halaman/Borang/Form.js): Fail ini bertanggungjawab untuk mengumpul data borang, penyimpanan tempatan dan pemeriksaan status rangkaian:

 Halaman ({
  Data: {
    FormData: {}
  },
  hantarform: fungsi (e) {
    const formData = e.detail.value;
    this.saveformData (formData);
    this.checkNetWorkandSubmit ();
  },
  SaveFormData: fungsi (formData) {
    wx.setStorageSync ('formdata', formData);
  },
  CheckNetWorkandSubmit: fungsi () {
    const itu = ini;
    wx.getNetworkType ({
      Kejayaan: Fungsi (res) {
        jika (res.networktype! == 'none') {
          that.submitformData ();
        } else {
          wx.showtoast ({title: 'net tidak tersedia, data disimpan', ikon: 'none'});
        }
      }
    });
  },
  hantarFormData: fungsi () {
    const formData = wx.getStorageSync ('formData');
    wx.request ({
      URL: 'Alamat antara muka pelayan anda',
      Kaedah: 'pos',
      Data: FormData,
      Kejayaan: Fungsi (res) {
        wx.showtoast ({title: 'hantar kejayaan', ikon: 'kejayaan'});
        wx.removestoragesync ('formdata');
      },
      gagal: fungsi (res) {
        wx.showtoast ({title: 'penyerahan gagal, sila cuba lagi', ikon: 'none'});
        // logik semula boleh ditambah di sini}
    });
  }
});

4. Rangkaian Status Mendengarkan (App.js): Dengar perubahan status rangkaian dalam app.js , dan cuba menyerahkan data yang disimpan secara tempatan apabila rangkaian dipulihkan:

 Aplikasi ({
  onlaunch: fungsi () {
    const itu = ini;
    wx.onnetworkStatusChange (fungsi (res) {
      jika (res.isconnected) {
        const formData = wx.getStorageSync ('formData');
        jika (formData) {
          that.submitformData (formData);
        }
      }
    });
  },
  hantarFormData: fungsi (formData) {
    // Sama seperti fungsi SubmitFormData dalam halaman/bentuk/form.js}
});

Ingatlah untuk menggantikan '你的服务器接口地址' dalam kod dengan alamat antara muka pelayan sebenar anda. Pemaju perlu meningkatkan pengendalian kesilapan dan mencuba mekanisme berdasarkan keadaan sebenar.

Atas ialah kandungan terperinci WeChat Applet Offline Borang Penyerahan: Bagaimana untuk menyimpan dan menyerahkan data pengguna walaupun tanpa rangkaian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!