WeChat applet offline form submission: How to save and submit user data even without a network?

WeChat applet offline form: data can be submitted without a network

Many developers hope that mini programs can provide a good user experience even when offline or poor network. This article will introduce in detail how to implement offline form submission function in WeChat applets, and comes with code examples.

Requirements: Create a WeChat applet containing a form. Even in the absence of network or instability of the network, users can fill out the form, save the data locally, and submit it automatically after the network is restored.

Implementation method: The WeChat applet itself does not support fully offline functions, but we can combine wx.setStorageSync , wx.getStorageSync and wx.onNetworkStatusChange to simulate offline functions.

Steps and code:

1. Configure network timeout (app.json): Configure network request timeout in app.json to better handle requests when network conditions are not good:

 {
  "pages": ["pages/form/form"],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Offline form",
    "navigationBarTextStyle": "black"
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

2. Form page (pages/form/form.wxml): (Omitted here, create a form according to actual needs)

3. Form logic (pages/form/form.js): This file is responsible for collecting form data, local storage and network status checks:

 Page({
  data: {
    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({
      success: function(res) {
        if (res.networkType !== 'none') {
          that.submitFormData();
        } else {
          wx.showToast({ title: 'Net is not available, data is saved', icon: 'none' });
        }
      }
    });
  },
  submitFormData: function() {
    const formData = wx.getStorageSync('formData');
    wx.request({
      url: 'Your server interface address',
      method: 'POST',
      data: formData,
      success: function(res) {
        wx.showToast({ title: 'Submit successful', icon: 'success' });
        wx.removeStorageSync('formData');
      },
      fail: function(res) {
        wx.showToast({ title: 'Submission failed, please try again', icon: 'none' });
        // Retry logic can be added here}
    });
  }
});

4. Network status listening (app.js): Listen to network status changes in app.js , and try to submit locally stored data when the network is restored:

 App({
  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) {
    // Same as submitFormData function in pages/form/form.js}
});

Remember to replace '你的服务器接口地址' in the code with your actual server interface address. Developers need to improve error handling and retry mechanisms based on actual conditions.

The above is the detailed content of WeChat applet offline form submission: How to save and submit user data even without a network?. For more information, please follow other related articles on the PHP Chinese website!