위챗 미니 프로그램 개발 방법

이번에는 WeChat 미니 프로그램을 개발하는 방법과 WeChat 미니 프로그램을 개발할 때 Notes가 무엇인지 보여드리겠습니다. 실제 사례를 살펴보겠습니다.

no.1 배경 이미지가 표시되지 않습니다

WeChat 애플릿을 사용하면 배경 이미지를 사용자 정의할 수 있지만 배경 이미지의 경로와 주소는 제한되어 있습니다. 이전에는 상대 경로를 사용하여 작성했습니다. 개발자 도구에서도 배경이미지가 표시되었는데, 문제가 없다고 착각했는데, 미리보기를 해보니 휴대폰에 배경이미지가 표시되지 않는 것이 오늘 소개된 첫 번째 함정입니다. 지역적인 이미지가 됩니다.

해결책:

먼저 온라인 사진을 base64 코드로 변환하는 방법을 사용하세요. 이 방법의 장점은 사진이 로컬이나 서버에 저장되지 않는다는 것입니다. 수정. 단점은 작은 사진 처리 효과입니다. 더 좋은 점은 큰 사진의 코드가 꽤 길어서 보기가 싫다는 것입니다...

둘째, 사진을 서버에 업로드하고 이미지 주소만 인용하면 편리하고 빠르지만, 수정이 번거롭고 서버 공간을 차지합니다.

no.2 풀다운이 onPullDownRefresh를 실행하지 않습니다

//下拉事件
onPullDownRefresh: function() {
 console.log("好用不?")
 wx.showToast({
  title: '没事儿别乱拉',
  icon: 'success',
  duration: 2000
 })
},
//上拉事件
onReachBottom: function() {
 wx.showToast({
  title: '没事儿别乱拽',
  icon: 'success',
  duration: 2000
 })
}

위 코드는 완전 괜찮은데, 미리보기를 해보니 풀업만 사용하기 쉽고 풀다운할 때 전혀 반응이 없습니다. . 실망스럽네요. 공식적인 방법이 있나요?

사실 아니요, 그 이유는 공식적인 기본값이 드롭다운 이벤트를 끄는 것이기 때문입니다. app.json 파일로 이동하여 창에서 매개변수를 수정하면 됩니다.

"window": {
 "enablePullDownRefresh":true //开启下拉功能
}

no.3 중력 감지 API 모니터링을 취소하는 방법

WeChat 애플릿은 흔들기 API 인터페이스를 제공하지 않지만 중력 감지 API "wx.onAccelerometerChange(CALLBACK)"를 제공하는 방법을 사용하여 시뮬레이션할 수 있습니다. WeChat 흔들기 기능은 다음과 같습니다.

Page({
 onShow: function () {
  wx.onAccelerometerChange(function (e) {
   console.log(e.x)
   console.log(e.y)
   console.log(e.z)
   if (e.x > 1 && e.y > 1) {
    wx.showToast({
     title: '摇一摇成功',
     icon: 'success',
     duration: 2000
    })
   }
  })
 },
 onHide: function(){
  
 }
})

하지만 미니 프로그램에서 탭바를 활성화해야 하는 경우 중력 감지 API를 활성화하면 탭바 아래의 모든 페이지가 중력 감지 데이터를 모니터링하여 시뮬레이션된 흔들림이 발생합니다. 우리가 원하는 것은 아니지만, 우리는 그가 탭바 아래의 페이지 중 하나에서 중력 감지 데이터를 얻을 수 있도록 허용하고 그것이 현재 페이지에 있는지 여부에 대한 판단을 추가해야 합니다. 판단 결과에 따라 중력 감지 API의 모니터링을 활성화합니다. 코드 수정은 다음과 같습니다.

Page({
 isShow: false,
 onShow: function () {
  var that = this;
  this.isShow = true;
  wx.onAccelerometerChange(function (e) {
   if(!that.isShow){
    return
   }
   console.log(e.x)
   console.log(e.y)
   console.log(e.z)
   if (e.x > 1 && e.y > 1) {
    wx.showToast({
     title: '摇一摇成功',
     icon: 'success',
     duration: 2000
    })
   }
  })
 },
 onHide: function(){
  this.isShow = false;
 }
})

수정 미리보기를 다시 컴파일하면 원하는 효과를 얻을 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue 키 수정자 이벤트 처리 단계에 대한 자세한 설명

JS를 사용하여 해시 테이블을 구현하는 방법

위 내용은 위챗 미니 프로그램 개발 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!