preface

The happiest thing a programmer can do is, on a hot summer’s day, tap code while drinking coffee and blowing air conditioning. Because these days just contacted the micro channel small program, so the initiation of a small program idea. In the development of the small program encountered a lot of problems, but also gained a lot of harvest. I’ll describe some of the problems I encountered and the ones I’ve solved. Hope to bring you some help

Small program details

Effect of the home page

swiper

  • Floating CSS
.starbucks-list:nth-child(n){
  float: left;
  margin-left: 40rpx;
}
.starbucks-list:nth-child(2n){
  float: right;
  margin-left: 0;
  margin-right: 40rpx;
}
Copy the code

A few features will be discussed in detail

  • Scroll x and picture switching

I have to make fun of some of the small programs developer tools and maybe it's a computer problem and the scroll-x of developer tools doesn't work on computers, it works on real computers,Copy the code

Let’s talk about picture switching: I have bound an ID on each picture. When clicking on a picture, I will judge whether the ID you click is the same as the ID you bind. When the judgment is true, I will do data interchange. The border of the image is judged by a ternary operator and a cross in the upper right corner. (I have to say that data binding is a good thing.)

The following code

wxml

    <scroll-view scroll-x="{{scrollx}}" class="list-pic">
        <view class="picture" wx:for="{{listPic}}" wx:key="{{index}}">
            <image class="{{id==item.id? 'check':''}}" data-id="{{item.id}}" data-url="{{item.url}}" src="{{item.url}}" bindtap="showChoose"
            />
            <image wx:if="{{id==item.id}}" class="goupic" data-id="{{item.id}}" src="{{goupic}}" />
        </view>
    </scroll-view>
Copy the code

js

  showChoose(e){
    const id = e.currentTarget.dataset.id;
    const url = e.currentTarget.dataset.url;
    // console.log(e)
    this.setData({
      titlePic: url,
      id:id
    })
  }
Copy the code
  • Shopping list making and shopping history

rendering

In fact, the switch between shopping cart selection goods and the picture above is basically the same, bind a value, judge which goods you click, change the data of the current goods, just need to judge

wx:if="{{item.num! = 0}}"
Copy the code

When the quantity is 0, the minus sign and the quantity disappear at the same time.

Is it easy? The structure code is as follows:

 <view class="starbucks-list" wx:for="{{starbucksList}}" wx:key="{{index}}">
        <image bindtap="checkDrink" data-imgnum="{{item.imgnum}}" class="drinkImg" src="{{item.url}}" />
        <text class="description">{{item.name}}</text>
        <text class="price">￥{{item.price}}</text>

        <view class="addNum" bindtap="addNumber" data-index="{{index}}" data-status="{{item.status}}">

            <image wx:if="{{item.num! = 0}}" src="{{delNum1}}" />
            <image wx:else="" src="{{addNum}}" />
        </view>
        <view wx:if="{{item.num! = 0}}" data-index="{{index}}" class="delNum {{item.num==0? 'out':''}}" bindtap="delNumber"
            data-status="{{item.status}}">
            <image src="{{delNum}}" />
        </view>

        <text wx:if="{{item.num! = 0}}" class="listNum {{item.num==0? 'out':''}}">{{starbucksList[index].num}}</text>

        <view wx:if="{{item.num! = 0}}" class="xiabiao {{item.num==0? 'out':''}}"></view>
    </view>

Copy the code

However, there is also a difficulty that has bothered me for a long time, which is about Storage. After the successful purchase, the purchase history needs to be saved locally. At the beginning, MY idea was to take the subscript of the product clicked as a key when clicking on each plus sign, and then store some information in it. So each key is dynamic, and we just need to find the key on the next page to get the data. However, due to the jump of the page, I could not click the subscript of the product before I found it in the history interface. So I gave up (if you have a solution, you can talk to me privately).

I had to find a different way to solve this problem, so I came up with an array, where each item has a default location. Pushed into an array based on the index of each clicked item, marked by a subscript. Then there’s the bug. When you have an unselected item, the array takes up undefined by default, but when you loop through the array with wx:for in history, undefined takes up a cell, causing your WXML to fail. The solution is to use the array’s split() method to cancel out the empty ones.

 onLoad: function (options) {
    const historyList = this.data.historyList var that = this wx.getStorage({// get the data key:"key",
      success: function (res) {
        // console.log(res)
        for (let i = 0; i < res.data.length; i++) {
          historyList[i] = res.data[i]
        }
        for (let i = 0; i < historyList.length; i++) {
          if (historyList[i] == null) {
            historyList.splice(i, 1); i = i - 1; // console.log() {// console.log() {// console.log() {// console.log() {// console.log() {// console.log();historyList);
          }
        }
       
        that.setData({
          historyList,
          hasHistory:true,})}})Copy the code
  • Product Details interface
  • Store details and map components

Tencent Map API

Map API is a very practical component, here used the keyword search (search) interface, directly query the nearby Starbucks stores, which can also choose long address and short address, basically you want the data have, or more convenient. Must be amicable wave.

 qqmapsdk.search({
      keyword: starbucks,
      address_format: 'short',
      page_size: 20,
      success: (res) => {
      },
      fail: function (res) {
      },
      complete: function (res) {
      }
Copy the code

The pop-up layer animation is an animation component that creates its own animation effect

checkImg(e) { var that = this; Var Animation = wx.createAnimation({// Animation duration: 500, // Define the animation effect, currently uniform timingFunction:'linear'}) // assign this variable to the current animation. animation = animation // first offset on the y axis, then complete an animation with step() animation.translatey (400).step() // usesetData changes the current animation that.setData({// throughexportAnimationData: animation.export(), // change the Wx in the view:if
      hascheck: true}) / / setsetTimeout to change the y offset to achieve a sensible slidesetTimeout(function () {
      animation.translateY(0).step()
      that.setData({
        animationData: animation.export()
      })
    }, 100)
  },
Copy the code

summary

For example, polyline should not be a straight line in the planning route of two places, and street view and other functions need to be improved. Details determine success or failure. In order to make a good work, we need to constantly improve some details. This small program I will continue to improve it, if you like, you can pay attention to me, we can communicate and learn together, but also hope to give me some valuable advice

My Github:github.com/liaoruochen

This is the first time to write an article, maybe the project is not particularly good, the expression is not so clear, I hope you can forgive me, if you like, you can give me your care, thank you!