WeChat 미니 프로그램에서 미니 프로그램 페이지를 만드는 단계 소개(사진 및 텍스트)

이 글은 WeChat 미니 프로그램 페이지를 만드는 단계를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

간단한 페이지 만들기, 미니 프로그램 페이지를 만드는 구체적인 단계:

1 페이지에 디렉토리 추가

페이지 선택, 오른쪽- 마우스를 클릭하여 하드디스크에서 엽니다. 하드디스크 파일을 연 후 새 폴더를 만듭니다. 테스트(또는 + 기호를 클릭하여 디렉토리를 하나씩 추가하고 디렉토리 아래에 필요한 파일을 추가합니다.)

#🎜🎜 2 . 새 wxml 파일 만들기#🎜 🎜#

테스트 폴더 아래에 새 빈 wxml 파일 만들기

3. wxml 파일

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

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

4 같은 방법으로 test.js 파일을 생성하고 test.js를 편집합니다. file

테스트 폴더 아래에 새 파일 만들기 빈 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에 직접 코드 조각과 링크를 추가하고 싶습니다. 🎜🎜#

코드를 저장하고 위의 컴파일 버튼을 클릭하면 모든 코드가 실행되며, 홈페이지에서 "테스트 페이지로 점프"를 클릭하면 아래와 같이 점프가 성공하게 됩니다.

8: 페이지 제목 설정

페이지 제목 설정은 매우 간단한 단계입니다. . 지난번에 구축한 테스트 페이지와 같은 새 json 파일을 생성하고(일반적으로 자동으로 생성되지 않으면 새 파일 생성), 페이지/테스트/ 디렉터리를 찾아 새 test.json 파일을 생성하고 다음을 추가합니다. 암호.

{
  "navigationBarTitleText": "详情页"
}

효과는 다음과 같습니다.

좋아, 여기 , 생성 페이지와 구현 페이지 사이의 점프가 완료되었습니다

관련 권장사항:

WeChat 애플릿 개발-환영 페이지 생성

# 🎜 🎜#

WeChat 미니 프로그램 - 맞춤 제작

WeChat 미니 프로그램 사례 상세 설명: 페이지 구성 # 🎜🎜#

위 내용은 WeChat 미니 프로그램에서 미니 프로그램 페이지를 만드는 단계 소개(사진 및 텍스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!