WeChat 미니 프로그램 개발에 대한 자세한 설명

이 시리즈는 처음부터 저자의 상세한 설명이 시리즈에 따라 단계별로 시청하고 학습하기에 적합합니다. >

초기 페이지에 추가됨: index.js 그림 1의 코드

그림 1

"컴파일"을 클릭한 후 다음을 실행합니다. 작은 프로그램: 로그는 그림 2에 표시됩니다. 초기 페이지 index .js 시작은 앱의 수명 주기 메서드 호출에서 시작됩니다. js: onLaunch---onShow, 그런 다음 index.js 페이지에서 수명 주기 메서드 호출이 시작됩니다. : onLoad---onShow---onReady, "Background"를 클릭한 경우 index.js 페이지가 배경으로 들어가면 그림 3과 같이 라이프사이클 메서드 onHide가 호출됩니다. "Foreground"를 다시 클릭하면 페이지가 포그라운드로 돌아가고 페이지 수명 주기 메서드: onShow가 다시 호출됩니다(현재는 더 이상 onLoad 콜백이 없음). 그림 4와 같이

그림 2

그림 3

그림 4

2: 페이지 이동

그림 5와 같이 index.wxml 코드를 작성합니다. 표시된 대로 텍스트 구성 요소가 itemClick 메서드의 구현 세부 사항에 바인딩되어 있음을 알 수 있습니다.

itemClick: function (){
     console.log("---index page itemClick---");
    wx.navigateTo({
      url: '../logs/logs'
    })

그중 wx.navigateTo는 index.js 페이지에서 페이지/로그/로그 페이지로 점프하는 것을 나타냅니다. 참고: NavigateTo는 로그 페이지로 점프한 후 인덱스 페이지가 로그 페이지 아래에서는 로그 페이지 왼쪽 상단의 복귀 버튼을 통해 인덱스 페이지로 돌아갈 수 있습니다. wx.redirectTo인 경우 인덱스 페이지로 돌아갈 수 없습니다. 로그 페이지에서 여기서는 wx.navigateTo를 예로만 사용합니다

그림 5

시뮬레이터에서 기사 2를 클릭하면 텍스트 이후 그림 6과 같이 해당 로그 인터페이스 로그로 점프합니다. 로그 페이지의 해당 js 코드는 그림 7에 나와 있습니다. 그림 6과 그림 7을 비교하면 인덱스 페이지에서 로그로 점프할 때를 알 수 있습니다. 이 과정에서 인덱스 수명 주기 메서드 onHide를 먼저 호출해야 하며(wx.redirectTo 점프인 경우 인덱스 수명 주기 메서드 onUnload도 호출해야 함) 로그 페이지의 수명 주기 메서드를 호출해야 합니다. 순서대로 호출됨: onLoad---onShow---onReady

그림 6

그림 7

3: 페이지 간 매개변수 전송

그림 1, index.js 코드를 다음으로 수정:

wx.navigateTo({

url: ".. /logs/logs?id=1&title=title abc"

})

즉, 인덱스 페이지에서 로그 페이지로 이동할 때 두 개의 매개변수(id=1 및 title)가 전달됩니다. =title abc

로그 페이지를 다시 살펴보겠습니다. 코드는 그림 7에 나와 있습니다. onLoad에서 전달된 매개변수인 id와 title은 코드에서 매개변수인 options를 전달하여 얻습니다. 매개변수는 log.wxml에 의해 바인딩된 두 개의 변수(articleId, pageTitle)로 설정됩니다. 표시 결과 및 log.wxml 코드는 그림 8에 표시됩니다.

그림 8

그림 8의 시뮬레이터 결과를 볼 수 있습니다. 로그 페이지에는 인덱스 페이지에서 전달된 두 매개변수인 id=1 및 title=title abc

가 표시됩니다. 🎜>

참고: 그림 5의 코드에 표시된 것처럼 페이지 점프는 .wxml에서도 구성할 수 있으며 기사 1에 해당하는 텍스트 구성 요소는 다음 코드를 통해 점프하도록 구성할 수 있습니다.

<navigator url="../logs/logs?id=100&title=标题" >

WeChat 애플릿 개발에 대한 자세한 설명 및 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!