WeChat 애플릿 오프라인 양식 제출 : 네트워크 없이도 사용자 데이터를 저장하고 제출하는 방법은 무엇입니까?

wechat 애플릿 오프라인 양식 : 네트워크없이 데이터를 제출할 수 있습니다.

많은 개발자들은 미니 프로그램이 오프라인 또는 네트워크가 열악한 경우에도 우수한 사용자 경험을 제공 할 수 있기를 희망합니다. 이 기사는 WeChat 애플릿에서 오프라인 양식 제출 기능을 구현하는 방법을 자세히 소개하고 코드 예제가 제공됩니다.

요구 사항 : 양식이 포함 된 wechat 애플릿을 만듭니다. 네트워크가 없거나 네트워크의 불안정성이 없더라도 사용자는 양식을 작성하고 로컬로 데이터를 저장 한 후 네트워크가 복원 된 후 자동으로 제출할 수 있습니다.

구현 방법 : WeChat 애플릿 자체는 완전히 오프라인 함수를 지원하지 않지만 wx.setStorageSync , wx.getStorageSync 및 wx.onNetworkStatusChange 를 결합하여 오프라인 기능을 시뮬레이션 할 수 있습니다.

단계 및 코드 :

1. 네트워크 시간 초과 구성 (App.json) : 네트워크 조건이 좋지 않은 경우 요청을 더 잘 처리하려면 app.json 의 네트워크 요청 시간 초과 구성 :

 {
  "페이지": [ "페이지/양식/양식"],
  "창문": {
    "BackgroundTextStyle": "Light",
    "NavigationBarbackgroundColor": "#fff",
    "NavigationBartitLetext": "오프라인 양식",
    "NavigationBartExtStyle": "Black"
  },
  "네트워크 타임 아웃": {
    "요청": 10000,
    "다운로드 파일": 10000
  },
  "Debug": True
}

2. 양식 페이지 (페이지/form/form.wxml) : (여기에서 생략, 실제 요구에 따라 양식을 작성하십시오)

3. 양식 논리 (Pages/Form/Form.js) : 이 파일은 양식 데이터, 로컬 스토리지 및 네트워크 상태 확인을 담당합니다.

 페이지({
  데이터 : {
    FormData : {}
  },
  제출 형식 : 함수 (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 ({
      성공 : 기능 (RES) {
        if (res.networktype! == 'none') {
          that.submitformData ();
        } 또 다른 {
          wx.showtoast ({제목 : 'net을 사용할 수없고, 데이터가 저장되었습니다', 아이콘 : 'none'});
        }
      }
    });
  },
  submitorformdata : function () {
    const formdata = wx.getStoragesync ( 'formdata');
    wx.request ({
      URL : '서버 인터페이스 주소',
      방법 : 'post',
      데이터 : FormData,
      성공 : 기능 (RES) {
        wx.showtoast ({제목 : '성공 제출', 아이콘 : 'success'});
        wx.removestoragesync ( 'formdata');
      },
      실패 : 함수 (res) {
        wx.showtoast ({제목 : '제출 실패, 다시 시도하십시오', 아이콘 : 'none'});
        // 리트리 로직을 여기에 추가 할 수 있습니다}
    });
  }
});

4. 네트워크 상태 청취 (app.js) : app.js 의 네트워크 상태 변경 및 네트워크가 복원 될 때 로컬로 저장된 데이터를 제출하려고합니다.

 앱({
  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}의 upplerformData 함수와 동일합니다.
});

코드의 '你的服务器接口地址' 실제 서버 인터페이스 주소로 바꾸십시오. 개발자는 실제 조건에 따라 오류 처리 및 재 시도 메커니즘을 개선해야합니다.

위 내용은 WeChat 애플릿 오프라인 양식 제출 : 네트워크 없이도 사용자 데이터를 저장하고 제출하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!