작은 프로그램 프로젝트를 처음부터 구축하는 방법을 가르쳐주세요.

IDE 준비

다운로드 주소: mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

지식 준비

여전히 JavaScript를 살펴봐야 합니다. 권장 튜토리얼: JavaScript 초보자 튜토리얼

처음부터 시작

WeChat 미니 프로그램에는 네 가지 유형의 파일이 있습니다

js -- --- -----JavaScrip 파일

json -------- 창 색상 등을 담당하는 프로젝트 구성 파일

wxml ------- HTML 파일과 유사

wxss ------- CSS 파일과 유사

루트 디렉터리에 app으로 명명된 4가지 파일이 프로그램 항목 파일입니다.

app.json

이러한 파일이 없으면 WeChat 프레임워크가 이 파일을 구성 파일 항목으로 사용하므로 IDE에서 오류를 보고합니다.

만들면 됩니다. 이 파일에 중괄호만 작성하면 됩니다.

앞으로는 여기에서 전체 애플릿의 전역 구성을 구성할 것입니다. 페이지 구성을 기록하고, 미니 프로그램의 창 배경색을 설정하고, 네비게이션 바 스타일을 설정하고, 기본 제목을 설정합니다.

app.js

이 파일이 있어야 합니다. 그렇지 않으면 오류가 보고됩니다! 하지만 이 파일만 만들면 아무것도 작성할 필요가 없습니다.

앞으로는 이 파일에서 미니 프로그램의 수명주기 기능을 모니터링하고 처리하고 전역 변수를 선언할 수 있습니다.

app.wxss

이 파일은 필요하지 않습니다. 전역 CSS 스타일 파일이기 때문에

app.wxml

필요하지 않으며 메인 인터페이스를 의미하지 않습니다~ 미니 프로그램의 메인 페이지는 다음을 기반으로 하기 때문입니다. JSON 파일 구성에 따라 다릅니다

이 두 파일을 사용하면 프로그램을 실행할 때 IDE가 오류를 보고하지 않습니다. 이는 또한 이것이 가장 간단한 WeChat 애플릿임을 의미합니다

만들기 프로그램 인스턴스 Hello World

app.js 파일은 전체 프로그램의 라이프사이클을 관리하므로 파일에 다음 코드를 추가합니다. (App IDE에 들어갈 때 메시지가 표시됩니다)

App ({ onLaunch: function () { console.log( '앱 실행') }, onShow: function () { console.log('앱 표시') }, onHide: function () { console.log('앱 숨기기' ) }})

특정 API 설명은 다음과 같습니다

Beautify ActionBar

json 파일은 ActionBar 색상을 구성하는 역할을 담당하며 다음 코드만 추가하면 됩니다. 매개변수는 아래 그림에 설명되어 있습니다!

Paste_Image.png

Paste_Image.png

{ "window":{ "navigationBarBackgroundColor": "#BBDEF8", "navigationBarTitleText": "Demo", "navigationBarTextStyle " :"white" }}

Paste_Image.png

이제 ActionBar가 이렇게 보이는지 확인해 보세요! 자, 계속해서 첫 번째 인터페이스를 작성해 봅시다

페이지를 아름답게 합니다

페이지를 아름답게 하기 위해 wxml 및 wxss 파일을 사용합니다

프로그램 코드 구조를 단순하게 유지하기 위해

임의의 이름으로 디렉토리에 새 폴더를 만들어야 합니다.

그런 다음 페이지 폴더에 임의의 이름으로 새 폴더를 만듭니다.

그런 다음 index.wxml 파일을 만들고 그 안에 다음 코드를 작성합니다.

Hellotext>view>

그런 다음 index.wxss 파일을 만들고 다음 코드를 작성합니다. 그 안에

.window{ color=#4995fa;}

그런 다음 index.js 파일을 만듭니다

파일에 다음 코드를 입력합니다(프롬프트가 표시됩니다). 페이지 IDE 진입 시)

기능 설명은 다음과 같습니다.

Paste_Image.png

홈페이지 구성

Json 파일이 구성을 담당합니다. 페이지 경로

그래서 다음 코드를 추가합니다

여기서 index는 실제로 index.js 파일을 의미합니다.

여기서는 페이지의 경로는 실제로 js 파일을 가리킵니다.

디렉토리에 이 이름을 가진 js 파일이 없으면 오류가 보고됩니다!

"페이지":[ "페이지/색인/색인"],

완료! 프로그램을 실행해보자!

Super Hello World

이벤트 바인딩과 페이지 데이터 업데이트 방법을 배우기 위해

슈퍼 Hello World, 즉 텍스트를 입력하면

