preface

Words to write before the project:

As the end of the semester approaches, all subjects have finished their courses, followed by various courses. As the saying goes, college students spend the first five months of their life soaking their feet in warm water, and then the last month is to drink the water soaked their feet in the first five months. As a daily touch fish used to touch fish king, class design is the most headache but can not escape a link. This class is to imitate a wechat small program, according to the completion of the function and difficulty to score. As the king of fish, I naturally think of the “look simple” and good-looking interface (mainly rely on pictures to support the level of appearance) and every day in the use of ———— ancient tea point single small program. In the process of implementation, I found that the original looks simple guming small program is actually full of details. It makes me, the king of fish, cry.

Effect display (Imitation is the last version of the ancient tea small program, because in the imitation of small program middle tea updated once)

Home page

Order page

The choose and buy page

The order page

My page

The above is the main function of the ancient tea small program we imitate.

First, the need to prepare before the start

  • Application account: small program registration, fill in the information and submit the corresponding information, you can have their own small program account.

  • Development tools: wechat development tools

  • Data Source:

    Various pictures of ancient Tea can be downloaded from Fiddler

    How to use Fiddler to grab pictures

  • Icon: Alibaba vector icon library

  • Vant downloadp

Initialize a small program

  1. Create a new folder
  2. Open the applet and create a new applet
  3. Directory structure, as shown below
WEAPP | - cloudfunctions | - miniprogram | | - assets / / static variables - GIF / / grab GIF | - the ICONS / / is the result of iconfont | icon icon - images / / fetching static image | | - componnents / / components - the panel / / shopping cart component | - | - db database / / database. Js / / all data location | | - pages / / each page - home / / homepage | - home. Js / / js file | - home. WXSS / / CSS style file | | - utils / / global function - app. Js file/method/system | - app. Json / / | system global configuration file - app. WXSS / / global stylesheets | - config. Json / / domain configuration file | - READMECopy the code
  1. Applets app.json file configuration
