위챗 미니 프로그램을 모방한 헤마신선식품
- 小云云원래의
- 2017-12-05 16:39:324458검색
미니 프로그램은 초보자가 사용하기 쉬운 것입니다. 공식 문서를 더 많이 읽으면 처음에는 시작하기 쉽고 기능 구현이 간단하기 때문에 비교적 완전한 미니 프로그램을 만들 수 있습니다. 미니 프로그램은 점점 인기를 얻고 있으며, 상업적 가치도 커지고 있습니다. 이 기사에서는 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 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>
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 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>
2. onLoad 수명주기 함수를 인덱스 인터페이스에 전달하고, easy-moc를 통해 배경 데이터를 얻어 필요한 정보를 글로벌 globalData로 전송합니다
<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.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!