색상이 변합니다!

바인딩 이벤트

index.wxml을 열고 내부 코드를 다음과 같이 변경합니다.

Hellotext>view>

실제로 캐치탭을 추가합니다. =" 클릭"

이 두 속성은 무엇을 의미하나요? 하나씩 설명하겠습니다.

위 그림은 이벤트의 일부 속성 이름을 보여줍니다. 버블링 이벤트와 비버블링 이벤트를 구별하려면 빨간색 상자에 표시된 내용에 주의하세요.

이 사진을 보고 catchtap="click"의 의미를 살펴보겠습니다

catch는 버블이 없는 이벤트를 나타냅니다

tap은 클릭 이벤트를 나타냅니다

그래서 Together 조차도 거품이 없는 클릭 이벤트입니다

뒤의 클릭이 무엇인가요

클릭은 사실 변수 이름일 뿐입니다

이것을 사용해야 합니다 index.js에서 바인딩하고 수신할 이름 이벤트 함수

index.js를 열고

다음 함수를 추가합니다.

click:function(){ console.log(" 텍스트를 클릭했습니다."); },

추가하면 코드는 이런 모습이 됩니다. 빨간색 상자가 추가된 코드입니다

그래서 사실 클릭 이벤트의 콜백 함수는 캐치탭입니다. ="click"

다음에

으로 구성된 :function()을 클릭하세요.

이제 프로그램을 실행하고 텍스트를 클릭해 보세요

click:function 함수가 호출되고 로그가 인쇄되는지 확인하세요

그럼 변경 논리를 작성해 보겠습니다. 클릭 시 색상

텍스트 색상을 변경하는 방법은 물론 CSS입니다

그래서 스타일을 추가해야 합니다

.window-red{ color:#D23933 ;}

그런 다음 index.js 파일을 입력합니다

코드에 데이터가 있음을 알 수 있습니다.{} 이는 페이지 수명 주기 함수가 아닙니다

실제로는 변수의 배열입니다. 적용된 변수는 모두 wxml에서 사용 가능합니다

여기서 색상을 적용합니다

색상 값은 스타일 이름입니다. index.wxss

에서 index.wxml을 입력합니다. 클래스의 값을 {{color}}

로 변경하면 실제로 여기 js 파일의 color 변수 값을 사용한다는 의미입니다. 🎜>

즉, 값은 window

그런 다음 index.js 파일로 돌아갑니다.

변수 컨트롤 적용 상단에서 클릭

그런 다음 click:function() 함수에 다음 코드를 추가합니다.

click:function (){ console.log("Text clicked") if(flag){ color = "window-red" ; flag = false; }else{ color = "window"; flag = true; } this.setData({ color }) },

수정된 코드는

사실 예를 누른 후 색상 변수의 값을 변경하는 것인데, 대체된 값은 실제로는 스타일 이름

인터페이스 데이터 업데이트

여기서 문제가 발생합니다. 값을 변경했지만 wxml

에 즉시 적용되지 않으므로

this.setData() 메서드를 호출해야 합니다. 값은 wxml에 동기화되어 적용됩니다. 즉시

자, 프로그램을 실행하고 Hello를 클릭하면 한 번의 클릭으로 색상이 변하는 지 확인해보자!

마지막으로 json 파일을 인덱스 디렉터리에서도 구성할 수 있다는 점을 추가하고 싶습니다.

즉, 각 페이지마다 고유한 작업 표시줄 색상 등을 구성할 수 있습니다.

여기서 구성은 app.json 파일의 구성을 덮어쓰게 됩니다

소스 코드 github 주소 https://github.com/pwh0996/WXDemo.git

마지막으로 미니 웨이브 공유 프로그램 소스코드, 488 미니 프로그램 데모 소스코드 다운로드 특수영역:

p/36fc7213b5d0

에너지가 있는 친구들은 꼭 읽어보시길 추천합니다.

---

지후에서 라이브를 진행했습니다. 4월 22일(토) 저녁 8시 30분에 지후에서 만나요: [0 기초주말학습팁 프로그램 개발 ] (https://www.zhihu.com/lives/832919740296101888), 참여를 환영합니다.

미니 프로그램 코드를 길게 눌러 "재배 코뮨"을 열고 즉시 "WeChat 미니 프로그램" Mi Circle에 참여하세요

이 글은 내 개인 위챗 공개 계정에 처음 게재되었습니다. 철학 Li Lun , 주로 예술/기술 관련 콘텐츠를 홍보하는 곳은 모두 친구에 관한 것입니다.

위 내용은 작은 프로그램 프로젝트를 처음부터 구축하는 방법을 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!