WeChat 미니 프로그램을 처음부터 개발하기 (2)

이전 장에서는 WeChat 애플릿을 처음부터 개발하는 방법을 알려드렸습니다(1). 애플릿을 등록하고 새 프로젝트를 추가하면 전반적인 준비와 개발이 완료되었습니다. 간단한 페이지 만들기:

1. 페이지에 디렉터리 추가

페이지를 선택하고 마우스 오른쪽 버튼을 클릭하여 하드 디스크에서 엽니다. 새 폴더 테스트 (또는 + 부호를 클릭하여 하나의 디렉토리별로 추가하고 디렉토리 아래에 필요한 파일을 추가하십시오)

이렇게 추가하세요

2. 새 wxml 파일을 만듭니다.

test 폴더 아래에 빈 wxml 파일을 새로 만듭니다.

3. 테스트의 편의를 위해 내용만 채워보겠습니다

<view class="container">  
    <text>这是我的test页面哦哦！！！</text>  </view>

4 같은 방법으로 테스트 .js 파일을 생성하고, test.js 파일을 편집합니다

테스트 폴더 아래에 빈 js 파일을 새로 생성합니다

동일하게 사용합니다. 위와 같은 방법으로 테스트 디렉토리에 test.js 파일을 생성합니다. 테스트를 용이하게 하기 위해 일부 내용을 입력하면 됩니다. (비워둘 수도 있고 파일을 비워 둘 수도 있습니다.)

//test.js  //获取应用实例  var app = getApp()  
Page({  
  data: {  
    userInfo: {}  
  },  
  onLoad: function () {  
    console.log('onLoad test');  
  }  
})

5. app.json에 테스트 페이지

전역 파일 app.json을 열고 파일에 "pages/test/test"를 추가합니다(테스트 페이지가 있는 디렉터리 추가)

6. 홈페이지에 점프 접속 링크

모든 것이 준비되었고 추가해야 할 모든 것이 추가되었으며 이제 기적을 목격할 순간입니다. 홈페이지에 페이지 항목을 작성하고 테스트하려는 항목으로 이동합니다. 페이지에서 , 홈페이지 페이지/index/index.wxml

<view class="btn-area">  
   <navigator url="/pages/test/test" hover-class="navigator-hover">跳转test页面</navigator>  
 </view>

7에 직접 코드 조각과 링크를 추가하세요. Test

코드를 저장하고 위의 컴파일 버튼을 클릭하면 모든 코드가 실행됩니다. 홈페이지 "Jump to test page"를 클릭하면 아래와 같이 점프가 성공합니다.

8 ) 예를 들어 지난번에 구축한 테스트 페이지에서 페이지/test/ 디렉터리를 찾아 새 test.json 파일을 만들고 다음 코드를 추가합니다.

{  "navigationBarTitleText": "详情页"}

효과는 다음과 같습니다.

자, 이제 페이지 생성과 페이지 간 이동 구현이 완료되었습니다.

관련 권장 사항:

WeChat 애플릿을 처음부터 개발하기( 1)

WeChat Mini 프로그램에 대한 간략한 소개

WeChat Mini 프로그램 글로벌 구성 개발 사례

위 내용은 WeChat 미니 프로그램을 처음부터 개발하기 (2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!