위챗 미니 프로그램을 모방한 헤마신선식품

미니 프로그램은 초보자가 사용하기 쉬운 것입니다. 공식 문서를 더 많이 읽으면 처음에는 시작하기 쉽고 기능 구현이 간단하기 때문에 비교적 완전한 미니 프로그램을 만들 수 있습니다. 미니 프로그램은 점점 인기를 얻고 있으며, 상업적 가치도 커지고 있습니다. 이 기사에서는 WeChat 애플릿을 모방한 Hema Xiansheng을 알려드리겠습니다.

프로젝트 미리보기

헤마는 알리바바가 오프라인 슈퍼마켓을 위해 완전히 재구성한 새로운 소매 형태로 큰 인기를 끌고 있습니다.

프로젝트 기능

* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面

Mini 프로그램 설계 과정

Mini 프로그램은 초보자도 쉽게 시작할 수 있는 프로그램입니다. 시작하기 쉽고 기능을 쉽게 구현할 수 있기 때문에 비교적 완성도 높은 미니 프로그램이 인기를 얻고 있으며 그 상업적 가치도 높아지고 있습니다.

1. 프로젝트 도구 및 문서

1. WeChat 웹 개발자 도구: WeChat 미니 프로그램 공식 웹사이트 비교적 사용하기 쉬운 편집기로 미니 프로그램 편집에 매우 편리합니다.

2. 개발 문서: WeChat Mini 프로그램 컬렉션 및 비밀 이를 사용하여 WeChat Mini 프로그램의 API, 구성 요소, 프레임워크 등을 찾습니다.

3. 아이콘 라이브러리: Iconfont-Alibaba 벡터 아이콘 라이브러리 원하는 작은 아이콘을 거의 모두 찾을 수 있어 매우 편리합니다.

4. Easy Mork: JSON 데이터를 얻기 위한 백그라운드 시뮬레이션에 easy-mock이 사용됩니다.

5. 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는 매우 강력하므로 지속적인 탐색, 지속적인 학습 및 더 많은 문서 읽기가 필요합니다.

1. iconfont esay -moc weui 등과 같은 효과적인 리소스를 잘 사용하세요.

2. 페이지를 자를 때 주의하세요. 유연한 레이아웃 및 기타 레이아웃 방법을 사용하는 데 능숙합니다. 작은 프로그램의 rpx는 정말 사용하기 쉽습니다

3. 코드를 한꺼번에 작성하지 마세요. 함수를 재사용할 수 있도록 잘 캡슐화해야 합니다. 유지 관리 및 읽기가 쉽습니다

4. 프로젝트 주소:

https://github.com/fishman17/... 자세한 설명 포함

개인 프로필

github: https://github .com/fishman17

Email : 734583898@qq.com

마지막으로 이 프로젝트가 마음에 드셨다면 별표 부탁드립니다.

프로젝트 미리보기

Hema Xiansheng을 모방하고 일부 기능을 구현합니다.

Hema Fresh는 Alibaba가 오프라인 슈퍼마켓을 위해 완전히 재구성 한 새로운 소매 형식입니다 초보자의 경우 공식 문서를 더 많이 읽으면 처음에는 비교적 완전한 작은 프로그램을 만들 수 있습니다. 바로 시작하기 쉽고 기능 구현도 간단하기 때문입니다. 점점 대중화되고 있으며 상업적 가치도 커지고 있습니다.

1. 프로젝트 도구 및 문서

WeChat 웹 개발자 도구: WeChat 미니 프로그램 공식 웹사이트 비교적 사용하기 쉬운 편집기로 미니 프로그램 편집에 매우 편리합니다.

개발 문서: WeChat Mini 프로그램 컬렉션 및 비밀 이를 사용하여 WeChat Mini 프로그램의 API, 구성 요소, 프레임워크 등을 찾습니다.

아이콘 라이브러리: Iconfont-Alibaba 벡터 아이콘 라이브러리 원하는 작은 아이콘을 거의 모두 찾을 수 있어 매우 편리합니다.

Easy Mork: JSON 데이터를 얻기 위한 백그라운드 시뮬레이션에 easy-mock이 사용됩니다.

weui

1. 2로 빠르고 편리하게 수행할 수 있는 개인 정보 인터페이스와 같은 weui 프레임워크가 도입되었습니다. 프로젝트 개발
   WeChat 미니 프로그램 개발은 여전히 ​​전통적인 H5 개발과 다소 다르며 문제가 발생하기 쉽습니다.
애플릿은 MVVM을 기반으로 한 프레임워크입니다. 인터페이스를 업데이트하려면 데이터 바인딩을 합리적으로 사용하는 것이 매우 중요합니다.
2. 개발할 때 문서를 자세히 살펴보세요. 실수로 기본적으로 구성 요소를 작성했다는 사실을 알게 될 것입니다. .
   3. 프로젝트 출시
3. 개발 플랫폼 진입, 프로젝트 정보 등록->편집기에서 버전 업로드->개발 버전에서 검토를 위해 제출 선택->승인->온라인 프로젝트
   부분 기능 분석
4. 먼저 내 프로젝트 디렉터리를 살펴보겠습니다

   * 用户信息注册
   * 首页几个轮播和界面交互
   * 分类商品管理购买
   * 购物车界面交互及其操作
   * 个人信息界面

   1. 홈페이지 캐러셀 이미지
5. 캐러셀에는 일반적인 가로 포스터 이미지 표시, 가로 및 세로 제품 목록 표시, 헤드라인 정보 상자 회전

   siwper 구성 요소 등 여러 가지 형태가 있습니다.

       "pages": [
        "pages/index/index",  //主界面
         "pages/person/person", //个人界面
        "pages/classify/classify", //分类商品界面
        "pages/class/myFruits/myFruits", //水果商店
        "pages/class/myMeat/myMeat", //肉类食品商店
        "pages/myCart/myCart"    //购物车
        ],

와 같은 수평 포스터 이미지 표시를 잘 구현했습니다. 그러나 수평 슬라이딩은 다른 세부 사항에 주의해야 합니다.

먼저 swiper 구성 요소에 scroll-x-="true"를 추가합니다.

그런 다음 표시를 설정합니다. 캐러셀 하위 요소의 상위 컨테이너 : 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 등과 같은 효과적인 리소스를 잘 사용하세요.

페이지를 자를 때 주의하세요. 유연한 레이아웃 및 기타 레이아웃 방법을 사용하는 데 능숙합니다. 작은 프로그램의 rpx는 정말 사용하기 쉽습니다

코드를 한꺼번에 작성하지 마세요. 함수를 재사용할 수 있도록 잘 캡슐화해야 합니다. 유지 관리 및 읽기가 쉽습니다.

위 내용은 Hema WeChat 애플릿입니다. 모든 분들께 도움이 되었으면 좋겠습니다.

관련 추천 :

WeChat 미니 프로그램 개발 소개 예시

1. WeChat 미니 프로그램의 영상, 음악, 그림 구성 요소에 대한 자세한 설명

2. WeChat 미니 프로그램에서 WeChat 운동 단계를 얻을 수 있는 사례 연구( 사진)

위 내용은 위챗 미니 프로그램을 모방한 헤마신선식품의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!