WeChat Mini 프로그램 개발 기술 요약

요약: WeChat 미니 프로그램 출시 첫날 Mobike 미니 프로그램이 공식 출시되어 웨이보 미디어계 친구들을 압도했습니다. 이 기사에서는 주로 기술 방향에 대한 요약과 이 개발 주기 동안 학습에서 발전으로 단계적으로 이동하는 방법에 대해 설명합니다. ... ... ... ...

머리말

모바이크 미니 프로그램은 위챗 미니 프로그램 첫날 정식 출시되었으며, Weibo 미디어 친구들의 인기 서클이 되었습니다. 이 기사에서는 주로 기술 방향에 대한 요약과 이 개발 주기 동안 학습에서 발전으로 단계적으로 이동하는 방법에 대해 설명합니다.

생각의 변화

• WeChat 애플릿에는 일반적인 HTML 태그가 없지만 React, view 등 text과 유사한 WeChat 사용자 정의 구성 요소가 있습니다. mapetc

• 에는 window 변수가 없지만 WeChat은 wx전역 메서드 세트

• 를 제공합니다. 🎜> 태그 링크는 중첩될 수 없습니다aiframe

• 이벤트 바인딩 및 조건부 렌더링은 Angular과 유사하며 모두 WXML

• 데이터 바인딩은 Mustache 이중 중괄호 구문

• 조작이 불가능합니다

  , DOM를 변경하여 뷰 표시를 변경합니다. (page data 상태와 유사) React

그렇다면 위에서 언급한 모든 프런트엔드 기술 스택에 익숙하다면 WeChat 애플릿을 개발하는 것이 편할 것입니다.

라이프 사이클

미니 프로그램은 단일 페이지 H5 웹 페이지이며 모든 요소가 한 번 로드되므로 라이프 사이클 개념으로 이어진다는 것을 이해할 수 있습니다.

• 처음 열면 애플릿이 초기화됩니다.

• 애플릿 초기화가 완료되면

  이벤트 onShow가 트리거됩니다

• 애플릿이 배경으로 전환되어(화면 꺼짐, APP 전환 등)

  onHide이 트리거됩니다.

• 애플릿이 백그라운드에서 포그라운드로 전환되고 다시 트리거됩니다.onShow

• 애플릿에 오류가 있어서 트리거됩니다 onError

각 페이지에는 자체 수명 주기가 있습니다.

참고: WeChat 버전 6.5.3에서는 일부 Android 장치에서 onLoad 이벤트는 onReady으로 대체 가능합니다.

이벤트 방송

"단일 페이지 구조" WeChat 애플릿, 이벤트 방송(통합 이벤트 센터)을 사용하여 사용자 정의 이벤트를 등록하고 실행할 수 있습니다. 그렇지 않으면 향후 이벤트 관리가 더 많아집니다. 더 지저분하고 페이지 간 이벤트 전송이 포함됩니다. 이러한 종류의 이벤트 트리거 메커니즘이 필요합니다. Broadcast.js를 참조하세요. 예를 들어 Mobike에는 다음 장면이 있습니다.

QR 코드를 성공적으로 스캔한 후 잠금 해제 페이지 A에 잠금 해제 성공을 알리는 메시지가 표시됩니다. 라이딩 페이지 B로 이동하여 확인해야 합니다. 사용자의 라이딩 상태.

통합 사고 관리 센터가 없으면 이러한 프로세스를 완료하는 것은 거의 불가능합니다. 물론 Hack을 사용하여 해결할 수도 있습니다. B 페이지로 이동하면 B의 onShow 이벤트가 트리거되므로 onShow에 비즈니스 로직을 작성할 수 있습니다.

// Page A
// 开锁成功后，跳转到Page B
wx.redirectTo({
  url: "/pages/riding/index"
})

// Page B
Page({
  onShow() {
    // 检查骑行状态
  }
}
})

하지만 이를 처리하려면 이벤트 브로드캐스팅을 사용하는 것이 더 합리적입니다.

const broadcast = require("libs/broadcast")

// 先注册事件
broadcast.on("check_ride_state", () => {
  // 检查骑行状态
})

const broadcast =require("libs/broadcast")

// Page A
// 开锁成功后，触发事件，再跳转到Page B
broadcast.fire("check_ride_state")
wx.redirectTo({
  url: "/pages/riding/index"
})

Data Center

루트 디렉터리의 app.js는 매우 유용하고, 루트 디렉터리의 app.js은 매우 유용하며, 루트 디렉터리의 app.js은 매우 유용합니다.
그 안에 등록된 변수나 메소드는 모든 페이지에서 얻을 수 있기 때문에 위에서 언급한 페이지 간 이벤트 트리거 문제를 처리하는 데에도 사용할 수 있습니다. globalData을 등록하면 모든 페이지에 액세스할 수 있습니다. 예를 들어 systemInfo를 globalData에 직접 등록할 수 있으므로 모든 페이지에서 가져올 필요가 없습니다.

// app.js

const systemInfo = wx.getSystemInfoSync()
App({
  globalData: {
    systemInfo
  }
})

가져오기 페이지에서:

// Page A

const {
  systemInfo
} = getApp().globalData

性能优化

小程序运行在微信平台，而且可能和众多小程序“共享运行内存”，可想而知，单个小程序的性能极可能遇到瓶颈而Crash或被微信主动销毁！

比如在摩拜单车有这个场景：

首页展示地图找车，扫码成功后跳转到骑行地图。

简单的逻辑，直接两个页面，两个map组件切换就可以搞定。实际测试场景中，iOS的确如预期，一切正常，但是在Android下，就很有可能会使得小程序Crash，扫码成功后直接退出了小程序。

解决办法就是， 整个小程序只维护一个map组件 ，通过不同的State来改变map的不同展现：

index.wxml
"map" controls="{{controls}}" style="{{style}}">map>
index/index.js

const indexStyle = "width: 750rpx; height: 1260rpx"
const rideStyle = "width: 750rpx; height: 960rpx"

Page({
  data: {
    style: indexStyle
  },
  onUnlock() {
    this.setData({
      style: rideStyle
    })
  }
}
})

这样就成功解决了部分Android设备小程序Crash的问题。

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