Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge about how to develop Wechat e-commerce Mini Program. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.

The manufacture of the bottom navigation bar of e-commerce

I think you must be no stranger to e-commerce. Generally, the bottom navigation bar of e-commerce has the following home pages, categories, shopping carts and personal centers. So let's follow this. When it comes to navigation at the bottom, I don't know if you remember the role of app.json in WeChat Mini Programs's introduction (1). If you don't remember, please take a look, app.json is used to configure page paths and navigation bar properties, then we need to add these interfaces to the home page, category, shopping cart and personal center interface in page, so add the following code to app.json 's page Write the page path and the system will automatically create the interface for you.

"pages": ["pages/home/home", "pages/classify/classify", "pages/cart/cart", "pages/mine/mine", "pages/index/index"]

OK, now that we have added four interfaces, how do we do the bottom navigation bar? add another property to app.json today, that is, you can configure the navigation bar in app.json and add the following code to app.json.

"tabBar": {"color": "# 858585", "selectedColor": "# f0145a", "backgroundColor": "# ffffff", "borderStyle": "# 858585", "list": [{"pagePath": "pages/home/home", "iconPath": "images/bottomNav/home.png", "selectedIconPath": "images/bottomNav/home_select.png" "text": "Home"}, {"pagePath": "pages/classify/classify", "iconPath": "images/bottomNav/classify.png", "selectedIconPath": "images/bottomNav/classify_select.png", "text": "Classification"}, {"pagePath": "pages/cart/cart" "iconPath": "images/bottomNav/cart.png", "selectedIconPath": "images/bottomNav/cart_select.png", "text": "shopping cart"}, {"pagePath": "pages/mine/mine", "iconPath": "images/bottomNav/mine.png", "selectedIconPath": "images/bottomNav/mine_select.png" Text: "my"}]}

TabBar system comes with fields, can not be changed, add this field is to tell the system you want to add navigation bar, color, selectedColor, backgroundColor from the literal meaning of the field, respectively, the corresponding properties are default font color, checked font color, background color. Focus on borderStyle, this definition of the bottom navigation bar and the interface boundary, the property is a bit special, special in that if you do not want this dividing line, you can set the property to white, no matter what you write, the system is understood to add this dividing line, do not believe you can try. The list property naturally sets the interface for the corresponding navigation bar.

PagePath: the page path, which is the path you wrote in page.

IconPath: default navigation bar picture path

SelectedIconPath: check the path of the image

Text: navigation bar name

What I want to say here is that the picture path must be written correctly, otherwise the picture will not be displayed if you can't find it. Here is my navigation bar picture-extraction code: 8zwe you can create the corresponding folder according to my picture path, as shown below.

What to pay attention to:

When adding tabBar, don't forget that there is a comma on it, which is used to distinguish each attribute, so every time you add an attribute, you should separate it with a comma, which you should pay attention to, or you will report an error. This is the error log that I removed from punctuation. Generally, the error log Expecting 'EOF' XXXXXXXXX,got STRING is a syntax error, so check carefully to see where something is missing.

There is in the .json file is not allowed to write comments, I originally wanted to add a little comment to facilitate readers to read, but there will be the following error message, the solution is very simple, just delete the comment

infer other things from one fact

We have created four navigation bars, so can I add two more if I want to?

You may think it's easy to try to add two to the list list, and I did the same, but something went wrong. The system will report errors, you know this time, there can only be five at most, there is no way, who let Wechat is the boss, people set a maximum of five, then only a maximum of five!

I don't know if you have noticed that the navigation bar defaults to check the first page with red, so I want to check the category as red by default. What should I do?

This is a bit difficult. At first, I thought that changing the first home attribute in list with the classify attribute in the tabBar attribute should be solved, but this is not the case, because there is no effect, and later it was found by mistake. I'll give you a little hint, have you noticed that the first path of pages is what pages/home/home, yes, that's it, if you want to classify classify as the default check. You only need to change the path of home and classify path in the pages attribute, save, recompile, and the effect you want will come out. The summary here is that tabBar is the first line path in page as the default check option.

Production of top navigation bar for e-commerce

Now that we have talked about the navigation bar, we might as well explain a little more today, and then teach you how to make the top navigation bar.

This navigation bar is not like the bottom navigation bar, because it is a low-level navigation bar at the page level, so to write it on the page, you can add the following code to the page where you want to add the top navigation bar. Here, take the interface of the home page as an example:

Home.wxss

/ * pages/home/home.wxss * / page {display: flex; flex-direction: column; height: 100%;} .navbar {flex: none; display: flex; background: # fff;} .navbar .item {position: relative; flex: auto; text-align: center; line-height: 80rpx; font-size:14px } / * Top navigation font color * / .navbar .item.active {color: # f0145a;} / * Top indicator bar attribute * / .navbar .item.active: after {content: "; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 6rpx; background: # f0145a;}

Home.wxml

{{item}}

In home.wxml, we have already explained the bindtap field, which is the identifier of the event listener. The event name is "navbarTap". You can find this event wx:for in home.js. Use the wx:for control attribute to bind an array on the component, and you can use the data of each item in the array to render the component repeatedly. By default, the subscript variable name of the current item of the default array is index, and the variable name of the current item of the array is item by default. This is the official explanation. To put it bluntly, item is called the value of the variable by default, and index represents the value of the variable. It is not quite clear. Please see the explanation of this Wechat wx:for.

* wx:for= "{{navbar}}" * means array data of illusory navbar

{{item}} these are the values in the navbar array, such as skin care, makeup, etc.

Wx:key= "unique" to specify the unique identifier of the item in the list

* data-idx= "{{index}}" * stores some data to be called in home.js, where data-xxx,xxx is the data keyword you provide to home.js, and home.js acquires the data in xxx by obtaining xxx keywords.

Home.js

/ / pages/home/home.jsvar app = getApp () Page ({data: {navbar: ['skin care', 'makeup', 'perfume', 'personal care'], currentTab: 0,}, / / navigation toggle monitor navbarTap: function (e) {console.debug (e); this.setData ({currentTab: e.currentTarget.dataset.idx})},})

Home.js, I have read WeChat Mini Programs's introduction (2) here. We all know that .js is usually used for data data and event monitoring in page pages. Here data has a navbar navigation bar data and a currentTab to record the current location. Fields can be named freely, and just match when assigning values.

NavbarTap remember the data-idx attribute in home.wxml. Here, currentTab: e.currentTarget.dataset.idx passes the Tab selected by the current user to currentTab. In order to verify the result, I added an output log console.debug (e); you can view the output log on the console. I choose to click on makeup, and the output data idx:1 happens to be the location of makeup.

These are all the contents of this article entitled "how to develop Wechat e-commerce Mini Program". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.