헤마는 알리바바가 오프라인 슈퍼마켓을 위해 완전히 재구성한 새로운 소매 형태로 큰 인기를 끌고 있습니다.
* 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面
Mini 프로그램은 초보자도 쉽게 시작할 수 있는 프로그램입니다. 시작하기 쉽고 기능을 쉽게 구현할 수 있기 때문에 비교적 완성도 높은 미니 프로그램이 인기를 얻고 있으며 그 상업적 가치도 높아지고 있습니다.
WeChat 웹 개발자 도구: WeChat 미니 프로그램 공식 웹사이트 비교적 사용하기 쉬운 편집기로 미니 프로그램 편집에 매우 편리합니다.
개발 문서: WeChat Mini 프로그램 컬렉션 및 비밀 이를 사용하여 WeChat Mini 프로그램의 API, 구성 요소, 프레임워크 등을 찾습니다.
아이콘 라이브러리: Iconfont-Alibaba 벡터 아이콘 라이브러리 원하는 작은 아이콘을 거의 모두 찾을 수 있어 매우 편리합니다.
Easy Mork: JSON 데이터를 얻기 위한 백그라운드 시뮬레이션에 easy-mock이 사용됩니다.
weui
WeChat 미니 프로그램 개발은 여전히 전통적인 H5 개발과 다소 다르며 문제가 발생하기 쉽습니다.
애플릿은 MVVM을 기반으로 한 프레임워크입니다. 인터페이스를 업데이트하려면 데이터 바인딩을 합리적으로 사용하는 것이 매우 중요합니다.
개발할 때 문서를 자세히 살펴보세요. 실수로 기본적으로 구성 요소를 작성했다는 사실을 알게 될 것입니다. .
개발 플랫폼 진입, 프로젝트 정보 등록->편집기에서 버전 업로드->개발 버전에서 검토를 위해 제출 선택->승인->온라인 프로젝트
먼저 내 프로젝트 디렉터리를 살펴보겠습니다
"pages": [ "pages/index/index", //主界面 "pages/person/person", //个人界面 "pages/classify/classify", //分类商品界面 "pages/class/myFruits/myFruits", //水果商店 "pages/class/myMeat/myMeat", //肉类食品商店 "pages/myCart/myCart" //购物车 ],
캐러셀에는 일반적인 가로 포스터 이미지 표시, 가로 및 세로 제품 목록 표시, 헤드라인 정보 상자 회전
siwper 구성 요소 등 여러 가지 형태가 있습니다.
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>와 같은 수평 포스터 이미지 표시를 잘 구현했습니다. 그러나 수평 슬라이딩은 다른 세부 사항에 주의해야 합니다.
먼저 swiper 구성 요소에 scroll-x-="true"를 추가합니다.
그런 다음 표시를 설정합니다. 캐러셀 하위 요소의 상위 컨테이너 : inline-block; white-space: nowrap;
헤드라인 정보 상자 변환은 스크롤 뷰 중첩 스와이프를 사용하여 위아래 회전을 채택하여 완료
<scroll-view scroll-y-="true" >
<swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true">
<block wx:for="{{something}}" wx:key="index">
//内容
</block>
</swiper>
</scroll-view>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,
})
},@import './styles/weui.wxss';
마지막으로 이 프로젝트가 마음에 드셨다면 별표 부탁드립니다.
프로젝트 미리보기
Hema Fresh는 Alibaba가 오프라인 슈퍼마켓을 위해 완전히 재구성 한 새로운 소매 형식입니다 초보자의 경우 공식 문서를 더 많이 읽으면 처음에는 비교적 완전한 작은 프로그램을 만들 수 있습니다. 바로 시작하기 쉽고 기능 구현도 간단하기 때문입니다. 점점 대중화되고 있으며 상업적 가치도 커지고 있습니다. 1. 프로젝트 도구 및 문서
WeChat 웹 개발자 도구: WeChat 미니 프로그램 공식 웹사이트 비교적 사용하기 쉬운 편집기로 미니 프로그램 편집에 매우 편리합니다.
개발 문서: WeChat Mini 프로그램 컬렉션 및 비밀 이를 사용하여 WeChat Mini 프로그램의 API, 구성 요소, 프레임워크 등을 찾습니다.
아이콘 라이브러리: Iconfont-Alibaba 벡터 아이콘 라이브러리 원하는 작은 아이콘을 거의 모두 찾을 수 있어 매우 편리합니다.
* 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面
siwper 구성 요소 등 여러 가지 형태가 있습니다.
"pages": [ "pages/index/index", //主界面 "pages/person/person", //个人界面 "pages/classify/classify", //分类商品界面 "pages/class/myFruits/myFruits", //水果商店 "pages/class/myMeat/myMeat", //肉类食品商店 "pages/myCart/myCart" //购物车 ],
헤드라인 정보 상자 변환은 스크롤 뷰 중첩 스와이프를 사용하여 위아래 회전을 채택하여 완료
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper> <scroll-view scroll-y-="true" >
<swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true">
<block wx:for="{{something}}" wx:key="index">
//内容
</block>
</swiper>
</scroll-view>예를 들어 모든 제품과 장바구니에 담긴 제품의 정보는 전역적으로 배치되어야 하며 현재 인터페이스의 상태와 같은 일부 정보는 일반적으로 현재 인터페이스의 데이터에 저장됩니다
를 통해 로컬에 넣을 수 있습니다.3. 장바구니 조작
예를 들어 장바구니에 담긴 상품 수를 줄이기
wx.request({
url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
complete: res => {
this.globalData.classifyList = res.data;
},
})
글로벌 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,
})
},iconfont esay -moc weui 등과 같은 효과적인 리소스를 잘 사용하세요.
코드를 한꺼번에 작성하지 마세요. 함수를 재사용할 수 있도록 잘 캡슐화해야 합니다. 유지 관리 및 읽기가 쉽습니다.
관련 추천 :
WeChat 미니 프로그램 개발 소개 예시위 내용은 위챗 미니 프로그램을 모방한 헤마신선식품의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
