store miniprogram
1.0.0
얼마전 샤오미몰을 흉내내서 PC상몰 웹사이트 vue-store를 만들었습니다. 최근 위챗 미니 프로그램 설명서를 보고 위챗 미니 프로그램 버전을 만들기 시작했습니다.
이 프로젝트는 vue-store의 백엔드를 재사용하고 원래 스토어 서버를 기반으로 WeChat 애플릿의 로그인 API를 추가합니다.
저는 여가 시간을 온라인 수업으로 활용하여 학습과 실습을 병행하고 있습니다. 질문이나 좋은 제안 사항이 있으면 언제든지 이슈를 제출해 주세요.
테스트 계정으로 제작되었기 때문에 온라인 미리보기 버전은 없습니다.
PC 웹 버전: vue-store.
백엔드: store-server .
이 프로젝트가 좋다고 생각하신다면 오른쪽 상단의
Star눌러 후원해주세요. ^_^
Xiaomi Mall의 공식 미니 프로그램을 구별하기 위해 이 프로젝트를 Xiaomi라고 명명했습니다. 이 프로젝트는 샤오미 공식 웹사이트와 아무런 관련이 없습니다. 샤오미 제품을 구매하려면 샤오미 공식 매장을 방문하세요.
프로젝트에는 홈 페이지, 검색 페이지(예: 제품 표시 페이지), 장바구니, 내 탭 등 4개의 탭바가 포함되어 있습니다. 상품 상세 페이지, 내 컬렉션, 주문 결제 페이지, 내 주문 페이지도 있습니다.
상품 표시, 상품 분류 조회, 키워드 검색 상품, 상품 상세 정보 표시, 사용자 장바구니, 주문 결제, 사용자 주문, 사용자 수집 목록을 구현합니다.
프로젝트 전체는 vue-store 구현을 참조하며 기본적으로 모든 기능을 구현합니다. WeChat 애플릿 버전이라고 할 수 있습니다.
백엔드는 vue-store의 백엔드를 재사용하고 원래 스토어 서버를 기반으로 WeChat 애플릿의 로그인 API를 추가합니다.
프런트 엔드: 기본 WeChat 애플릿
백엔드: Node.js , Koa框架
데이터베이스: Mysql
애플릿이 시작되면 wx.login을 호출하여 로그인 자격 증명( code )을 얻은 다음 코드를 프로젝트의 백엔드 서버로 다시 보내고 auth.code2Session 인터페이스를 호출하고 사용자의 고유 식별자 OpenID 와 세션 키를 교환합니다. 세션_키 . 그런 다음 OpenID를 프로젝트 데이터베이스에 등록하여 이 프로젝트의 비즈니스 검증에 사용되는 이 시스템에 대한 고유한 user_id를 생성합니다.
홈페이지는 주로 상품 전시를 위한 것으로, 추천 상품을 보여주는 캐러셀, 인기 상품 카테고리의 9각형 그리드, 카테고리별 인기 상품 표시 등을 갖추고 있습니다.
전체상품 페이지에는 전체 상품 표시, 상품 분류 쿼리, 키워드 기반 상품 검색 결과 표시가 통합되어 있습니다.
상품 상세 페이지는 주로 특정 상품에 대한 상세 정보를 표시하며, 사용자가 즐겨찾는 상품을 장바구니나 즐겨찾기 목록에 추가할 수 있습니다.
장바구니는 글로벌 현황 관리를 위해 omix를 사용하는데, 장바구니에 담긴 상품의 추가, 삭제, 개수 늘리기, 결제할 상품 선택, 장바구니에 있는 전체 상품 선택 결제 등의 기능이 가능합니다.
사용자가 장바구니에서 구매할 제품을 선택하고 "결제하기" 버튼을 클릭하면 이 페이지로 이동하게 됩니다. 여기에서 사용자는 배송 주소를 선택하고 주문 관련 정보를 확인한 후 구매를 확인합니다.
사용자는 상품 상세 페이지에서 '좋아요 추가' 버튼을 클릭하여 즐겨찾는 상품을 즐겨찾기 목록에 추가할 수 있습니다.
사용자가 주문한 모든 주문을 표시합니다.
请clone项目到本地
git clone https://github.com/hai-27/store-miniprogram.git
导入项目到微信开发者工具即可
작성자 hai-27
2020년 3월 31일
