wechat mini program wiki
1.0.0
중국 최고의 메시징 앱인 WeChat은 아주 급진적인 미니 프로그램을 출시했습니다. 다운로드나 설치가 필요 없는 내장형 앱입니다. 열고, 사용하고, 공유하면 완료됩니다!
이러한 앱이 얼마나 실용적인지에 대한 큰 논쟁 과 많은 클릭베이트가 있습니다. 실제로 개발자에게 제공되는 프레임워크는 초기 단계에 불과하며 여전히 제한적이며 솔직히 약간 실망스럽습니다. 그럼에도 불구하고 Tencent는 이 채널을 채택하고 추진력을 구축하며 최초 이동자에게 기회를 제공하기 위해 전례 없는 자원을 투자하고 있습니다. 우리는 이러한 해커들이 감히 시도한다면 빠른 승리를 얻을 수 있다고 믿습니다.
최대한 빨리 WeChat에 배포하고 싶은 서비스에 대한 아이디어가 있으십니까? Javascript에 대한 기본 지식이 있고 이 프레임워크를 실험하고 싶습니까? 문서의 Google 번역에서 길을 잃었나요? 가능한지 아닌지를 해독하려면 약간의 부스트가 필요합니까? 안녕하세요, 환영합니다.
공식 문서를 통해 길을 찾는 것은 쉽지 않습니다. 실제로 무언가를 완료하려면 많은 시행착오, 오픈 소스 코드에 대한 일부 연구 및 많은 가정이 필요합니다. 당신은 벽에 머리를 박고 있었습니다. 우리는 그것을 얻습니다.
우리의 임무는 창의적인 기업가들이 훌륭한 기술 제품을 만들 수 있도록 돕는 것입니다. 우리는 당신이 작은 발걸음을 내딛을 수 있도록 도와줄 것입니다.
아래 내용은 문서의 번역이 아니며 확실히 빨리 구식이 될 것입니다. 누구든지 멋진 WeChat 미니 프로그램을 빠르게 시작하고 구축할 수 있도록 돕는 것이 우리의 기여일 뿐입니다. 지금 하세요.
미니 프로그램을 진행하고 있나요? 작업을 공유하고 싶거나, 우리 제작진을 만나고, 도움을 요청하고 싶다면 저희에게 연락하세요!
기여하고 싶다면 여기로 Pull Request를 보내거나 shanghai(at)lewagon.com에서 제안을 보내주세요!
이 원본 작품은 Thibault Genaitay(Driver China)와 Stephane Delgado(Batch #61)의 지원을 받아 Le Wagon 졸업생인 Adrien Pelegri(Batch #30)가 작성했습니다.
등록 과정은 정말 어렵습니다. 특히 환상적인 중국 행정 세계에 대한 경험이 없다면 더욱 그렇습니다. WeChat 확인 과정은 오래 걸립니다. 침착함을 유지하세요.
WeChat 미니 프로그램 등록부터 개발 릴리스까지 기본적으로 다음 단계를 거쳐야 합니다.
미니 프로그램을 회사로 등록하는 데 필요한 자료 목록은 다음과 같습니다.
미니 프로그램 프로젝트를 등록하고 생성하는 방법에 대한 포괄적인 영어 매뉴얼(중간 기사)을 따르거나 이 공식 WeChat 문서(마지막 업데이트: 2017년 8월 2일)를 확인하는 것이 좋습니다.
IDE(통합 개발 환경)는 애플리케이션을 작성하기 위한 프로그래밍 도구 세트입니다. 이는 단일 그래픽 사용자 인터페이스를 통해 액세스할 수 있는 코드 편집기, 컴파일러 및 디버거로 구성됩니다.
여기에서 WeChat IDE를 다운로드하세요: Mac, Windows 64, Windows 32
다음은 WeChat IDE를 익히고 최대한 활용할 수 있는 빠른 튜토리얼입니다.
측면에는 파일 트리가 있고 왼쪽에는 앱 미리보기를 표시하는 시뮬레이터가 있는 코드 편집기입니다 . 
다음은 개발 중에 작업을 수행하기 위한 전체 버튼 목록입니다.
1. 프로필: IDE에서 로그아웃하려면 클릭하세요. 2. 코드 편집 3. 디버그/검사: 아래를 참조하세요. 4. 프로젝트 정보: 아래를 참조하세요. 5. 컴파일러: 보기의 자동 새로 고침이 작동하지 않을 때 앱을 컴파일하는 데 유용할 수 있습니다. 
6. 장면 값 7. 캐시 8. 종료: 진행 중인 프로젝트를 종료하고 다른 프로젝트로 이동합니다. 9. 시뮬레이터 숨기기 10. 장치: 미니 프로그램 응답성을 테스트하는 장치 목록을 제공합니다. 11. Wi-Fi, 4G, 3G, 2G에서 작업할 수 있습니다 . 12. 수목 숨기기 13. 파일 관리: 폴더 또는 파일을 검색, 추가 및 삭제합니다.
디버거/검사기: 이 도구는 IDE의 중요한 부분으로, 예전의 Chrome DevTools 처럼 보입니다. 
1. 상단 표시줄 네트워크: 이 패널은 요청 및 소켓 문제 또는 페이지 로드 성능을 디버깅하기 위한 것입니다. 저장소: 캐시에 있는 모든 데이터에 액세스할 수 있습니다. AppData: 현재 프로젝트 데이터를 표시하는 데 사용됩니다. 패널에서 데이터를 직접 편집하고 미리 볼 수 있습니다. Wxml: 페이지의 모든 요소를 즉시 검사하고 편집할 수 있습니다. 센서: 중력 감지를 디버깅하기 위해 모바일 장치의 위치와 성능을 시뮬레이션할 수 있습니다.
2. 소스 패널 소스 패널에는 현재 프로젝트 스크립트 파일이 표시됩니다.
3. 콘솔 콘솔 은 진단 정보를 기록하여 코드에 어떤 오류가 있는지 알려주고, 사용자가 배치한 console.log() 등 페이지의 자바스크립트와 상호 작용합니다.
프로젝트 정보: 이 페이지에서는 AppID, 디렉터리 정보 등 현재 프로젝트 세부 정보를 확인할 수 있습니다. 미리보기 옵션을 클릭하면 QR 코드를 스캔한 후 휴대폰에서 직접 미니 프로그램을 테스트할 수 있습니다.
참고: 휴대폰에서 미니 프로그램을 테스트하는 동안 장치에서 직접 디버거 도구를 활성화할 수 있습니다.
이 섹션에서는 WeChat에서 제공하는 "빠른 시작" (상용구)의 구조와 이 프레임워크를 준수하는 데 필요한 기본 사항을 소개합니다.
WeChat 빠른 시작.zip을 다운로드하세요.
빠른 시작 수목:
.
├── app.js
├── app.json
├── app.wxss
├── 페이지
│ ├── 색인
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
│ └── 로그
│ ├── 로그.js
│ ├── 로그.json
│ ├── 로그.wxml
│ └── 로그.wxss
└── 유틸리티
└── util.js
이 상용구의 색인 페이지에는 현재 사용자 프로필 정보가 포함된 시작 페이지가 표시됩니다. 아바타를 클릭하면 현재 미니 프로그램 로그를 표시하는 새 페이지로 리디렉션됩니다.
WeChat 미니 프로그램은 "앱" 파일 로 시작됩니다(아래 스크린샷 참조). 이 파일은 미니 프로그램 루트 디렉토리이므로 미니 프로그램의 입구입니다. (공식 WeChat 문서는 다음과 같습니다.)
app.js는 미니 프로그램의 전역 논리인 스크립트 코드입니다. MP의 수명주기 기능을 설정 및 조작하고, 전역 변수를 선언하거나 API를 호출할 수 있습니다.
Code snippet of the "app.js" file.
// app.js
App ( {
onLaunch : function ( ) {
// API call to get data from the local cache
var logs = wx . getStorageSync ( 'logs' ) || [ ]
logs . unshift ( Date . now ( ) )
wx . setStorageSync ( 'logs' , logs )
} ,
// Get user information
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Call login interface
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
// Global variable
globalData : {
userInfo : null
}
} )app.json은 전체 미니 프로그램의 전역 구성입니다. MP(미니 프로그램) 페이지의 경로, MP 창 스타일을 구성하고 네트워크 시간 초과 및 디버그 구성을 설정할 수 있습니다.
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/logs/logs"
] ,
"window" : {
"backgroundTextStyle" : "gray" ,
"navigationBarBackgroundColor" : "#fff" ,
"navigationBarTitleText" : "Hello World" ,
"navigationBarTextStyle" : "black"
}
}참고: app.json 파일에는 댓글이 허용되지 않습니다.
app.wxss는 미니 프로그램의 전역 스타일 시트입니다. 여기서 공통 스타일 규칙을 선언해야 합니다.
WeChat 빠른 시작의 두 페이지는 다음과 같습니다.
페이지 폴더는 미니 프로그램 페이지를 보유하거나 생성하는 곳입니다. 생성하는 각 페이지 에는 두 개의 파일이 포함되어야 합니다.
만드는 각 페이지에 두 개의 파일을 더 추가할 수 있습니다.
페이지 구성을 위한 .json 파일입니다.
인터페이스 스타일 시트의 .wxss 파일입니다.
규칙: 미니 프로그램의 각 페이지는 네 가지 파일 확장자(js ; json ; wxml ; wxss)로 구성될 수 있지만 이름은 동일해야 합니다.
추가 세부정보: 새 페이지에는 항상 .js 파일과 최소 .wxml 파일이 포함됩니다. .json 파일 확장자는 이 특정 페이지에서 창 구성을 재정의하려는 경우에 사용됩니다. 페이지에 스타일 시트를 추가하려면 .wxss를 추가하세요.
빠른 시작 프로젝트의 각 페이지에서 어떤 일이 발생하는지 살펴보겠습니다.
Code snippet of the "index.js" file.
// index.js
// Get application instance
var app = getApp ( )
Page ( {
data : {
motto : 'Hello World' ,
userInfo : { }
} ,
// Event that redirect user to logs page
Tapped : function ( ) {
console . log ( "tapped" ) ;
wx . navigateTo ( {
url : '../logs/logs'
} )
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
// Call the application instance to get data
app . getUserInfo ( function ( userInfo ) {
// Updates userInfo data
that . setData ( {
userInfo : userInfo
} )
} )
}
} )스니펫 댓글:
Page() 함수에서 호출되어 사용자 정보를 수집합니다.Page() 함수를 등록하고 data: 설정하여 데이터를 뷰에 동적으로 바인딩합니다.Tapped 기능은 현재 사용자를 로그 페이지로 리디렉션합니다.onLoad 함수는 사용자 정보를 가져오고 userinfo 데이터를 업데이트합니다. Code snippet of the "logs.js" file.
// logs.js
var util = require ( '../../utils/util.js' )
Page ( {
data : {
logs : [ ]
} ,
onLoad : function ( ) {
console . log ( wx . getStorageSync ( 'logs' ) )
this . setData ( {
logs : ( wx . getStorageSync ( 'logs' ) || [ ] ) . map ( function ( log ) {
return util . formatTime ( new Date ( log ) )
} )
} )
}
} )스니펫 댓글:
formatTime 호출할 목적으로 util.js가 필요합니다.Page() 함수를 등록하고 data: .onLoad 함수는 wx.getStorageSync('logs') 캐시에서 현재 사용자 로그를 검색합니다 . 그런 다음 util.js 요구 사항에 따라 제공되는 formatTime 으로 로그를 렌더링합니다. Code snippet of the "utils.js" file.
function formatTime ( date ) {
var year = date . getFullYear ( )
var month = date . getMonth ( ) + 1
var day = date . getDate ( )
var hour = date . getHours ( )
var minute = date . getMinutes ( )
var second = date . getSeconds ( )
return [ year , month , day ] . map ( formatNumber ) . join ( '/' ) + ' ' + [ hour , minute , second ] . map ( formatNumber ) . join ( ':' )
}
function formatNumber ( n ) {
n = n . toString ( )
return n [ 1 ] ? n : '0' + n
}
module . exports = {
formatTime : formatTime
}메모:
Utils에는 다른 곳에서 필요할 수 있는 가져온 라이브러리가 저장되어 있습니다(이 예에서는 util.js가 log.js에 필요함). 위의 코드 조각에서는 로그 날짜를 올바르게 표시하기 위해 util.js 에 formatTime 함수가 정의되어 있습니다.
지금까지 각 페이지에 두 개의 레이어가 있다는 사실을 확인했습니다.
논리 레이어(.js): 뷰 레이어에서 트리거되는 이벤트를 수신하면서 데이터를 처리하여 뷰 레이어로 보냅니다.
뷰 계층(.wxml/.wxss): 논리 계층에서 처리된 데이터를 뷰에 표시하고, 뷰 계층의 이벤트를 논리 계층으로 보냅니다.
미니 프로그램 수명 주기를 애플리케이션 주기와 페이지 주기라는 두 가지 주기로 나눌 수 있습니다. App() 라이프 사이클은 미니 프로그램의 시작과 끝 지점 인 반면, Page() 라이프 사이클은 사용자가 미니 프로그램을 탐색할 때 활성화됩니다.
App() 함수는 미니프로그램을 등록하는데 사용됩니다. MP의 수명주기 기능을 지정하는 매개변수로 개체를 사용합니다.
댓글:
onLaunch 기능을 트리거하고 MP를 초기화하는 미니 프로그램을 엽니다.onShow 함수가 실행됩니다.onHide 함수는 현재 사용자가 미니 프로그램을 종료할 때 트리거됩니다. Code snippet of the "App()" life cycle functions.
App ( {
onLaunch : function ( ) {
// Do something when launch.
} ,
onShow : function ( ) {
// Do something when show.
} ,
onHide : function ( ) {
// Do something when hide.
} ,
onError : function ( msg ) {
console . log ( msg )
} ,
globalData : 'I am global data'
} ) WeChat 프레임워크는 App() 의 인스턴스인 getApp() 이라는 전역 함수를 제공합니다.
Code snippet "getApp()" function.
// .js
var appInstance = getApp ( )
console . log ( appInstance . globalData ) // I am global data getApp() 함수는 Page() 함수 내부에서 App() 함수를 정의할 수 없다는 단순한 이유 때문에 유용할 수 있습니다. 앱 인스턴스에 액세스하려면 getApp() 함수를 호출해야 합니다.
Page() 함수는 페이지를 등록하는 데 사용됩니다. 페이지의 초기 데이터, 라이프 사이클 함수, 이벤트 핸들러 등을 지정하는 매개변수로 객체를 받아들입니다.
댓글:
onLoad 함수를 호출합니다.onShow 함수가 호출됩니다.onShow 함수는 onReady 호출하여 뷰를 렌더링합니다.onShow 함수가 뷰를 직접 렌더링합니다.onHide 는 미니 프로그램이 다른 페이지로 이동할 때 트리거됩니다.onUnload 함수는 wx.redirectTo() 및 wx.navigateBack() 사용하여 페이지를 종료할 때 호출됩니다. 또는 현재 페이지가 다시 시작되면 wx.reLaunch . Code snippet of "Page()" life cycle functions.
Page ( {
data : {
text : "This is page data."
} ,
onLoad : function ( options ) {
// Do some initializations when page load.
} ,
onReady : function ( ) {
// Do something when page ready.
} ,
onShow : function ( ) {
// Do something when page show.
} ,
onHide : function ( ) {
// Do something when page hide.
} ,
onUnload : function ( ) {
// Do something when page close.
} ,
// Event handler
viewTap : function ( ) {
this . setData ( {
text : 'Set some data.'
} )
}
} )
App() 수명 주기가 완료되면 처음으로 onLoad 호출하여 페이지가 로드되고 한 번만 호출됩니다.
미니 프로그램이 백그라운드(앱 라이프사이클)에서 포그라운드(페이지 라이프사이클)로 실행될 때 먼저 App() onShow 함수를 호출한 다음 포그라운드로 전환할 때 Page() onShow 함수를 호출합니다.
위챗 추천:
App() 함수는 재사용할 수 없으며 app.js 에 한 번 등록해야 합니다.getCurrentPages() 페이지가 아직 생성되지 않은 경우 onLaunch 호출하지 마세요.getApp() 사용하면 App() 인스턴스를 얻을 수 있지만 수명 주기 함수는 App() 함수 호출을 시도하지 않습니다. 미니 프로그램 설정은 간단하며 사용자 정의가 필요할 때 시간과 좌절감을 줄이도록 설계되었습니다.
WeChat은 app.json 구성을 다섯 부분으로 나눕니다.
이 부분에서는 전체 app.json 설정 예제를 분석합니다 .
Code snippet "app.json complete setup" example
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon" ,
] ,
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true
} ,
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
} app.json 의 pages 역할은 미니 프로그램의 모든 경로를 정의하는 것입니다. 이 항목의 구성은 필수 이며 문자열 배열을 사용합니다 . 상위 페이지 폴더 내의 각 하위 폴더와 파일은 라우팅 경로 에 해당합니다.
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon"
]
} 팁: "pages" 에 경로 경로를 추가할 때마다 IDE는 방금 생성한 경로에 해당하는 폴더와 파일을 자동으로 생성합니다 .
WeChat 프레임워크는 여러 라우팅 논리를 제공합니다.
라우팅 모드 설명:
초기화: 미니 프로그램이 시작되면 onLoad 및 onShow 함수에 의해 첫 번째 페이지가 로드됩니다.
새 페이지 열기: 새 페이지를 열면 현재 페이지가 숨겨지고 wx.navigateTo 를 사용하여 다른 페이지로 이동합니다. 첫 번째 페이지는 onHide 함수 호출로 숨겨지고 onLoad 및 onShow 호출을 통해 다른 페이지로 건너뜁니다. 
페이지 리디렉션: onUnload를 호출하여 현재 페이지를 닫고 onLoad 및 onShow 함수를 호출하는 wx.redirectTo 사용하여 앱 내 페이지로 이동합니다.
페이지 반환: onUnload 현재 페이지를 호출하고 onLoad 함수를 호출한 후 onShow 호출하여 대상 페이지를 표시합니다.
Reloading, wx.reLaunch : 모든 페이지를 닫고 현재 페이지를 다시 로드합니다. * 특정 안드로이드 기기에서는 작동하지 않습니다.
탭 전환, wx.switchTab : 한 tabBar 페이지에서 다른 페이지로 이동하고 onUnload, onHide 및 onShow를 사용하여 tabBar가 아닌 다른 모든 페이지를 닫거나 숨깁니다. 탭 전환에 대해 가능한 모든 시나리오를 살펴보세요.
탭 전환, 탐색 제한:
위챗 추천:
navigateTo , redirectTo tabBar가 아닌 페이지만 열 수 있습니다. - switchTab tabBar 페이지만 열고 표시할 수 있습니다. - reLaunch 모든 페이지에 사용할 수 있습니다. getCurrentPages() : 이 함수는 현재 페이지 스택의 인스턴스를 가져오는 데 사용됩니다. 페이지 스택 순서에 따라 배열로 제공됩니다. 배열의 첫 번째 항목은 첫 번째 페이지이고 마지막 항목은 현재 페이지입니다.
tabBar 이름에서 알 수 있듯이 상단 또는 하단 탭바를 구성하는 항목입니다. tabBar는 최소 2개, 최대 5개의 탭을 수용하는 tabBar 입니다 .
Code snippet of the "app.json" file.
{
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
}속성 표시:
tabBar list 키를 사용하려면 배열의 각 요소에 개체가 필요합니다.
List 속성 값은 다음과 같습니다.
TabBar 속성 설명: 
위챗 추천:
tabBar 위치를 맨 위로 설정하면 아이콘이 표시되지 않습니다.tabBar 의 아이콘 크기 제한은 40kb, 81px*81px입니다.창 항목은 미니 프로그램 제목과 공통 창 스타일을 설정하는 데 사용됩니다.
Code snippet of the "app.json" file.
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true ,
}창 속성 설명:
| 기인하다 | 유형 | 기본값 | 설명 |
|---|---|---|---|
| 네비게이션바배경색 | 16진수 색상 | #000000 | 탐색 표시줄 배경색 |
| 탐색바텍스트스타일 | 끈 | white | 탐색 표시줄 제목 색상, black 또는 white |
| 탐색바제목텍스트 | 끈 | 탐색 표시줄 제목 | |
| 네비게이션스타일 | 끈 | default | 탐색 표시줄 스타일, default 또는 custom . 탐색 표시줄 스타일을 사용자 정의하려면 custom 사용하십시오. |
| 배경색상 | 16진수 색상 | #ffffff | 응용프로그램 배경색입니다. 예: 당겨서 새로 고칠 때 표시되는 배경색은 <page> 요소의 색상에 영향을 주지 않습니다. |
| 배경텍스트스타일 | 끈 | dark | 당겨서 텍스트 스타일을 dark 거나 light 새로 고침 |
| 배경색상상단 | 끈 | #ffffff | 창 상단의 배경색입니다. iOS에서만 지원됩니다. |
| 배경색상하단 | 끈 | #ffffff | 창 하단 부분의 배경색입니다. iOS에서만 지원됩니다. |
| 활성화PullDownRefresh | 부울 | false | 앱 전체에서 당겨서 새로 고침을 활성화 또는 비활성화합니다. |
| onReachBottom거리 | 숫자 | 50 | onReachBottom() 콜백이 트리거되어야 하는 페이지 하단으로부터의 거리를 설정합니다. |
| 페이지방향 | 끈 | portrait | 화면 회전 지원을 설정합니다. auto , portrait 및 landscape 지원합니다. |
app.json 구성 파일의 window 에서 pageOrientation 을 사용하여 애플리케이션 기본 방향을 구성할 수 있습니다. 이 속성은 3가지 값을 지원합니다.
auto 으로 설정하세요.portrait 로 설정하세요.landscape 로 설정하세요. "enablePullDownRefresh": true 위와 같이 전역 app.json 에서 구성되어야 하며 그런 다음 미니 프로그램 페이지에서 onPullDownRefresh() 호출할 수 있습니다.
Code snippet of the "Enable pull down refresh in a page" file.
// .js
Page ( {
// Pull down the trigger event
onPullDownRefresh ( ) {
// Stop the dropdown refresh
wx . stopPullDownRefresh ( )
}
} ) WeChat은 각 페이지 내 상단 탐색 표시줄 의 제목을 변경할 수 있는 기능을 제공합니다.
Code snippet of the "change navbar title" file.
// .js
Page ( {
// Loading spinner when page loads
onload : function ( ) {
wx . showNavigationBarLoading ( )
} ,
// Change navigation bar title
onShow : function ( ) {
wx . setNavigationBarTitle ( {
title : 'My new navabar title' ,
success : function ( res ) {
console . log ( res )
}
} )
}
} )네트워크 시간 초과는 다양한 네트워크 요청에서 제공될 수 있습니다. 더 자세히 알고 싶다면 WeChat 문서 링크를 참조하세요.
다음은 WeChat 문서에 대한 링크입니다.
WXML 은 HTML과 유사한 WeChat 마크업 언어입니다. 이는 기본 구성 요소 라이브러리 와 이벤트 시스템을 결합하여 동적 페이지를 구축합니다.
WeChat 이벤트 시스템은 뷰 계층에 대한 논리적 응답을 처리하는 클래식 Javascript 이벤트처럼 작동합니다.
아래 표에는 개발 시 WXML과 HTML 간의 중요한 차이점이 나열되어 있습니다 .
<block> 에 대한 추가 설명 :
<block> 구성 요소가 아니며 단지 패키징 요소 일 뿐이며 페이지에서 렌더링을 수행하지 않고 컨트롤 속성만 허용합니다 .
참고: 모든 구성 요소와 속성은 소문자입니다.
미니 프로그램 프레임워크에서는 개발자가 DOM을 사용하여 WXML 요소를 제어하는 것을 허용하지 않습니다. 대신 데이터 바인딩 방법을 통해 뷰 레이어(.wxml 파일)를 업데이트합니다 .
WeChat 요구 사항을 준수하려면 Page() 함수 내에서 data 속성을 JSON 형식으로 초기화해야 합니다. 데이터 바인딩 기술을 사용하면 뷰 레이어 내에서 데이터를 동적으로 업데이트할 수 있습니다.
Page() 함수의 맨 위에서 data 초기화하는 것이 좋습니다.
Code snippet "data binding" example.
<!-- .wxml -->
< view > {{text}} </ view >
< view > {{array[0].msg}} </ view > // .js
Page ( {
data : {
text : 'init data' ,
array : [ { msg : '1' } , { msg : '2' } ]
}
} 뷰 레이어로 전달되는 동적 data: 해당 Page() 함수의 데이터 속성에서 가져옵니다.
데이터 바인딩 구문: 데이터 바인딩은 Mustache 구문(이중 중괄호)을 사용하여 변수를 래핑합니다. 이 구문은 논리 없는 템플릿 엔진 분석입니다. 한마디로 매우 편리하고 사용하기 쉽습니다!
WeChat은 데이터 바인딩 사용과 관련하여 많은 가능성을 제공합니다. 구성요소 속성, 속성, 문자열 연산, 산술 연산, 데이터 경로 및 배열에 데이터 바인딩을 사용할 기회가 있습니다.
wx:for 제어 속성은 논리 계층(.js 파일)의 배열을 바인딩하고 이를 반복하며 데이터를 할당합니다.
Code snippet "wx:for" example.
<!-- .wxml -->
< view wx:for =" {{array}} " >
{{index}}: {{item.message}}
</ view > // .js
Page ( {
data : {
array : [ {
message : 'foo'
} , {
message : 'bar'
} ]
}
} ) <view wx:for> 와 유사하게 <block wx:for> 사용하여 여러 줄의 블록을 렌더링할 수 있습니다. (위 WXML 테이블의 블록을 참조하십시오).
Code snippet "block wx:for" example.
<!-- .wxml -->
< block wx:for =" {{array}} " wx:for-item =" array-item " wx:key =" key " >
< view class =" card " >
< view class =" card-description " >
</ view >
</ view >
</ block >위 코드에 대한 자세한 내용은 이 Github 저장소를 참조하세요.
추가 리소스:
wx:for 와 유사하게 wx:if 는 조건문을 정의하고 블록을 렌더링할지 여부를 결정하는 데 사용됩니다.
Code snippet "wx:if" example.
<!-- .wxml -->
<!-- Add additional conditions wx:elif ; wx:else -->
< view wx:if =" {{length > 5}} " > 1 </ view >
< view wx:elif =" {{length > 2}} " > 2 </ view >
< view wx:else > 3 </ view > // .js
Page ( {
data : {
length : 10
}
} ) 조건문 블록 내에 두 개 이상의 태그를 표시하려면 <block wx:if> 사용할 수 있습니다.
<!-- .wxml -->
< block wx:if =" {{true}} " >
< view > view1 </ view >
< view > view2 </ view >
</ block > wx:if WeChat 문서에서 더 자세히 알아보세요.
템플릿을 사용하면 미니 프로그램의 다른 파일에서 여러 번 재사용하려는 코드 조각을 정의할 수 있습니다.
WXML 템플릿 항목에는 자체 범위가 있으며 데이터를 사용하여 전달할 수만 있습니다.
먼저 템플릿을 선언하려면 이름을 정의해야 합니다.
Code snippet "template" example.
<!-- .wxml -->
< template name =" msgItem " >
< view >
< text > {{index}}: {{msg}} </ text >
< text > Time: {{time}} </ text >
</ view >
</ template >
<!-- Call the template -->
< template is =" msgItem " data =" {{item}} " /> 나중에 동일한 파일 내에서 템플릿을 호출하려면 is 속성 과 템플릿 이름을 값으로 사용하여 필수 템플릿을 선언하세요. 그리고 data 속성을 사용하여 템플릿에 데이터를 전달하는 것을 잊지 마세요.
// .js
Page ( {
data : {
item : {
index : 0 ,
msg : 'this is a template' ,
time : '2017-05-18'
}
}
} ) 새 파일에 이미 정의된 템플릿을 선언하려면 먼저 템플릿을 가져와야 합니다.
Code snippet "define a template in a specific file" exemple
<!-- item.wxml -->
< template name =" item " >
< text > {{text}} </ text >
</ template > Code snippet "import and call the template in index.wxml" exemple
<!-- index.wxml -->
< import src =" item.wxml " />
< template is =" item " data =" {{text: 'forbar'}} " />WeChat 문서에 대한 자세한 내용은 여기를 참조하세요.
데이터 초기화 및 수명주기 기능 외에도 프레임워크에서는 이벤트 처리 기능을 정의할 수 있습니다.
WXML 요소(이벤트 핸들러)는 이벤트를 트리거하고 논리 계층은 이벤트 핸들러를 바인딩하여 이벤트 객체를 매개변수로 받습니다.
Code snippet "event handler" example.
<!-- .wxml -->
< button type =" primary " bindtap =" add " > Incrementation: {{count}} </ button > // .js
Page ( {
data : {
count : 1
} ,
add : function ( e ) {
this . setData ( {
count : this . data . count + 1
} )
}
} ) setData() : 이 함수는 다음에 뷰 계층으로 전송될 논리 계층 내의 데이터를 업데이트합니다 . setData() 함수는 객체를 매개변수로 받고 this.data 데이터 경로로 사용하여 키 값을 업데이트합니다.
바인딩 이벤트에는 다양한 종류가 있으며 대부분의 구성 요소에는 바인딩 이벤트에 대한 자체 정의가 있습니다.
구성요소 바인딩 이벤트:
bindsubmit .bindinput 입니다.bindscroll . Code snippet "form binding event" example.
<!-- form.wxml -->
< form bindsubmit =" bindFormSubmit " >
<!-- Form inputs -->
< button type =" primary " form-type =" submit " > Submit </ button >
</ form > // form.js
// Form submission function
Page ( {
bindFormSubmit : function ( e ) {
// Treatment
}
} )클래식 바인딩 이벤트:
bind+event_typecatch+event_type Code snippet "data binding illustration" example.
< button bindtap =" ontap " type =" primary " > Tap < button /> Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
}
} ) 사용되는 두 가지 일반적인 바인딩 이벤트는 bind+event_type 및 catch+event_type 입니다. catch 이벤트는 버블링 이벤트를 방지하는 이벤트입니다.
버블링 이벤트 개념: 자바스크립트가 아닌 사용자의 경우 다른 요소에 중첩된 요소 에서 이벤트가 발생할 때 버블링 이벤트를 정의할 수 있습니다. 상위 노드와 중첩 요소는 모두 해당 특정 이벤트에 대한 이벤트 핸들러로 등록 됩니다. 중첩된 요소의 상위 노드는 이벤트가 상위 요소로 버블링되는 것을 방지 하는 catch+event_type 사용해야 합니다.
Code snippet "counteract bubbling effect with catchtap" example.
<!-- .wxml -->
< view id =" outter " bindtap =" handleTap1 " >
outer view
< view id =" middle " catchtap =" handleTap2 " >
middle view
< view id =" inner " bindtap =" handleTap3 " >
inner view
</ view >
</ view >
</ view > // .js
Page ( {
handleTap1 : function ( e ) {
console . log ( 'outter' )
} ,
handleTap3 : function ( e ) {
console . log ( 'inner' )
} ,
handleTap2 : function ( e ) {
console . log ( 'middle' )
}
} )요소를 중첩하고 바인딩하는 요소의 상위 노드를 표시하고 싶지 않을 때 주로 사용됩니다.
Code snippet "tap and longtap event binding" example.
<!-- index.wxml -->
< button bindtap =" ontap " type =" primary " > Tap < button />
< button bindlongtap =" onlongtap " type =" primary " > Long tap < button /> // index.js
Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
} ,
onlongtap : function ( ) {
console . log ( 'longtap' ) ;
}
} )미니프로그램 공유를 활성화하는 실용적인 팁을 알려드립니다. WeChat은 미니 프로그램을 공유하는 두 가지 방법을 제공합니다.
페이지 ... 상단 을 클릭하면 나타나는 드롭다운 메뉴 내에서 앞으로 버튼을 활성화할 수 있습니다.
미니 프로그램 페이지 내에 앞으로 버튼을 만듭니다 . 공유 프로세스를 더욱 사용자 친화적으로 만듭니다.
두 변형 모두에서 프레임워크는 MP 헤더의 스크린샷 이 포함된 미니 프로그램 카드를 자동으로 전달합니다.
이 버튼을 활성화하려면 onShareAppMessage 라는 Page() 함수를 사용해야 합니다.
Code snippet "Enable the forward button of the drop-down menu" example.
// index.js
onShareAppMessage : function ( ) {
return {
title : 'Le Wagon coding school' ,
path : 'pages/index/index'
}
} ,이 기능에서는 앞으로 카드 상단에 표시될 제목 과 현재 페이지 경로를 정의해야 합니다. 제목 추가를 잊어버린 경우 WeChat은 기본적으로 제목(미니 프로그램 이름)을 추가합니다.
제한사항: 이 경우 정의할 수 있는 유일한 것은 onShareAppMessage 이벤트 입니다. 앞으로 버튼은 프레임워크 자체에 의해 생성 됩니다.
이 기능을 사용하면 개발자는 버튼 속성 open-type 과 해당 값 'share' 를 사용하여 페이지 내에 특정 앞으로 버튼을 만들 수 있습니다.
Code snippet "Create a forward button within the page" example.
<!-- about.wxml -->
< view bindtap =" onShareAppMessage " >
< button class =" share-btn " open-type =" share " type =" primary " > Share </ button >
</ view > 첫 번째 경우와는 달리 onShareAppMessage 함수를 트리거하는 이벤트 핸들러를 생성 해야 합니다. 이 함수는 wx.showShareMenu 호출하고 withShareTicket 매개변수로 전달합니다.
// about.js
Page ( {
onShareAppMessage : function ( ) {
console . log ( 'share' )
wx . showShareMenu ( {
withShareTicket : true
} )
}
} ) 참고: 두 변형 모두 Page() 함수를 사용하고 있으며 이는 함수를 선언한 특정 페이지를 공유하고 있음을 의미합니다.
WeChat은 친절 하고 효율적 이며 일관된 사용자 경험을 구축하는 것을 목표로 합니다. 이를 실현하기 위해 WeChat 공식 디자인 팀은 WeUI 저장소를 제공합니다. 이 기본 프런트엔드 라이브러리 (WeUI)는 WeChat 기본 시각적 경험과 일치합니다. WeUI는 Bootstrap과 유사한 WeChat 프런트 엔드 라이브러리로 이해될 수 있습니다. 여기에는 버튼, 셀, 대화 상자, 진행률, 토스트, 기사, 액션 시트, 아이콘 등과 같은 대규모 구성 요소 세트가 포함됩니다.
유용한 Github 저장소:
npm 통해 로컬로 WeUI 저장소를 다운로드하세요 .
npm install weui-wxss
다운로드한 코드에는 WeUI 소스 코드 와 WeUI 기반 미니 프로그램 샘플이 포함되어 있습니다.
WeChat IDE에서 WeUI 미니 프로그램 샘플을 열어보겠습니다.
미니 프로그램에서 WeUI 스타일을 사용할 수 있도록 app.wxss 에서 WeUI 스타일을 가져옵니다 .
@import "style/weui.wxss" ;
WeChat 디자인 지침 에 대한 자세한 내용은 여기에서 전체 문서를 참조하세요.
WXSS에는 CSS의 거의 모든 기능이 있습니다. app.wxss 에 정의된 스타일 시트는 각 페이지에서 식별되는 공통 스타일 규칙입니다. 특정 페이지에 정의된 스타일 시트는 현재 페이지에서만 작동하는 로컬 스타일이므로 app.wxss 에 사용된 것과 동일한 선택기를 덮어씁니다 . CSS와 비교한 WXSS에는 두 가지 주요 차이점이 있습니다.
WXSS는 rpx (반응형 픽셀)를 단위로 사용합니다. 화면 너비에 따라 픽셀을 조정할 수 있습니다. 기존 px 단위를 계속 사용할 수 있습니다(단, WeChat 방식은 아님). (1rpx = 0.5px ; 1px = 2rpx)
아웃바운드 스타일 시트를 가져오려면 @import 문 뒤에 상대 경로 와 ; 성명 끝에.
Code snippet "@import" example.
/* app.wxss*/
@import "outbound.wxss" ;WeChat 프레임워크는 계단식 선택기와 같은 많은 표준 CSS 선택기를 지원할 수 없습니다.
지원되는 선택기:
위챗 추천:
WeChat 프레임워크는 개발자에게 다양한 기본 구성 요소 세트를 제공하며 전체 구성 요소 목록은 여기에 있습니다.
<navigator> HTML의 앵커입니다. 한 페이지에서 다른 페이지로 연결하는 데 사용됩니다. navigator 요소의 가장 중요한 속성은 open-type 입니다.
Code snippet "navigator" example.
<!-- .wxml -->
< view class =" btn-area " >
< navigator url =" /pages/index/index " hover-class =" navigator-hover " > text </ navigator >
< navigator url =" /pages/form/form " open-type =" redirect " hover-class =" other-navigator-hover " > text </ navigator >
< navigator url =" /pages/index/index " open-type =" switchTab " hover-class =" other-navigator-hover " > tab switching </ navigator >
</ view >네비게이터 속성 설명:
개방형 값 설명:
WeChat 문서의 선택기 구성 요소는 기본 선택기인 클래식 선택기 , 시간 선택기 및 날짜 선택기 의 세 가지 선택기로 나뉩니다.
아래 사용 사례는 날짜 선택기를 기반으로 하지만 다른 선택기에서도 논리는 동일하게 유지됩니다.
Code snippet "date picker" example.
<!-- .wxml -->
< picker mode =" date " value =" {{date}} " start =" 2015-09-01 " end =" 2020-09-01 " bindchange =" bindDateChange " >
< view class =" picker " >
Now the date is {{date}}
</ view >
</ picker > // .js
Page ( {
data : {
date : '2017-05-20'
} ,
bindDateChange : function ( e ) {
this . setData ( {
date : e . detail . value
} )
}
} )날짜 선택기 속성:
스위치는 켜짐과 꺼짐의 두 가지 상태가 있는 시각적 토글입니다.
Code snippet "switch" example.
<!-- .wxml -->
< view class =" body-view " >
< switch checked bindchange =" switch1Change " />
< switch bindchange =" switch2Change " />
</ view > // .js
Page ( {
switch1Change : function ( e ) {
console . log ( 'switch1 a change event occurs with the value' , e . detail . value )
} ,
switch2Change : function ( e ) {
console . log ( 'switch2 a change event occurs with the value' , e . detail . value )
}
} )스위치 속성:
알림은 사용자에게 알리기 위해 간단하고 자동 만료되는 구성 요소를 표시하는 데 사용되는 비모달 요소입니다.
아래 코드 조각에서는 토스트가 어떻게 작동하고 표시되는지 보여주기 위해 양식 제출을 위조하고 있습니다.
Code snippet "spinner btn and toast" example.
<!-- .wxml -->
< form bindsubmit =" bindFormSubmit " >
< button type =" primary " form-type =" submit " loading =" {{loading}} " > Send </ button >
</ form >위의 코드 조각에서는 양식을 제출할 목적 으로 동적 버튼을 만들었습니다. 버튼을 클릭하면 로딩 스피너에 의해 버튼이 애니메이션됩니다.
그런 다음 wx.showToast API를 사용하여 토스트를 표시하여 사용자에게 알립니다.
Page ( {
data : {
loading : false
} ,
bindFormSubmit : function ( e ) {
// Enable loading animation on send btn
this . setData ( {
loading : ! this . data . loading
} )
// Loading toast
wx . showToast ( {
title : 'Sending...' ,
icon : 'loading' ,
duration : 1500
} )
}
} )모달 상자를 사용하면 페이지 위에 작은 요소를 오버레이할 수 있습니다. 모달 상자의 주요 이점은 기존 창 팝업이나 페이지 다시 로드를 사용할 필요가 없다는 것입니다.
모달 상자가 일반적으로 사용되는 5가지 상황 범주가 있습니다.
Code snippet "modal to inform" example.
wx . showModal ( {
title : 'Modal title' ,
content : 'Modal content ' ,
confirmText : "Ok" ,
showCancel : false ,
success : function ( res ) {
console . log ( 'success' )
}
} )모달 매개변수:
map 구성 요소는 기본 구성 요소이며 긴 속성 목록을 가지고 있으므로 주요 속성을 살펴보겠습니다. 자세한 내용은 WeChat 문서 링크를 참조하세요.
map 속성 목록:
Code snippet "map component" example.
< map id =" map " longitude =" 113.324520 " latitude =" 23.099994 " scale =" 14 " controls =" {{controls}} " bindcontroltap =" controltap " markers =" {{markers}} " bindmarkertap =" markertap " polyline =" {{polyline}} " bindregionchange =" regionchange " show-location style =" width: 100%; height: 300px; " > </ map >WeChat이 API를 통해 제공하는 위치 기반 서비스를 살펴보려면 위키의 위치 기반 서비스 부분을 참조하세요.
위챗 추천:
wx.getLocation type gcj02 로 지정해야 합니다. 이 섹션에서는 앱 데이터를 유지하고 데이터베이스에서 데이터를 가져오려는 경우 따라야 하는 다양한 단계를 설명하는 것을 목표로 합니다. 우리는 초보자를 위한 설치의 단순성을 위해 Leancloud.cn을 선택했습니다.
먼저 몇 가지 맥락을 살펴보겠습니다. 아래 예는 간단한 양식을 통해 피드백을 수집하는 것을 목표로 하는 미니 프로그램을 기반으로 합니다. 이 미니 프로그램은 Leancloud.cn에서 수집된 데이터를 유지합니다. DB에 저장된 데이터를 가져와서 표시하는 방법을 설명하겠습니다. 이 두 번째 섹션(데이터 가져오기)을 설명하기 위해 Leancloud에 저장된 모든 리뷰를 표시하는 새 페이지를 만들었습니다.
이 튜토리얼을 만드는 데 사용된 프로젝트의 Github 저장소는 다음과 같습니다.
명세서:
Code snippet "create a form" example.
<!-- pages/form/form.wxml -->
< form bindsubmit =" bindFormSubmit " >
< view > About the workshop </ view >
< view > Generally how was this workshop? </ view >
< text > Hints: takeaway, speed, time, location, people... </ text >
< view >
< textarea name =" review " maxlength =" -1 " />
</ view >
<!-- Refer to the Github repository above if you want the complete form -->
< button type =" primary " form-type =" submit " > Send </ button >
</ form >위와 같이 폼의 구조가 생성되었다면 다음으로 폼 제출에 의해 발생하는 이벤트를 생성 해야 합니다.
//pages/form/form.js
Page ( {
data : {
loading : false ,
} ,
// Form Submission
bindFormSubmit : function ( e ) {
// Local storage
var review = e . detail . value . review
// ...
}
} ) 로컬 저장소: bindFormSubmit 함수에서는 양식의 사용자 입력을 로컬에서 수집할 수 있는지 테스트할 목적으로 사용자 입력을 로컬 변수에 할당했습니다.
설치를 시작하기 전에 개발 중인 경우 WeChat IDE 내 프로젝트 인터페이스의 마지막 확인란을 선택하여 도메인 이름을 화이트리스트에 추가하세요. 특정 디버깅 요구 사항이 있는 경우 이 Leancloud 튜토리얼을 따를 수 있습니다.
Leancloud 설정을 시작하려면 먼저 Leancloud에서 계정을 만드세요.
이제 미니 프로그램에서 Leancloud를 설치하고 초기화할 준비가 되었으므로 해당 설명서에 따라 2단계 프로세스를 진행할 수 있습니다.
appId 및 appKey 추가하여 앱을 초기화합니다. // app.js
// Require Leancloud library (the av-weapp-min.js file you just add).
const AV = require ( './utils/av-weapp-min.js' ) ;
// Initialization of the app
AV . init ( {
appId : 't6hUVJfOwjHuWXuD9OE06rxxxxxxxxxxxx' ,
appKey : 'HndT17mJ7wAIxsv8uxxxxxxxxxx' ,
} ) ;분실한 경우 해당 프로젝트의 Github 저장소를 참조하세요.
먼저 model 이라는 새 폴더를 만들고 이 폴더에 form.js 파일을 추가합니다 . 유지하려는 개체의 종류(이 경우 양식)에 따라 파일 이름을 지정했습니다. 이 단계는 필수는 아니지만 파일을 정리된 상태로 유지하는 데 도움이 됩니다.
객체를 생성해 보겠습니다. 방금 생성한 form.js 파일에서 util.js 에 설치한 av-weapp-min.js를 요구하고 이를 AV 상수에 할당합니다. 그런 다음 Form 개체를 인스턴스화합니다.
Code snippet "require Leancloud and create an object" example.
// model/form.js
const AV = require ( '../utils/av-weapp-min.js' ) ;
class Form extends AV . Object {
}
// Register object
AV . Object . register ( Form , 'Form' ) ;
// Export object
module . exports = Form ; 이제 Form 개체를 인스턴스화했으므로 논리 계층(여기서는 form.js)의 데이터를 캡슐화하고 양식 제출 후 사용자를 리디렉션하는 양식 개체를 만듭니다 .
Code snippet "bindFormSubmit function" example.
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const form = require ( '../../model/form.js' ) ;
// pages/form/form.js
bindFormSubmit: function ( e ) {
// Local storage
console . log ( e )
var review = e . detail . value . review
// ...
// Leancloud permissions
var acl = new AV . ACL ( ) ;
acl . setPublicReadAccess ( true ) ;
acl . setPublicWriteAccess ( true ) ;
// Leancloud storage
setTimeout ( function ( ) {
new Form ( {
review : review
// ...
} ) . setACL ( acl ) . save ( ) . catch ( console . error ) ;
// Redirect user
wx . reLaunch ( {
url : '/pages/wagon/wagon?form=1'
} ) ;
} , 2000 ) ;
}
} )코드 조각 보고:
binFormSubmit 함수 내에서 Leancloud가 우리가 생성하고 유지하려는 객체를 통해 읽고 쓸 수 있도록 허용 하는 권한을 추가했습니다.Form 객체에 데이터를 캡슐화 하고 양식이 제출될 때 사용자를 리디렉션하는 setTimeout 함수를 정의했습니다. 참고: setACL(acl) 은 Leancloud 내장 속성입니다.
지금까지 모든 것이 미니 프로그램 내에서 수행되며, 수행해야 할 일은 LeanCloud 대시 보드 내에서 수집 된 데이터를 투영하는 것입니다.
Form 클래스와 같이 만든 클래스 객체를 추가하십시오.수집 된 데이터가 LeanCloud 대시 보드 내에 지속되어 있는지 확인하십시오 .
먼저이 섹션의 배경을 상기시켜 드리겠습니다. 우리는 새 페이지에 Leandcloud에서 수집하고 지속 된 리뷰 목록을 표시하고 싶습니다. 나는 당신이 튜토리얼의 첫 번째 섹션을 따랐다고 가정합니다 (위의 참조를 놓친 경우).
명세서:
review 라는 새 페이지를 만듭니다.새 검토 페이지와 검토 페이지로 리디렉션하는 버튼을 만들어 봅시다. ( 팁 : app.json 에 경로 경로를 추가하면 프레임 워크가 새 페이지 폴더와 파일 자체를 만듭니다).
<!-- index.wxml -->
<!-- CTA redirects to review page -->
< view class =" cta-margin " >
< navigator url =" /pages/review/review " class =" btn-index " > Reviews </ navigator >
</ view >다음 단계는 LeanCloud에 저장된 데이터를 가져와 표시하는 것 입니다.
Code snippet "fetch data stored on Leancloud and displays it" example.
<!-- review.wxml -->
< block wx:for =" {{forms}} " wx:for-item =" form " wx:key =" objectId " >
< text data-id =" {{form.objectId}} " >
{{form.review}}
</ text >
< text >
- {{form.name}}
</ text >
</ block > 위에서 우리는 WX를 사용하여 목록 렌더링 블록을 만들었습니다 wx:for 해당 리뷰를 작성하는 사람의 각 검토 및 이름을 표시합니다.
// pages/review/review.js
// Require leancloud and object
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const Form = require ( '../../model/form.js' ) ;
// Fetch data from Leancloud
Page ( {
data : {
forms : { }
} ,
onReady : function ( ) {
new AV . Query ( 'Form' )
. descending ( 'createdAt' )
. find ( )
. then ( forms => this . setData ( { forms } ) )
. catch ( console . error ) ;
} ,
} )코드 스 니펫 브리핑 :
AV 객체에 대한 쿼리를 수행하고 있습니다.forms 배열을 설정하여 완료합니다.이 유스 케이스에서는 로컬로 수집 한 데이터를 LeanCloud에 저장하는 방법 과 LeanCloud에서 저장된 데이터를 가져 오는 방법을 보았습니다.
LeanCloud 문서를 읽거나 Github 리포지토리 인 LeanCloud가 만든 Leantodo 미니 프로토리를 확인하는 것이 좋습니다.
생산 중일 때는 WeChat 플랫폼 내에서 LeanCloud 도메인 이름을 구성 해야합니다. 이 LeanCloud 튜토리얼을 따르십시오.
wx.getUserInfo 통해 액세스 할 수있는 모든 사용자 정보 :
wx . getUserInfo ( {
success : function ( res ) {
var userInfo = res . userInfo
var nickName = userInfo . nickName
var avatarUrl = userInfo . avatarUrl
var gender = userInfo . gender //sex => 0: unknown ; 1: male ; 2：female
var province = userInfo . province
var city = userInfo . city
var country = userInfo . country
}
} ) Wechat "QuickStart"(Wechat Boilerplate)는 app.js 파일에서 getUserInfo 함수를 제공합니다. 이름에서 알 수 있듯이이 기능은 사용자 정보를 얻기 위한 것입니다. 이 기능을 단계별로 살펴 보겠습니다.
일반 설명:
getUserInfo 함수에는 매개 변수 CB가 있으며 기능이기도합니다.globalData 의 userInfo null이 아닌 경우 getUserInfo 함수의 If 블록이 전달됩니다.userInfo null이고 getUserInfo 함수는 로그인 인터페이스를 호출합니다. // app.js
App ( {
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Login interface call
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
globalData : {
userInfo : null
}
} ) 첫 번째 경우, userInfo form globalData 는 null이 아닙니다
IF 조건 명령문은 getUserInfo 얻기 위해 통과 한 CB 인수가 함수 유형인지 판단하는 것을 목표로하며, 그렇다면 userInfo 통과합니다.
CB 매개 변수가 함수인지 어떻게 알 수 있습니까?
// index.js
var app = getApp ( )
Page ( {
data : {
userInfo : { } ,
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
app . getUserInfo ( function ( userInfo ) {
that . setData ( {
userInfo : userInfo
} )
} )
}
} index.js 의이 onLoad 함수를 살펴 보겠습니다
onLoad 함수는 앱 인스턴스에서 getUserInfo 함수를 호출합니다.userInfo 업데이트하는 매개 변수로 함수를 정의합니다 .globalData 로 업데이트 된 userInfo 전달하십시오.두 번째 경우, userinfo는 null입니다
userInfo 인 경우 null getUserInfo 함수는 로그인 인터페이스를 호출하는 else 문을 반환합니다.getUserInfo 호출되고 위에서 본 if 블록 역할을합니다. 현재 사용자가 이미 로그인되면 onLaod 함수를 호출하는 Index.js 페이지를 통해 globalData 에 사용자 정보가 할당됩니다 . 그런 다음 동일한 논리가 적용됩니다.
WeChat 미니 프로그램에는 API에 캐시 메커니즘이 있습니다. 실제로, 각 미니 프로그램에는 자체 로컬 캐시 스토리지가 있습니다.
알림 : 캐시 스토리지는 빠르게 액세스하려는 데이터를 저장하는 데 사용됩니다. 요청이 DB를 요청하는 데 사용되는 원래 서버에 비해 클라이언트에 가까운 로컬 캐시에서 요청이 충족되므로 사용자 대기 시간이 줄어 듭니다 .
캐시 스토리지는 캐시에 데이터를 저장하는 두 가지 종류의 방법을 제공합니다.
wx.setStorage : wx . setStorage ( { key : 'name' , data : 'Thibault' } ) ; wx.setStorage 저장 키 및 데이터를 지정하여 저장 할 키 값을 지정하는 키인 JSON으로 매개 변수를 빌드합니다.
wx.setStorageSync : wx . setStorageSync ( 'name' , 'Thibault' ) ; wx.setStorageSync 구문이 더 간단하고 매개 변수가 직접 전달됩니다. 들어오는 콜백 기능을 통해 데이터를 얻을 수 있습니다.
WeChat은 캐시에 세 가지 주요 작업을 제공합니다.
wx.setStorage 또는 wx.setStorageSync 에 데이터를 저장하십시오.wx.getStorage 또는 wx.getStorageSync 에서 데이터를 읽으십시오.wx.clearStorage 또는 wx.clearStorageSync 의 명확한 데이터.wx.removeStorage 또는 wx.removeStorageSync . Code snippet "set cache (synchronous method)" exemple .
<!-- index.wxml -->
< input style =" input " placeholder =" Input data " bindinput =" inputEvent " />
< button type =" warn " bindtap =" saveToCache " > Save data to cache </ button >
< button type =" primary " bindtap =" jumpToPage " > Jump to another page </ button > // index.js
Page ( {
data : {
inputInfo : ''
} ,
jumpToPage : function ( ) {
wx . navigateTo ( {
url : "../show/show"
} ) ;
} ,
inputEvent : function ( e ) {
console . log ( e . detail . value )
this . setData ( {
inputInfo : e . detail . value
} )
} ,
saveToCache : function ( ) {
wx . setStorage ( { key : 'inputInfo' , data : this . data . inputInfo ,
success : function ( res ) {
console . log ( res )
}
} )
}
} ) Code snippet "Fetch data from the cache and display data in a new page (synchronous method)" exemple .
<!-- show.wxml -->
< view > Data you saved to cache:{{inputInfo}} </ view > // show.js
Page ( {
data : {
inputInfo : ''
} ,
onLoad : function ( options ) {
var that = this ;
wx . getStorage ( {
key : 'inputInfo' ,
success : function ( res ) {
console . log ( res )
that . setData ( {
inputInfo : res . data ,
} )
}
} )
}
} ) wx.scanCode API를 사용하여 클라이언트 코드 스캐너 UI를 호출 할 수 있습니다. QR 코드를 스캔하기 위해 CTA 버튼을 통해 WeChat 스캐너에 직접 액세스 할 수 있습니다.
Code snippet "call up client code scanner" example.
<!-- .wxml -->
< view class =" btn-area " >
< button bindtap =" bindScan " > Scan </ button >
</ view > // .js
bindScan: function ( ) {
console . log ( 'scanner' )
wx . scanCode ( {
success : ( res ) => {
console . log ( res )
}
} )
}WeChat API는 전체 위치 기반 서비스 세트를 제공합니다.
wx.chooseLocation 표시 할 위치를 선택합니다.wx.getLocation 현재 사용자 위치를 얻으려면.wx.openLocation buit-in 맵보기 에 위치를 표시합니다.wx.createMapContext 맵을 개인화하려면. Code snippet "get location" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnGetLocation " > Get location </ button > // .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
var speed = res . speed
var accuracy = res . accuracy
console . log ( res )
}
} )
} 위에서 우리는 wx.getLocation 사용하여 위도 와 경도를 얻음으로써 현재 사용자 위치를 검색했습니다.
wx.getLocation 더 자세한 내용 : 사용자가 미니 프로그램을 떠나지 만 채팅 위에 미니 프로그램을 표시하면 wx.getLocation 계속 호출 할 수 있으므로 사용자 위치를 지속적으로 얻을 수 있습니다.
wx.openLocation 내장 맵에 현재 사용자 위치를 표시하십시오 listenerBtnGetLocation
참고 : wx.openLocation API Call은 사용자를 새 맵 창으로 리디렉션합니다.
Code snippet "display the current user location" example.
// .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
wx . openLocation ( {
latitude : latitude ,
longitude : longitude ,
scale : 28
} )
}
} )
}WeChat Image API는 네 가지 가능성을 제공합니다.
wx.chooseImage 앨범이나 카메라에서 이미지를 선택하십시오.wx.previewImage 앱에 업로드하기 전에 이미지를 미리 봅니다.wx.getImageInfo 이미지 정보 (높이, 너비, 경로, SRC)를 얻습니다.wx.saveImageToPhotosAlbum 미니 프로그램에서 앨범으로 이미지를 저장합니다. 아래의 예에서는 wx.chooseImage 사용하여 사용자 앨범이나 카메라를 호출하는 것을 목표로 listenerBtnChooseImage 라는 기능을 만듭니다. 그런 다음 wx.getImageInfo 사용하여 이미지 정보를 얻습니다.
Code snippet "upload an image from album or camera" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnChooseImage " > Upload Image </ button >
<!-- Display the image user upload -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
}
} )이제 페이지에 이미지가 생겼으므로 이미지를 Long Long 탭하여 미니 프로그램에서 현재 사용자 앨범으로 이미지를 저장하겠습니다.
Code snippet "long tap the image to save it within user album" example.
<!-- .wxml -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
} ,
// Longtap function
imgLongTap : function ( ) {
// Save image to album
wx . saveImageToPhotosAlbum ( {
filePath : this . data . src ,
success ( res ) {
wx . showToast ( {
title : 'Save' ,
icon : 'success' ,
duration : 1500
} )
console . log ( 'success' )
}
} )
}
} )WeChat Network API는 일반적인 HTTPS 요청, WebSocket, 업로드 및 다운로드 파일을 제공합니다.
wx.request .wx.uploadFile 지정된 서버에 파일을 업로드하려면.wx.downloadFile 지정된 서버에서 파일을 다운로드하려면. 
아래의 예에는 하나의 기능과 하나의 이벤트 핸들러가 있습니다 : 이름이 표시된대로 addNewPost 와 onPullDownRefresh 각각 새 게시물을 추가하고 wx.request 호출을 사용하여 게시물을 가져올 수 있어야합니다.
Code snippet "making a POST HTTPS request" example.
<!-- .wxml -->
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
} ,
header : {
'content-type' : 'application/json'
}
} )
}
} )이제 우리가 게시 했으므로 뷰 레이어에 가져 와서 표시합시다. 단순화를 위해 OnpullDownRefresh를 활용하여 새 게시물을 다시로드합니다.
Code snippet "making a GET HTTPS request" example.
<!-- .wxml -->
<!-- Display Posts -->
< block wx:for =" {{posts}} " wx:for-item =" post " >
< text > {{post.content}} </ text >
</ block >
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
}
} )
} ,
// onPullDownRefresh must first be enabled in the config.
onPullDownRefresh : function ( ) {
var that = this
// by default the request is a GET.
wx . request ( {
url : 'example.php' ,
header : {
'content-type' : 'application/json'
} ,
success : {
that . setData ( {
posts : res . data // Set the Page data for posts to the response data.
} )
}
} )
}
} ) 우리가 이슈와 질문에 직면 한 미니 프로그램 제작 경로에서 우리는 당신과 공유하고 싶습니다. 공유하고 싶은 몇 가지 문제가 있다면 저희에게 연락하십시오.
WeChat은 ICP 라이센스가있는 API 만 허용하므로 서구 국가에서 익숙한 대부분의 API를 잊을 수 있습니다.
다음은 중국에서 사용할 수있는 API 디렉토리입니다. 확인하십시오.
background-image: 속성을 사용할 수 없습니다 CSS 배경 이미지를 통해 이미지 ressources를 얻을 수 없습니다 background-image: url(../../images/banner.png); . 나는 그것이 끔찍하다는 것을 알고 있지만, 우리는 그것을 다루어야합니다.
이 좌절감을 우회하는 두 가지 방법이 있습니다.
CSS background-image: 그러나 실제 경로를 사용할 수는 없으며 Base64에서 이미지를 인코딩 한 다음 background-image: url(base64 image); . 다음은 Base64에서 이미지를 인코딩하는 도구입니다.
또는 <image> 태그를 사용하고 <image> 태그 속성으로 mode 와 같은 태그를 처리 할 수 있습니다. WeChat에는 13 개의 모드가 있고 9 개는 절단 모드 , 4는 줌 모드 입니다. 다음은 documenation에 대한 링크입니다.
RPX는 WeChat 미니 프로그램의 단위 인 반응 형 픽셀을 나타냅니다. 공식 정의에 따르면 rpx 적응 형 화면 너비를 기반으로합니다.
실제로 RPX 장치는 "루트 EM"을 나타내는 rem 장치를 기반으로합니다. 왜 em 장치가 아닌가?
em 장치는 부모 의 글꼴 크기와 관련하여 복합 문제를 일으킨다. rem 장치는 복합 문제 (글꼴 사이징 듀티)를 상관시키는 루트 요소와 관련이 있습니다.
그러나 rpx 장치로 돌아 오려면 RPX 이점이 다음과 같습니다.
미니 프로그램 작업을하고 있습니까? 일을 나누고, 승무원을 만나고, 도움을 요청한다면 우리에게 연락하십시오!
기여하고 싶다면 여기에서 풀 요청을 보내거나 상하이 (AT) Lewagon.com에서 제안을 요청할 수 있습니다!
