If you like it, you ’ll like it

Imitate the like recruitment mini program

Foreword

I have learned the applet for about a month, from knowing nothing about the applet, to gradually getting familiar with the applet, I am actually very happy. Now I see a small program, what I think is not how to use this function, but how to realize this function, how to set the data, what is the logic, this is the small project for me The biggest help. This small program took a week, thinking about taking advantage of just finished, quickly make a small project to consolidate the content of my learning, the effect is still very good. This small program is not very advanced. If you are a great god, you can jump out of the article. You know all this knowledge, so do n’t waste your time. Just keep some time to see other useful knowledge. If you are also a novice like me and want to consolidate your learning content, then you can take a look at my article, I will summarize my stomping pits, some solutions and the realization of some effects, maybe for you helpful.

Implementation of small functions

Reminder

Swiper component dot position change

The default position of the dot of the swiper component is in the middle, and it took a long time to find the setting property of the dot position

.product-image .wx-swiper-dots.wx-swiper-dots-horizontal{
     margin-bottom: 2rpx;
     margin-left: 300rpx;
}

Swiper sliding synchronization changes content

Bind the bindchange event on the swiper component, then use current to represent the current slider id, and then bind the current of the data layer in the view to display text to achieve synchronization
wxml:

    <swiper class="product-image" indicator-active-color="#fff" indicator-dots="true" bindchange="changeDec" current="{{current}}" circular="true">
            <block wx:for="{{productImg}}" wx:for-index="index" wx:key="id">
                <swiper-item>
                    <image src="{{item.url}}" class="slide-image" mode="aspectFill" />
                </swiper-item>
            </block>
      </swiper>
     <view class="product-dec" data-id="{{current}}">{{name}}</view>

  changeDec: function (e) {
    let current = e.detail.current;
    switch (current) {
      case 0:
        this.setData({
          name: '有赞零售'
        })
        break;
      case 1:
        this.setData({
          name: '有赞云'
        })
        break;
      case 2:
        this.setData({
          name: '有赞微商城'
        })
        break;
    }
    this.setData({
      current: current,
    })
  },

The distance between the title bar title and the two sides

Because weui is used, the style defaults to the original style, but I want to change the distance between them, and then find the setting method in the source code

.weui-loadmore__tips_in-line{
  padding: 0 2em;
  color: #6e6e6f;
}

Hide the line of the cell on the list

How to hide the line of the upper border? After trying for a long time, I thought it was a border problem. Later I found that this is a problem of pseudo elements. This is also based on the analysis of the source code. It is found that looking at the source code can really solve many problems.

.company-adress>.weui-media-box:nth-child(3):before{
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid #e5e5e5;
  left: 7px
}
.company-adress>.weui-media-box:nth-child(4):before{
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid #e5e5e5;
  left: 7px
}

The problem of the map component obscuring the content

Since the map component has the highest priority, I tried a lot, and wanted to put the view up, but in the end, I failed to return. Finally, Baidu found that cover-view can be used, but the range of cover-view can not be used. I haven't found a better way for now

The problem that spaces cannot be inserted between texts

Sometimes it is not necessary to add a text label to the content described by some text, but what if there is space between the content? I just started testing with & nbsp and found that this is useless directly in the small program. You must add decode = "{{true}}", and remember to add a semicolon, otherwise it is useless

<text decode="{{true}}" class="titleTag">#简历处理快如闪电&nbsp;&nbsp;&nbsp;#很少回聊天信息　#早上活跃</text>

However, I prefer to use the second method: change the input method to full-width, and then you can use spaces to play spaces.

Data manipulation

Data transfer between pages
- The url parameter of wx.request or navigator is substituted into a personality value, and the data between the other pages is matched to realize the synchronization of the data between the pages
- Cache setStorage, getStorage, set on one side and get on the other
- globalData, global variable, assigned by getApp (). globalData method

State operation experience
As long as the state operation is involved, you can consider using the ternary operator, control the state by true or false in the data layer, and then control the style by the class name in the view layer

Tools to share with websites

Some of my thoughts

The tabBar at the bottom can display the selected effect by setting a large and a small picture, so that there will be a dynamic effect, will it experience a little better?

Final summary

This project really deepened my understanding of small programs, but more importantly, I felt that my ability to solve problems independently improved a lot. When I finally concluded, I found that I stepped on a lot of pits, although it was also because I feel painful not solving the problem, but now I feel great when writing an article. I summarize the road I have traveled. The process of introspection is really pleasant, and I know more about myself. Finally, I hope that I will be more The better, I hope to bring better projects to the community in the future, and finally attach the source code