WeChat Mini 프로그램 개발 시리즈 (2) 개발 구성 요소 사용에 대한 자세한 설명

이 글에서는 WeChat 미니 프로그램 개발 시리즈를 소개합니다. (2) 개발 컴포넌트 사용에 대한 자세한 설명

1: 개발 컴포넌트의 사전 사용

1: WeChat 구축 미니 프로그램 프로젝트

2: WeChat 미니 프로그램의 공식 개발 가이드인 다음 링크의 내용을 참조하세요:

https:/ /mp.weixin.qq.com /debug/wxadoc/dev/comComponent/button.html?t=20161222

3: 일부 예제 프로그램을 복사할 수 있습니다. WeChat을 사용하여 생성한 프로젝트에 미니 프로그램의 구성 요소가 그림 1에 나와 있습니다.

first.wxml에 첫 번째 페이지의 레이아웃을 작성할 수 있습니다. 예를 들어 그림 1에서는 문자열을 썼습니다. "1234567890abcdefg", 이 문자 아래에 WeChat 애플릿용 버튼을 작성했습니다. 버튼에 표시되는 내용은 "default", type="default"입니다. 이는 버튼에 표시된 대로 기본 표시 효과가 있음을 의미합니다. 둥근 모서리가 있는 그림 1의 왼쪽 시뮬레이터. 회색 버튼에는 왼쪽과 오른쪽에 테두리가 없습니다.

참고: 많은 네티즌들은 WeChat Mini 프로그램 개발 도구에서 코드를 작성한 후 WeChat Mini 프로그램 개발 도구 왼쪽 하단에 있는 "컴파일" 버튼을 클릭해도 응답이 없다는 것을 알게 될 것입니다. 실제로 이것은 코드를 작성한 후 키보드에서 Ctrl+s를 누르고 코드를 저장한 다음 "컴파일"을 클릭해야 해당 코드의 효과가 시뮬레이터에 표시될 수 있기 때문입니다.

그림 1

4: 버튼 표시 내용과 클릭 이벤트 바인딩:

아래 기능을 구현합니다. 버튼을 클릭한 후 , 버튼 콘텐츠를 새 콘텐츠로 교체

1) first.wxml에 다음 코드를 추가합니다. bintap="btnClick"은 버튼의 클릭 시간을 바인딩하는 메서드입니다: btnClick(), {{btnText} } 버튼에 의해 표시되는 콘텐츠에 바인딩된 변수: btnText

{{btnText}}

2) 메소드: btnClick() 및 변수: btnText는 그림 2와 같이 first.js에 구현되어야 합니다

그림 2

3 ) 버튼을 클릭하기 전후의 시뮬레이터 디스플레이 효과는 그림 3과 같습니다.

그림 3

5: 텍스트 구성 요소의 사전 사용:

아래 함수를 구현해 보겠습니다. 버튼을 클릭한 후 텍스트 구성 요소의 초기 내용을 수정한 후 다시 버튼을 클릭하면 텍스트 구성 요소의 내용이 사라지고, 다시 버튼을 클릭하면 텍스트 구성 요소의 내용이 나타납니다. . . . . . 등.

1) first.wxml에 다음 코드를 추가합니다.

{{text}}

그림 4에 표시된 코드를 first.js에 추가

그림 4

6: 콘텐츠 목록

first.wxml에 다음 코드를 추가합니다.

{{index}}: {{newsItem}}

first.js에 다음 코드를 추가하세요

data:{ }

:

news:[' 1행 정보', '2행 정보', '3행 정보']

결과는 그림 5와 같습니다.

그림 5

7: 페이지에 머리글 및 바닥글 추가

새 폴더 템플릿을 생성하고 폴더 아래에 새 파일 생성: footer.wxml 및 header.wxml

그림 6의 코드를 파일에 추가

그림 6

시뮬레이터는 그림 7과 같은 결과를 표시합니다

둘: WeChat Mini 프로그램 구성

APP의 페이지 구성, 창 구성, tabBar 구성, 네트워크 구성 및 기타 정보를 설명합니다

그림 1 및 그림 2에 표시된 대로 디스플레이:

사진 1

위 내용은 WeChat Mini 프로그램 개발 시리즈 (2) 개발 구성 요소 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!