WeChat Mini Program-Imitated Hema Fresh Food

Mini program is an easy-to-use thing. For novices, if you read more official documents, you can initially make a relatively complete mini program. It is precisely because it is easy to get started and the functions are simple to implement, that mini programs are becoming more and more popular. The commercial value is also increasing. In this article, we will teach you a WeChat applet-imitation Hema Xiansheng.

Preliminary view of the project

Hema Fresh is Alibaba’s new retail format that has completely reconstructed offline supermarkets and is very popular.

#Project function

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

Mini program design process

Mini program is an easy thing to get started with. For novices, if you read more official documents, you can initially make a relatively complete mini program. Programs, precisely because they are easy to use and implement functions, are becoming more and more popular and have greater commercial value.

1. Project tools and documents

1. WeChat web developer tools: WeChat Mini Program official website This is a relatively easy-to-use editor, which is very convenient for editing mini programs.

2. Development Documents: WeChat Mini Program Secrets Use this to find APIs, components, frameworks, etc. of WeChat Mini Programs.

3. Icon library: Iconfont-Alibaba vector icon library This can find almost all the small icons you want, which is very convenient.

4. Easy Mork: easy-mock is used for background simulation to obtain JSON data;

5. weui framework is introduced, such as personal information interface, using weui can be done quickly and conveniently

2. Project development

WeChat applet development is somewhat different from traditional H5 development, and it is easy to get into trouble.

The applet is a framework based on MVVM. It is very important to make reasonable use of data binding to update the interface.
When developing, don’t write and write all at once. Read more documents, and you will find that you accidentally write natively. a component. .

3. Project release

Enter the development platform, register project information->Upload the version in the editor->Select submit for review in the development version->Pass review-> Project online

Partial function analysis

Let’s take a look at my project directory first

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

1. Home page carousel image

There are several forms of carousel, For example, the common horizontal poster image display, as well as the horizontal and vertical product list display, and the headline information box rotation

siwper component very well realizes the horizontal poster image display, such as

        <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>

However, there are some differences that need to be paid attention to when sliding horizontally. Details

First add scroll-x-="true" to the swiper component
Then set display: inline-block; white-space: nowrap;
## to the parent container of the carousel's child elements #The headline information box conversion adopts up and down rotation, and is completed using scroll-view nested 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>

2. Classified product management

First pass the onLoad life cycle function on the index interface,

pass easy -moc obtains the background data and sends the necessary information to the global globalData

wx.request({
      url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
      complete: res => {
        this.globalData.classifyList = res.data;
      },
    })

For data processing, it is necessary to clarify which is global information and which is local informationFor example, all product information, shopping cart Products must be placed in the global view, and some, such as the status of the current interface, are generally stored in the Data of the current interface

. And some personal information, such as date of birth and account information, can be saved through wx. setStorage and wx.getStorage are put into local storage

3. Shopping cart operation

The operations in the shopping cart are nothing more than additions and subtractions. You need to constantly debug by yourself to find out what is unreasonable

Through operations such as view and bindtap in buttons, the modification of product information and the processing of shopping cart status can be achieved.

For example, reduce the number of items in the shopping cart.

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 framework introduces

The CSS added in the global CSS style is adapted to all pages. From this, weui can be introduced, which is really convenient to make some interfaces

@import './styles/weui.wxss';

Summary

The components of the WeChat mini program, the API is very powerful, it requires continuous exploration, continuous learning, and reading more documents
Be good at using effective resources, such as iconfont esay -moc weui etc.
Be careful when cutting pages, and be good at using flexible layout and other layout methods. The rpx of the mini program is really easy to use
Don’t Write code in one go. When functions are reusable, they should be abstracted and encapsulated so that the code is easy to maintain and read.
Project address:

https: //github.com/fishman17/... Contains detailed comments

Personal profile

github: https://github.com/fishman17

Email: 734583898@qq.com