"pages": ["pages/home/home",// homepage "pages/jump/jump",//shopping false jump page "pages/shopping/shopping",// display each storefront information page "Pages /order/order",// mY page "pages/my/my",// my page "pages/teaList/teaList",// my page "pages/orderDetail/index"// order details page], "Permission ": {"scope.userLocation": {"desc":" your location information will be used for applets' location "}}, // requests access to the user's location (necessary for applets to use location) // window" window": {"backgroundColor": "#F6F6F6",// window backgroundColor" backgroundTextStyle": "Dark", / / the style of the font, loading chart drop-down background, support only dark/light "navigationBarBackgroundColor" : "# FFF ",// top TAB background color "navigationBarTitleText": "Old tea ",// top display title "navigationBarTextStyle": "Black "// Navigation bar title color, black/white only}, // TAB navigation bar "tabBar": {"selectedColor": "#000000", // Select the style "borderStyle": "Black ",// tabbar on the border color, only support black/white "backgroundColor": "# FFF ",// backgroundColor /** * TAB list, minimum 2, maximum 5 * text: **/ "list": [{"text": "home ", "pagePath": "pagePath": "page route" * iconpath: iconpath * selectIconPath: icon position **/ "list": [{"text": "home ", "pagePath": "pages/home/home", "iconPath": "assets/icons/home.png", "selectedIconPath": "assets/icons/home-active.png" }, { "text": "Order", "pagePath" : "pages/jump/jump", "iconPath" : "assets/ICONS/shopping. PNG", "selectedIconPath" : "Assets/ICONS/shopping-activity.png"}, {"text": "order", "pagePath": "pages/order/order", "iconPath": "Assets/ICONS /order.png", "selectedIconPath": "assets/ ICONS/order.active"}, {"text": "my ", "pagePath": "pages/my/my", "iconPath": "assets/icons/my.png", "selectedIconPath": "Assets/ICONS /my-active.png"}]}, // Global call Vant component "usingComponents": {"van-search": {" ICONS /my-active.png"}]}, // global call Vant component "usingComponents": {"van-search": "./miniprogram_npm/@vant/weapp/search/index", "van-cell": "./miniprogram_npm/@vant/ regenerative p/cell/index"}, // default style" sitemapLocation": "sitemap.json", "style": "v2"}Copy the code

5. Create two tables

Note: be sure to create tables with the same name

These finish can start to do an ancient tea point single small program!

Problems encountered during development and solutions

1. Swiper components

Swiper is used in many places in Guming mini-program. We have also realized the effects of Guming mini-program by reviewing the documents. Here are some of my experiences after learning

Result:

  1. Swiper is the slider view container. Only components can be placed, otherwise undefined behavior will result.
  2. The autoplay type isbooleanThe default value isfalseOptional: Indicates whether to automatically switchWe change its value to true and it will play automatically
  3. Circular type isbooleanThe default value isfalseOptional: whether to use cohesive sliding
  4. Each swiper-item uses a placeholder to bind the position and id of the image

2. False page redirect

In the development, we found that the shopping page of Gu Ming (i.e. the ordering page), when we click, there is no navigation bar below, after querying the information, we found that the small program did not provide a way to make the navigation bar temporarily disappear, when we were confused. We found that when clicking on a single page, the page jumps. So we conclude that this shop selection page is probably just a normal page and not a navigation page. (There are many differences between the navigation bar page and the normal page in the small program)

Solution:

As long as the onShow method in the navigation bar page, add a jump page method, so that the navigation bar page after loading (but actually wrote nothing), automatically jump to our rendered page (that is, the real order page). The solution code is as follows:

onShow: function () {
   
      wx.navigateTo({
        url: '/pages/shopping/shopping',
      })
    },
Copy the code

But with the emergence of fake pages (jump pages), there are also a lot of problems surfaced. An example is the failure of the wx.navigateBack (jump back to a previous or multi-level page) method.

To return to the previous page when clicking this button, use wx.navigateBack to return to the previous page or multi-level page. No matter how many pages are set to return to the parent, it will remain there.

Causes of the problem:

Because we set up a fake page, select the storefront page is one level above the fake page we set up, the fake page in the onShow method. Wx. navigateBack is completely disabled by the time the store page is loaded.

Wx. NavigateBack failure

From the second point we know that wX. navigateBack has completely lost its function in this case. But in the ancient Ming small program, this jump is indispensable, because once missing, there will be a serious page jump BUG. So we had to come up with new solutions.

Solution:

After some discussion, we chose to rewrite a method to implement the functionality of wx.navigateBack. We found that if you click on the order page from the home page and go back, you’re going back to the home page. If you click from the order page to the order page, you are back to the order page. If you click from my page to my order page, you’re going back to my page. Therefore, we consider that in the three onShow methods (home page, order page, my page), we give their jump addresses to Storage (stored by the Storage). The solution code is as follows:

Put the address in

onShow: function () { wx.setStorageSync('address', "/pages/home/home"); },// This is the home page, the other three pages and so onCopy the code

Select the storefront page to take out

backLastPage() {
    let address = wx.getStorageSync('address')
      wx.switchTab({
        url: address,
      })
  
 },
Copy the code

At this point, the problem of wX. navigateBack failure is completely resolved

You see, one problem at a time, one solution at a time. At this time, I directly kill god possessed body, feel any problem can KO

4. Customize the style of the top column

We found that the Settings we set up in app.json are global in nature. However, when we select the storefront page, its top bar is different from the global top bar

Therefore, we need the top bar of the page for DIY store selection. Just add “navigationStyle”: “custom” to the JSON file in the DIY page to create a top bar of your own in WXSS

Five, small program in the use of map components

Tencent location services launched “micro channel small program solutions”, from the retrieval API, basic map components, personalized, plug-ins, industry solutions and other levels, for the needs of different scenarios small program developers to provide complete map capabilities. Personalized map in the small program, is already given the map component, so it is very convenient to use. The following is a summary of the use of map components of the Guming small program we designed:

  1. Longitude of typenumberNo default value is required to provide central longitude
  2. Latitude of typenumberNone Default value is mandatory for providing central latitude
  3. The scale of typenumberThe default value is 16. This is not mandatory. Use the mouse pulley to control the zoom level
  4. The show – the location of typebooleanThe default value isfalseThe optional function is to display the current registration point with orientation
  5. Markers of typeArray.markerNo default value Non-mandatory marker point used to display the location of the marker on the map (i.e. the location of the milk tea shop)

And markers are worth studying

Markers:

  1. Id | typenumberMarker click event callbacks with no default value that are not mandatory return this ID
  2. Latitude | typenumberNone The default value is a mandatory floating point number. The value ranges from -90 to 90
  3. Longitude is | typenumber None The default value is a mandatory floating point number. The value ranges from -180 to 180
  4. IconPath | type isstringNone The default value is mandatory support network, local, code package path
  5. Width is | typenumber/stringNone Default value Not required The default is the actual width of the image
  6. Height is | typenumber/stringNone Default value Not mandatory The default value is the actual height of the image

In the guming mini program we imitate, we cannot completely simulate The Guming mini program because there is no physical data of the store. However, in order to increase the user’s experience, we write a method ———— to obtain the current location of the user. And with the user as the origin, the plane coordinate system is established. Six storefronts were generated (randomly placed), but the storefront names were all dead data. The maximum possible imitation of the map function of Guming small program, the implementation code is as follows:

onLoad: function () { var that = this; wx.getLocation({ type: 'gcj02', success: (res) => { var latitude = res.latitude var longitude = res.longitude that.setData({ latitude: latitude, longitude: Longitude,})}})// Get your longitudeCopy the code

Although these have not learned, but still through my access to information, did not expect to be finally solved by me, at this time a strong sense of achievement arises spontaneously

Six, when selecting the store, there will be a yellow border and confirm the store prompt box.

Through the previous effect display, we can see that in the page of store selection, when we choose different stores, the four sides of the store information will appear yellow borders to show that it has been selected, and a dialog box will appear to determine the information of the store.

To achieve this effect, we first bind data-index to the clickable storefront (view) while writing THE WXML, get the index value of the view from the outermost bindtap binding method, and assign the index value to the variable activeNavIndex

The judgment is then made using a ternary operator in WXML

Finally, write out the default style and click style in WXSS

There are two points worth noting here:

  1. ActiveNavIndex (the variable we set) should default to 0 so that when we don’t click, the first store will default to a yellow border, which fits our design. If the future needs are different (such as default style or the most popular stores first appear yellow border), you can also set according to their own needs
  2. In the default style, also set the border (border is used here), the width of the click should be the same as the width of the control variable effect. By default, you can make the border white or add transparency to make it “disappear.” If you do not use the border of the default style, the global style will change when clicked, which is very awkward.

Then there’s the dialog box that appears after you click it, and the widget gives you a wx.showModal method

In the small program, very convenient to write the dialog box, this is also one of the advantages of small program, very convenient development.

7. Development of page menus for selecting commodities

In fact, AT the beginning, I refused to solve this problem. After all, I am the king of fish. How could such a difficult problem be handed to me? I was trying to sneak a paddle. But I can’t just stop here when I think I’ve solved all my problems so well. So I went back to….

Later, I found that there were traces of this menu. The development of the left menu bar was similar to sixth point, adding click events and burying index…… It’s worth mentioning, however, that there are some reasons for my WXML design. Using border-left didn’t give us what we wanted, so we used another method to add the click style. ———— made a pseudo-class, which is another solution to this problem, if you need to click on something more fancy or complex. Pseudo classes should give you a lot more room to play with.

Then the hard part of the problem is the goods bar on the right. Before we can solve this problem, we need to learn scroll in our little program.

Scroll to summarize:

  1. Scroll – y typebooleanThe default value isfalseThe optional function is to allow vertical scrolling
  2. Scroll – with – animation typebooleanThe default value isfalseThe optional function is to animate the transition when setting the scrollbar position
  3. Enable – back – to – top of typebooleanThe default value isfalseNon-mandatory function is iOS click on the top of the status bar, Android double click title bar, the scroll bar back to the top, only vertical support
  4. Scroll – into – the view type isstringNone The default value is not mandatory because the value should be some child element ID (id cannot start with a number). You scroll to the element in which direction you can scroll
  5. Scroll to top type isnumber/stringNo default value is not mandatory. This is used to set the vertical scroll bar position
  6. Bindscroll type iseventhandleDetail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

Now that we know the basics, let’s move on to this difficult point.

First of all, the data is very well designed

[{title:' raw coconut latte ice cream ', tag:' new ', desc:' pearl, ice cream, raw coconut milk, coffee, raw milk...', price:'16', pic:'https://img.gumingnc.com/newton/20210719053749CST84721626687469148.png?x-oss-process=image/resize,w_204,m_lfit ' }, {title:' longwell cream ', tag:' new ', desc:' longwell cream ', price:'16', pic:'https://img.gumingnc.com/newton/20210719041227CST36011626682347798.png?x-oss-process=image/resize,w_204,m_lfit' }, {title:' Paoluda ', tag:' new ', desc:' sago ', price:'17', pic:'https://img.gumingnc.com/newton/20210609082139CST16401623241299533.png?x-oss-process=image/resize,w_204,m_lfit' } ] }Copy the code

This is all the data for one of these categories. The project has eleven such classes

The second is the layout of WXML, which is also very elegant, and looks something like this

You know the result, and you’re ready to complete the functionality. First, since the scroll into view receives an ID, we will insert an index for each category and add id=’position{{index}}’. Then we will add a setData for the click event in the left navigation bar. Because we buried an index on the left hand side, the index on both sides corresponds to each other. So there are

this.setData({ 
        idx: e, 
        toView: 'position' + e 
      })
Copy the code

At this point, we’ll add the scroll with-animation and set it to true. At this point, when we click on the left navigation bar, the right side will correspond to the product. Then, in the onLoad function, we filter out all views with the class name containing position.

 wx.createSelectorQuery().selectAll('.position').boundingClientRect(function (rects) {
        
        that.setData({ positions:rects })
      }).exec();
Copy the code

Rects = left, right, top, bottom, width, height; rects = left, right, width, height; If a callback function is provided, node information is returned in the callback after the exec method of selectQuery is executed. In this way, the information for each broad category is stored.

And then finally, I’m going to write bindscroll,

If the category is less than or equal to the width of the scroll bar plus swiper, we add it to the empty array arR and get the index embedded in the visible category. Return to the IDX of the left navigation bar so that the selected style appears in the corresponding left navigation bar. A successful menu is complete!

Eight, the user’s hierarchy and over ten free one activity

This is a simpler approach, but it greatly increases user interaction. It looks big and practical but very simple. First, from the user table, pull out the historical total cups. Also take out the user’s VIP level at this time.

These are the problems we solved in this project

Note:

Here, due to the nature of the array and the fact that no VIP level is greater than or equal to 0, the level corresponds to the experience bar one by one. That is, to reach level 1, six cups, level 2, 12 cups, level 3, 18 cups, and level 4, 30 cups…… If you reach the experience bar, your level is increased by one. If not, return the current level.

Four,

This development, learned a lot of small procedures related knowledge. Think of the difficulties encountered along the way, now finally can draw a satisfactory full stop. Compared with knowledge reserve, problem-solving methods and thinking are more important things. Bumps and bruises along the way, but also the dry five months of foot water. In the development process, I also deeply feel that the micro channel small program is really friendly to the new person, many methods of small program are given ready-made. Very convenient (manual like), small program is really suitable for new learning front end. Can be used as the front of the stepping-stone oh, after all, such a dish of me, also can write such a small program (not to brag). Small program is really a little effort, you can immediately effect a knowledge.

In addition, there are still many functions that are not perfect in this project, and some details can be further optimized. There is still a long way to go. Hope everyone can give valuable opinions, if there are mistakes and deficiencies in the article welcome criticism and correction. Feel free to discuss any applet questions in the comments section

If you think this article let you learn the knowledge, please give a free like ~, this is really important to the creator T.T.

Also, the project address will want a free STAR (the guy you guys will be. ◕ ‿ ‿ ◕.) Painted づ