preface

This year is a small program is very hot year, so recently in self-study micro channel small program, so I plan to masturbate a small program out, because I just self-study soon. Did a relatively simple furniture small program. Of course, in this also encountered some problems and bugs, here to share with you, so as to help more friends. If there are shortcomings, I hope you put forward valuable suggestions. So we can grow together and make progress together.

A brief introduction to wechat applet

As we all know, with more and more APPS appearing in the APP store, leading to mobile phone download more APP will lead to mobile phone card, so at this time wechat small program vacated. Users simply scan or search to open the app, reducing the number of times we download apps.

  1. Development environment: WXML(HTML),WXSS(CSS),Javascript
  2. Development tools: VScode, wechat developer tools
  3. Development process: After downloading wechat developer tools, you will have your own AppID. Wechat applets have official wechat applets development documents

Let’s talk about the little program I made

All things are difficult at the beginning. The key is to take the first step. Here I will share my implementation process and the pitfalls I encountered in practice. Take a look at the home page effect first

.img-box image{
  width: 100%;
  height: 100%;
}
.img-box image:after{
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  padding: 50px 20px;
}
Copy the code

1: realize the rotation effect of furniture

Small program by implementation is to use the swiper components, slider container view there are indicator – the dots, the autoplay, setinterval and other properties, can set up automatic playback, the time interval. Insert images can be looped with wx:for.

WXML code:

<swiper class="section "indicator-dots="{{true}}" autoplay="autoplay" setInterval="3000" duration="500">
Copy the code
<view class="img-box"> <block wx:for="{{slides}}" wx:key="id"> <swiper-item> <image src="{{item.image}}" Mode ="aspectFill" /> </swiper-item> </block> </view> </swiper> The effect is shown belowCopy the code

2: Navigate’s jump problem

After clicking add to shopping cart, the binding event should jump to another page, but there was no effect and no error. I thought there was something wrong with my spelling or path, but there was no problem after I checked, and finally I found a pit. This is the tabBar page to jump to, according to the default jump is not allowed, check the development document found

Jump page API

3: How to add goods to shopping cart? How to control the quantity of goods purchased and calculate the price

Originally, I wanted to click the picture to enter the details and then click Add to shopping cart to save it to the shopping cart in the background. However, due to the limited knowledge of self-study, the back-end has not learned it yet, so I can only add a binding event to jump to the shopping cart.

  selectList(e){
    let selectAllStatus = this.data.selectAllStatus;
    const index=e.currentTarget.dataset.index;
    letcarts=this.data.carts; const selected=carts[index].selected; carts[index].selected=! selected; selectAllStatus = carts[index].selected; //if( carts[index].selected=! selected){ // selectAllStatus:false;
    // }
    this.setData({
      carts,  
      selectAllStatus,
    });
    this.getTotalPrice();
  },
  deleteList(e) {
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    carts.splice(index,1);
    this.setData({
      carts: carts
    });
    if(! carts.length){ this.setData({ hasList:false
      });
    }else{
      this.getTotalPrice();
    }
  },
  addCount (e){
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    let num = carts[index].num;
    num++;
    carts[index].num = num
    this.setData({
      carts
    })
    this.getTotalPrice();
  },
  minuCount(e){
    const index = e.currentTarget.dataset.index;
    let carts = this.data.carts;
    let num = carts[index].num;
    if(num<=1) return false;
    num--;
    carts[index].num = num
    this.setData({
      carts
    });
    this.getTotalPrice();
  },
  selectAll(e){
    letselectAllStatus = this.data.selectAllStatus; selectAllStatus = ! selectAllStatus;let carts =this.data.carts;
    for(leti=0; i<carts.length; i++){if( carts[i].selected=! selectAllStatus){ selectAllStatus:false
      }
      carts[i].selected=selectAllStatus;
      
    }
    this.setData({
      carts,
      selectAllStatus
    })
    this.getTotalPrice();
  },
  getTotalPrice() {let carts = this.data.carts;
    let total = 0;
    for(leti =0; i<carts.length; i++){ // total += carts[i].num *carts[i].price;if(carts[i].selected){
        total+= carts[i].num * carts[i].price;

      }
    }
    this.setData({
      totalPrice:total.toFixed(2)
    })
  }
Copy the code

4. How to obtain the profile picture and information of users who log in to wechat

  • 1. Use wx.getUserInfo to directly obtain the wechat profile picture and nickname.
  • 2. When we use the small program wx.login API to login, we cannot obtain more information by directly using wx.getUserInfo, such as the openid of wechat users. Here I use the first method WXML code:
        <view class="userinfo">
          <button wx:if="{{! hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"</button> <block wx:else>
            <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
            <text class="userinfo-nickname">{{userInfo.nickName}}</text>
          </block>
        </view>
Copy the code

Js code:

onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true})}else if(this.data.caniuse){// Since getUserInfo is a network request, May be on the Page. The onLoad before return / / so I join the callback to prevent this app. UserInfoReadyCallback = res = > {enclosing setData ({the userInfo: res.userInfo, hasUserInfo:true}}})else{// Handle wx.getUserInfo({success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo:true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true})}Copy the code

The overall effect

The last

This small program and some function is not implemented, such as a shopping cart, user information stored in the background of the problem, after some knowledge such as self-study after the end, I still have to do to make this small program complete, like everyone can focus on my lot, we can learn together and gay together, also hope you can give me some valuable opinions are put forward

Source: github.com/duzuimoye/duzuimoye-xxf_fullstack/tree/master/duzuimoye-xxf_js_fullstack/wxapp/furniture looking forward to your star and fork

The first time to write an article, the project may not be very good, the expression may not be clear, please give a little more encouragement to the novice, click a like, leave your suggestions