Finally, if you like this project, please give it a star. Thank you!

Preliminary view of the project

Imitate Hema Xiansheng and realize some functions.

Hema Fresh is a new retail format that Alibaba has completely reconstructed for offline supermarkets. It is very popular

##Project function

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

Mini program design process

Mini program is an easy thing to get started with, for novices Generally speaking, if you read more official documents, you can initially make a relatively complete mini program. Precisely because it is easy to get started and the functions are simple to implement, mini programs are becoming more and more popular and their commercial value is also increasing.

1. Project tools and documents

1. WeChat web developer tools: WeChat Mini Program official website This is a relatively easy-to-use editor, which is very convenient for editing mini programs.

2. Development Documents: WeChat Mini Program Secrets Use this to find APIs, components, frameworks, etc. of WeChat Mini Programs.

3. Icon library: Iconfont-Alibaba vector icon library This can find almost all the small icons you want, which is very convenient.

4. Easy Mork: easy-mock is used for background simulation to obtain JSON data;

5. weui framework is introduced, such as personal information interface, using weui can be done quickly and conveniently

2. Project development

WeChat applet development is somewhat different from traditional H5 development, and it is easy to get into trouble.

The applet is a framework based on MVVM. It is very important to make reasonable use of data binding to update the interface.
When developing, don’t write and write all at once. Read more documents, and you will find that you accidentally write natively. a component. .

3. Project release

Enter the development platform, register project information->Upload the version in the editor->Select submit for review in the development version->Pass review-> Project online

Partial function analysis

Let’s take a look at my project directory first

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

1. Home page carousel image

There are several forms of carousel, For example, the common horizontal poster image display, as well as the horizontal and vertical product list display, and the headline information box rotation

siwper component very well realizes the horizontal poster image display, such as

        <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>

However, there are some differences that need to be paid attention to when sliding horizontally. Details

First add scroll-x-="true" to the swiper component
Then set display: inline-block; white-space: nowrap;
## to the parent container of the carousel's child elements #The headline information box conversion adopts up and down rotation, and is completed using scroll-view nested 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>

2. Classified product management

First pass the onLoad life cycle function on the index interface,

pass easy -moc obtains the background data and sends the necessary information to the global globalData

wx.request({
      url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
      complete: res => {
        this.globalData.classifyList = res.data;
      },
    })

For data processing, it is necessary to clarify which is global information and which is local informationFor example, all product information, shopping cart Products must be placed in the global view, and some, such as the status of the current interface, are generally stored in the Data of the current interface

. And some personal information, such as date of birth and account information, can be saved through wx. setStorage and wx.getStorage are put into local storage

3. Shopping cart operation

The operations in the shopping cart are nothing more than additions and subtractions. You need to constantly debug by yourself to find out what is unreasonable

Through operations such as view and bindtap in buttons, the modification of product information and the processing of shopping cart status can be achieved.

For example, reduce the number of items in the shopping cart.

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 framework introduces

The CSS added in the global CSS style is adapted to all pages. From this, weui can be introduced, which is really convenient to make some interfaces

@import './styles/weui.wxss';

Summary

The components of the WeChat mini program, the API is very powerful, it requires continuous exploration, continuous learning, and reading more documents
Be good at using effective resources, such as iconfont esay -moc weui etc.
Be careful when cutting pages, and be good at using flexible layout and other layout methods. The rpx of the mini program is really easy to use
Don’t Write code in one go. When functions are reusable, they should be abstracted and encapsulated so that the code is easy to maintain and read.
The above content is the Hema Fresh WeChat applet. I hope it can help everyone.

Related recommendations:

Introduction examples of WeChat mini program development

Detailed explanation of WeChat mini program video, music, and picture components

A case study on how WeChat applet can obtain WeChat exercise steps (picture)

The above is the detailed content of WeChat Mini Program-Imitated Hema Fresh Food. For more information, please follow other related articles on the PHP Chinese website!