WeChat 미니 프로그램 개발 중 발생한 문제 요약

WeChat 미니 프로그램 개발 시 발생하는 문제점 요약

1. 미니 프로그램의 wx.request() 메소드는 비동기식이므로 app.js가 ajax를 실행한 후, 각 페이지가 로드됩니다. app.js의 전역 데이터를 순서대로 로드할 수 없습니다. 예:

//app.js
App({
  ajax:function(){
    let that = this;
    wx.request({
      url: 'https://a.com/url.php',
      method: 'GET',
      success: function(e){
        that.data = 123;
      }
    })
  };
})
//content.js
let app = getApp()
Page({
  getData: function(){;
    app.ajax();
    console.log(app.data); //undefined
  }
})

해결 방법, Promise 비동기 함수 사용:

//app.js
App({
  ajax:function(){
    let that = this;
    let promise = new Promise(function(resolve, reject){
      wx.request({
        url: 'https://a.com/url.php',
        method: 'GET',
        success: function(e){
          that.data = 123;
          resolve();
        }
      })
    });
  };
})
//content.js
let app = getApp()
Page({
  getData: function(){;
    app.ajax().then(()=>{
      console.log(app.data); //123
    });
  }
})

2. 이미지의 원래 너비와 높이는 얻을 수 있지만 기존 너비와 높이는 얻을 수 없습니다. 그러나 이미지 태그는 필요에 따라 설정할 수 있는 모드 속성을 캡슐화합니다.

3. 각 이미지 태그 하단에는 여백이 아닌 패딩이 아닌 투명한 공간이 있습니다. 이미지 앞에 마스크 레이어를 만들 때 막힐 수 있습니다.

4. 네트워크 요청은 https를 배포해야 합니다

5. tabBar를 구성할 때 list 매개변수의 pagePath 매개변수는 최소한 app.json의 페이지 배열에 있는 첫 번째 경로를 포함해야 합니다. 그러면 tabBar가 표시되지 않습니다.

6. TabBar는 점프할 때 매개변수를 사용할 수 없습니다. 해결 방법:

//search.js
var app = getApp();
Page({
  confirm: function(e){
    //获取数据，添加到全局
    let val = e.detail.value;
    app.searchWord = val;
    this.jump();
  },
  jump: function(){
    //跳转tabBar
    wx.switchTab({
      url: '../index/index',
    });
  },
});
 
//index.js
var app = getApp();
Page({
  onShow: function(e){
    //获取全局数据
    let val = app.searchWord;
  }
});
//需要传递参数的页面在跳转前将数据添加到app.js里。需要接受参数的页面在onShow方法接受之前添加到app.js的数据。
　　

7. wx.request() 메서드에서 요청한 미니 프로그램 https

로 시작해야 합니다. 8. wx.request()가 게시 메소드를 사용하여 요청할 때 헤더[content-type] 값은 application/x-www-form-도 추가해야 합니다. Urlencoded. 예:

wx.request({
  url: 'https://a.com/url.php',
  data: {message: 123},
  method: 'POST',
  header: {
    'content-type': 'application/x-www-form-urlencoded'
  },
  success: function(e){
    console.log(e)
  }
});

9. 애플릿은 html 태그를 로드할 수 없으며 데이터 렌더링은 wxml 태그(89c662c6f8b87e82add978948dc499d2de5f4c1163741e920c998275338d29b2 등)를 렌더링할 수 없습니다. ) , wxParse.js를 사용하여 관련 데이터를 처리할 수 있습니다.

10. Android는 wx.request()에서 요청한 데이터를 렌더링할 수 없습니다.

반환된 데이터에 BOM 헤더(공백 3자)가 있는지 확인하세요. Android의 wx.request 구문 분석은 BOM 헤더를 건너뛰지 않으므로 데이터가 객체나 배열 대신 문자열로 반환됩니다.

예:

반환된 데이터는 다음과 같습니다. (공백 3자){a:1, b:2}

구문 분석된 데이터는 '{a: 1 , b:2}' (문자열), {a:1, b:2} (객체)가 아님

객체가 아니기 때문에 템플릿 렌더링 등이 제대로 작동하지 않습니다. 해결 방법은 백그라운드에서 데이터를 반환하기 전에 BOM 헤더를 제거하는 것입니다. BOM 헤더가 백그라운드에서 제거되지 않으면 프런트엔드에서 제거가 가능하지만, wx.request의 dataType이 기본값인 경우에는 json으로 기본 설정되어 자동으로 파싱되므로 BOM 헤더 제거가 불가능합니다. .

해결책:

wx.request({
  url: url,
  method: 'GET',
  dataType: 'txt',
  success: function(e){
    let json = e.data.trim();
    let arr = JSON.parse(json);
  }
});

애플릿이 json을 자동으로 구문 분석하지 않도록 dataType을 json 이외의 형식으로 변경합니다. string 을 사용한 다음, Trim() 메서드를 사용하여 반환된 데이터에서 공백을 제거하고 마지막으로 json 문자열을 구문 분석합니다.

11. 디버깅 중에는 여러 줄 생략(-webkit-line-clamp)이 일반적이지만 게시할 때는 유효하지 않습니다.

해결책: 다시 검토하고 싶지 않다면 배경을 자르세요.

읽어 주셔서 감사합니다. 모두에게 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다. !

WeChat 미니 프로그램 개발 시 발생하는 문제 요약에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!