미니 프로그램은 초보자가 사용하기 쉬운 것입니다. 공식 문서를 더 많이 읽으면 처음에는 시작하기 쉽고 기능 구현이 간단하기 때문에 비교적 완전한 미니 프로그램을 만들 수 있습니다. 미니 프로그램은 점점 인기를 얻고 있으며, 상업적 가치도 커지고 있습니다. 이 기사에서는 WeChat 애플릿을 모방한 Hema Xiansheng을 알려드리겠습니다.
프로젝트 미리보기
헤마는 알리바바가 오프라인 슈퍼마켓을 위해 완전히 재구성한 새로운 소매 형태로 큰 인기를 끌고 있습니다.
프로젝트 기능
* 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面
Mini 프로그램 설계 과정
Mini 프로그램은 초보자도 쉽게 시작할 수 있는 프로그램입니다. 시작하기 쉽고 기능을 쉽게 구현할 수 있기 때문에 비교적 완성도 높은 미니 프로그램이 인기를 얻고 있으며 그 상업적 가치도 높아지고 있습니다.
1. 프로젝트 도구 및 문서
WeChat 웹 개발자 도구: WeChat 미니 프로그램 공식 웹사이트 비교적 사용하기 쉬운 편집기로 미니 프로그램 편집에 매우 편리합니다.
개발 문서: WeChat Mini 프로그램 컬렉션 및 비밀 이를 사용하여 WeChat Mini 프로그램의 API, 구성 요소, 프레임워크 등을 찾습니다.
아이콘 라이브러리: Iconfont-Alibaba 벡터 아이콘 라이브러리 원하는 작은 아이콘을 거의 모두 찾을 수 있어 매우 편리합니다.
Easy Mork: JSON 데이터를 얻기 위한 백그라운드 시뮬레이션에 easy-mock이 사용됩니다.
weui
2로 빠르고 편리하게 수행할 수 있는 개인 정보 인터페이스와 같은 weui 프레임워크가 도입되었습니다. 프로젝트 개발
WeChat 미니 프로그램 개발은 여전히 전통적인 H5 개발과 다소 다르며 문제가 발생하기 쉽습니다.
애플릿은 MVVM을 기반으로 한 프레임워크입니다. 인터페이스를 업데이트하려면 데이터 바인딩을 합리적으로 사용하는 것이 매우 중요합니다.
개발할 때 문서를 자세히 살펴보세요. 실수로 기본적으로 구성 요소를 작성했다는 사실을 알게 될 것입니다. .
3. 프로젝트 출시
개발 플랫폼 진입, 프로젝트 정보 등록->편집기에서 버전 업로드->개발 버전에서 검토를 위해 제출 선택->승인->온라인 프로젝트
부분 기능 분석
먼저 내 프로젝트 디렉터리를 살펴보겠습니다
"pages": [ "pages/index/index", //主界面 "pages/person/person", //个人界面 "pages/classify/classify", //分类商品界面 "pages/class/myFruits/myFruits", //水果商店 "pages/class/myMeat/myMeat", //肉类食品商店 "pages/myCart/myCart" //购物车 ],
1. 홈페이지 캐러셀 이미지
캐러셀에는 일반적인 가로 포스터 이미지 표시, 가로 및 세로 제품 목록 표시, 헤드라인 정보 상자 회전
siwper 구성 요소 등 여러 가지 형태가 있습니다.
<swiper> <block> <swiper-item> <image></image> </swiper-item> </block> </swiper>
와 같은 수평 포스터 이미지 표시를 잘 구현했습니다. 그러나 수평 슬라이딩은 다른 세부 사항에 주의해야 합니다.
먼저 swiper 구성 요소에 scroll-x-="true"를 추가합니다.
그런 다음 표시를 설정합니다. 캐러셀 하위 요소의 상위 컨테이너 : inline-block; white-space: nowrap;
헤드라인 정보 상자 변환은 스크롤 뷰 중첩 스와이프를 사용하여 위아래 회전을 채택하여 완료
<scroll-view> <swiper> <block> //内容 </block> </swiper> </scroll-view>
2. onLoad 수명주기 함수를 인덱스 인터페이스에 전달하고,
easy-moc를 통해 배경 데이터를 얻어 필요한 정보를 글로벌 globalData로 전송합니다wx.request({
url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
complete: res => {
this.globalData.classifyList = res.data;
},
})
데이터 처리를 위해서는 어느 것이 글로벌 정보이고 어느 것이 로컬 정보인지 명확히 할 필요가 있습니다 예를 들어 모든 제품과 장바구니에 담긴 제품의 정보는 전역적으로 배치되어야 하며 현재 인터페이스의 상태와 같은 일부 정보는 일반적으로 현재 인터페이스의 데이터에 저장됩니다
그리고 일부는 생년월일, 계정정보 등 개인정보는 wx.setStorage, wx.getStorage Storage
를 통해 로컬에 넣을 수 있습니다.3. 장바구니 조작
장바구니에서의 조작은 덧셈과 뺄셈에 지나지 않습니다. 무엇이 불합리한지 스스로 끊임없이 디버깅하기. 장바구니 상태 처리
예를 들어 장바구니에 담긴 상품 수를 줄이기
reduceItems: function (e) {
let carts = app.globalData.carts; //获取购物车的信息
let classifyList = app.globalData.classifyList; //获取商品的信息
for (let key of carts) { //遍历购物车数组
if (key.id === e.target.dataset.id) { //通过WXML中 view里面的bind-id传过来的参数进行查找
key.cartSelected = true;
if (key.num === 1) { //如果数量为1还要减
key.num--;
key.cartSelected = false; //购物车不选中
key.selected = false; //商品中不选中
app.globalData.carts = carts.filter((item) => { //进行购物车中商品剔除
return item.id != e.target.dataset.id;
})
} else {
key.num--;
}
}
}
let num = 0; //实时更新购物车小计界面显示
let totalPrice = 0;
for (let key of carts) {
if (key.cartSelected) {
num += key.num;
totalPrice += key.num * key.price;
}
}
this.setData({ //通过setData进行当前页面Data数据管理
cart: app.globalData.carts,
cartTotal: num,
cartTotalPrice: totalPrice,
})
},4. weui 프레임워크 소개글로벌 CSS 스타일에 추가된 CSS는 모든 페이지에 적용되므로 weui를 도입할 수 있고, 일부 인터페이스를 만드는 것이 정말 편리합니다. @import './styles/weui.wxss';
요약
WeChat 애플릿의 구성 요소인 API는 매우 강력하므로 지속적인 탐색, 지속적인 학습 및 더 많은 문서 읽기가 필요합니다. - iconfont esay -moc weui 등과 같은 효과적인 리소스를 잘 사용하세요.
- 페이지를 자를 때 주의하세요. 유연한 레이아웃 및 기타 레이아웃 방법을 사용하는 데 능숙합니다. 작은 프로그램의 rpx는 정말 사용하기 쉽습니다
- 코드를 한꺼번에 작성하지 마세요. 함수를 재사용할 수 있도록 잘 캡슐화해야 합니다. 유지 관리 및 읽기가 쉽습니다
- 프로젝트 주소:
Email : 734583898@qq.com
마지막으로 이 프로젝트가 마음에 드셨다면 별표 부탁드립니다.
프로젝트 미리보기
Hema Xiansheng을 모방하고 일부 기능을 구현합니다.
Hema Fresh는 Alibaba가 오프라인 슈퍼마켓을 위해 완전히 재구성 한 새로운 소매 형식입니다 초보자의 경우 공식 문서를 더 많이 읽으면 처음에는 비교적 완전한 작은 프로그램을 만들 수 있습니다. 바로 시작하기 쉽고 기능 구현도 간단하기 때문입니다. 점점 대중화되고 있으며 상업적 가치도 커지고 있습니다. 1. 프로젝트 도구 및 문서
WeChat 웹 개발자 도구: WeChat 미니 프로그램 공식 웹사이트 비교적 사용하기 쉬운 편집기로 미니 프로그램 편집에 매우 편리합니다.
개발 문서: WeChat Mini 프로그램 컬렉션 및 비밀 이를 사용하여 WeChat Mini 프로그램의 API, 구성 요소, 프레임워크 등을 찾습니다.
아이콘 라이브러리: Iconfont-Alibaba 벡터 아이콘 라이브러리 원하는 작은 아이콘을 거의 모두 찾을 수 있어 매우 편리합니다.
- 2로 빠르고 편리하게 수행할 수 있는 개인 정보 인터페이스와 같은 weui 프레임워크가 도입되었습니다. 프로젝트 개발 WeChat 미니 프로그램 개발은 여전히 전통적인 H5 개발과 다소 다르며 문제가 발생하기 쉽습니다. 애플릿은 MVVM을 기반으로 한 프레임워크입니다. 인터페이스를 업데이트하려면 데이터 바인딩을 합리적으로 사용하는 것이 매우 중요합니다.
- 개발할 때 문서를 자세히 살펴보세요. 실수로 기본적으로 구성 요소를 작성했다는 사실을 알게 될 것입니다. . 3. 프로젝트 출시
- 개발 플랫폼 진입, 프로젝트 정보 등록->편집기에서 버전 업로드->개발 버전에서 검토를 위해 제출 선택->승인->온라인 프로젝트부분 기능 분석
- 먼저 내 프로젝트 디렉터리를 살펴보겠습니다
* 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面
1. 홈페이지 캐러셀 이미지 - 캐러셀에는 일반적인 가로 포스터 이미지 표시, 가로 및 세로 제품 목록 표시, 헤드라인 정보 상자 회전
siwper 구성 요소 등 여러 가지 형태가 있습니다.
"pages": [ "pages/index/index", //主界面 "pages/person/person", //个人界面 "pages/classify/classify", //分类商品界面 "pages/class/myFruits/myFruits", //水果商店 "pages/class/myMeat/myMeat", //肉类食品商店 "pages/myCart/myCart" //购物车 ],
와 같은 수평 포스터 이미지 표시를 잘 구현했습니다. 그러나 수평 슬라이딩은 다른 세부 사항에 주의해야 합니다.
그런 다음 표시를 설정합니다. 캐러셀 하위 요소의 상위 컨테이너 : inline-block; white-space: nowrap;
헤드라인 정보 상자 변환은 스크롤 뷰 중첩 스와이프를 사용하여 위아래 회전을 채택하여 완료
<swiper> <block> <swiper-item> <image></image> </swiper-item> </block> </swiper>
2. onLoad 수명주기 함수를 인덱스 인터페이스에 전달하고, easy-moc를 통해 배경 데이터를 얻어 필요한 정보를 글로벌 globalData로 전송합니다
<scroll-view>
<swiper>
<block>
//内容
</block>
</swiper>
</scroll-view>
데이터 처리를 위해서는 어느 것이 글로벌 정보이고 어느 것이 로컬 정보인지 명확히 할 필요가 있습니다 예를 들어 모든 제품과 장바구니에 담긴 제품의 정보는 전역적으로 배치되어야 하며 현재 인터페이스의 상태와 같은 일부 정보는 일반적으로 현재 인터페이스의 데이터에 저장됩니다
그리고 일부는 생년월일, 계정정보 등 개인정보는 wx.setStorage, wx.getStorage Storage
를 통해 로컬에 넣을 수 있습니다.3. 장바구니 조작
장바구니에서의 조작은 덧셈과 뺄셈에 지나지 않습니다. 무엇이 불합리한지 스스로 끊임없이 디버깅하기. 장바구니 상태 처리
예를 들어 장바구니에 담긴 상품 수를 줄이기
wx.request({
url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
complete: res => {
this.globalData.classifyList = res.data;
},
})4. weui 프레임워크 소개
글로벌 CSS 스타일에 추가된 CSS는 모든 페이지에 적용되므로 weui를 도입할 수 있고, 일부 인터페이스를 만드는 것이 정말 편리합니다.
reduceItems: function (e) {
let carts = app.globalData.carts; //获取购物车的信息
let classifyList = app.globalData.classifyList; //获取商品的信息
for (let key of carts) { //遍历购物车数组
if (key.id === e.target.dataset.id) { //通过WXML中 view里面的bind-id传过来的参数进行查找
key.cartSelected = true;
if (key.num === 1) { //如果数量为1还要减
key.num--;
key.cartSelected = false; //购物车不选中
key.selected = false; //商品中不选中
app.globalData.carts = carts.filter((item) => { //进行购物车中商品剔除
return item.id != e.target.dataset.id;
})
} else {
key.num--;
}
}
}
let num = 0; //实时更新购物车小计界面显示
let totalPrice = 0;
for (let key of carts) {
if (key.cartSelected) {
num += key.num;
totalPrice += key.num * key.price;
}
}
this.setData({ //通过setData进行当前页面Data数据管理
cart: app.globalData.carts,
cartTotal: num,
cartTotalPrice: totalPrice,
})
}, 요약
WeChat 애플릿의 구성 요소인 API는 매우 강력하므로 지속적인 탐색, 지속적인 학습 및 더 많은 문서 읽기가 필요합니다. iconfont esay -moc weui 등과 같은 효과적인 리소스를 잘 사용하세요.
코드를 한꺼번에 작성하지 마세요. 함수를 재사용할 수 있도록 잘 캡슐화해야 합니다. 유지 관리 및 읽기가 쉽습니다.
위 내용은 Hema WeChat 애플릿입니다. 모든 분들께 도움이 되었으면 좋겠습니다.
관련 추천 :
WeChat 미니 프로그램 개발 소개 예시- WeChat 미니 프로그램의 영상, 음악, 그림 구성 요소에 대한 자세한 설명
- WeChat 미니 프로그램에서 WeChat 운동 단계를 얻을 수 있는 사례 연구( 사진)
위 내용은 위챗 미니 프로그램을 모방한 헤마신선식품의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
Dreamweaver Mac版
시각적 웹 개발 도구
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
