kingdex
1.0.0
올해 인기 모바일 게임인 아너 오브 킹스(Honour of Kings)에서 영감을 얻었습니다. 가끔 온라인으로 게임 데이터를 검색하기 위해 휴대폰을 사용하는 것이 그리 편리하지 않은 경우가 있어서 '왕중의 왕 그림책'을 개발하자는 아이디어를 냈습니다. "애플릿. 공식 웹사이트에서 데이터를 크롤링하고, 영웅, 장비, 비문 및 기타 정보를 WeChat 애플릿에 통합하고, 언제 어디서나 게임 정보를 쿼리하세요.
WeChat에서 아래 미니 프로그램 코드를 스캔하여 즉시 경험해보세요.
먼저 Fork 클릭하거나 오른쪽 상단의 녹색 버튼 Clone or download 클릭하여 소스코드를 다운로드하고 WeChat 개발자 도구를 사용하여 디버깅 및 개발을 하세요. WeChat은 또한 미니 프로그램 개발 문서를 제공하여 미니 프로그램 등록, 개발 도구, 개발 및 디버깅에서 출시까지 완전한 솔루션 세트를 제공하여 Apple과 유사한 자체 생태계를 만듭니다.
이 프로젝트는 목록 표시, 영웅 세부정보, 장비 분류, 각인 조건 필터링 및 기타 기능을 포함하는 총 9페이지로 구성되어 있습니다. 백그라운드에서 leancloud의 스토리지 서비스가 사용되므로 미니 프로그램의 ajax api는 사용되지 않습니다. 린클라우드(Leancloud)가 출시되었습니다. SDK는 utils 폴더에 있는 leancloud.config.js 라는 파일에 의존해야 합니다. leancloud와 같은 타사 서비스는 일반적으로 유연하게 지불되고 King's Illustrated Book이 WeChat에 공식적으로 출시되었기 때문에 저는 푸시했습니다. leancloud.config.js 코드가 무시되었습니다. 이해해 주시기 바랍니다.
leancloud.config.js 에는 leancloud 애플리케이션의 AppID 및 AppKey 정보가 포함되어 있습니다.
module . exports = {
appId : '你的AppID' ,
appKey : '你的AppKey'
} 프로젝트를 사용하기 전에 자신만의 leancloud 애플리케이션을 생성하고 데이터를 얻기 위해 이전에 작성한王者荣耀官网爬虫구축해야 합니다. 둘 다 leancloud.config.js 파일이 필요합니다.
위챗 미니 프로그램 개발에 대해 잠시 이야기해보겠습니다. 한동안 인터넷에서 화제가 되었는데, 개발 문서를 살펴보는 시간을 가졌습니다. Vue.js 아닌가요? ! 아래 예를 살펴보십시오.
미니 프로그램:
Page ( {
data : {
list : [ ]
} ,
onload : function ( ) {
this . setData ( {
list : [ 1 , 2 , 3 ]
} )
}
} ) < view wx:for =" {{ list }} " > {{ item }} </ view >Vue.js:
new Vue ( {
data : {
list : [ ]
} ,
mounted : function ( ) {
this . list = [ 1 , 2 , 3 ]
}
} ) < view v-for =" item in list " > {{ item }} </ view >API가 비슷해 보이지만 여전히 분명한 차이점이 있습니다.
wx:for="item in list" 로 작성하면 오류가 보고됩니다.애플릿에는 두 개의 독립 모듈인 View(보기) 및 AppService(로직)에 해당하는 두 개의 스레드가 있습니다. View는 템플릿과 스타일을 렌더링하는 데 사용되며 AppService는 비즈니스 로직, 데이터 요청, API 호출 등을 처리하는 데 사용됩니다. 관심 있는 학생들은 "WeChat Mini 프로그램 아키텍처 분석"을 참조할 수 있습니다. 그리고 미니언 음식배달팀의 미니프로그램 기사도 좋습니다.
"King's Illustrated Book"이라고 하면 이것은 나의 첫 번째 작은 프로그램입니다. 숙련된 프런트 엔드 사용자의 경우 공식 문서를 따르면 하루 만에 시작할 수 있습니다. 코딩에 비해 전체 제품의 프로토타입 UI 디자인을 완성하는 것이 어려운 일이었습니다. 레이아웃, 컬러 매칭, 인터랙션 측면에서 열흘 넘게 많은 제품을 참고하며 디자인에 대한 더 깊은 이해를 얻었습니다. 아직은 꽤 만족스러운 최종 결과를 얻었습니다.
본 프로젝트의 오픈소스 코드는 학습 참고용이므로 상업적 이용을 금지합니다.
GPL
