Construction of https framework for WeChat mini program mall development and implementation of top and bottom navigation

The content of this article is about the construction of the https framework and the implementation of top and bottom navigation for the development of WeChat mini program mall. It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. helped.

The previous mini program mall series has been updated to the shopping cart module, but many readers have reported how it can be closer to actual combat scenarios, dynamically obtain data and display it! So after this period of preparation, we started to make a new micro-mall version, which was developed completely according to the work scenario.

Mini program https domain name configuration

Log in to the registered WeChat mini program official account and log in to the platform——>Settings——>Development settings, as shown in the figure below:

Note: https://100boot.cn is a certified domain name, you can use it with confidence.

Create a mini program project and encapsulate ajax requests

To create a mini program project, you can refer to the article WeChat mini program e-commerce practice-getting started

New ajax.js

#目录结构-pages
--utils
---ajax.js

Declare api global variable calling address

const api = 'https://100boot.cn/wxShop/';

Encapsulate request request

wx.request({    
    method: opt.method || 'GET',    
    url: api + opt.url,    
    header: {      
        'content-type': 'application/json' // 默认值
    },    
    data: opt.data,    
    success: function (res) {      
        if (res.data.code == 100) {        
            if (opt.success) {
              opt.success(res.data);
            }
          } else {        
            console.error(res);
            wx.showToast({          
                title: res.data.message,
            })
          }
        }
  })
}module.exports.request = request

Configure developer key

Open utils/util.js, add key

module.exports = {
  formatTime: formatTime,
  key: '开发者key'
}

WeChat Mini Program Micro Mall: Developer key acquisition

app.json

{  
    "pages": [    
        "pages/home/home",    
        "pages/cart/cart",    
        "pages/detail/detail",    
        "pages/classify/classify",    
        "pages/mine/mine",    
        "pages/index/index",    
        "pages/logs/logs"
  ],  
    "window": {    
    "backgroundTextStyle": "light",    
    "navigationBarBackgroundColor": "#f0145a",    
    "navigationBarTitleText": "微商城",    
    "backgroundColor": "#f0145a"
  },  
    "tabBar": {    
        "color": "#858585",    
        "selectedColor": "#f0145a",    
        "backgroundColor": "#ffffff",    
        "borderStyle": "#000",    
    "list": [
      {        
        "pagePath": "pages/home/home",        
        "iconPath": "images/home.png",        
        "selectedIconPath": "images/home_select.png",        
        "text": "首页"
      },
      {        
        "pagePath": "pages/classify/classify",        
        "iconPath": "images/classify.png",        
        "selectedIconPath": "images/classify_select.png",        
        "text": "分类"
      },
      {        
        "pagePath": "pages/cart/cart",        
        "iconPath": "images/cart.png",        
        "selectedIconPath": "images/cart_select.png",        
        "text": "购物车"
      },
      {        
        "pagePath": "pages/mine/mine",        
        "iconPath": "images/mine.png",        
        "selectedIconPath": "images/mine_select.png",        
        "text": "我的"
      }
    ]
  }
}

app.wxss

.container {  
    height: 100%;  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: space-between;  
    padding: 200rpx 0;  
    box-sizing: border-box;
}

home.wxml

<!--导航条-->  
<view class="navbar">  
  <text wx:for="{{navbars}}" data-idx="{{index}}" class="item {{currentTab==index ? &#39;active&#39; : &#39;&#39;}}" wx:key="unique" bindtap="navbarTap">{{item.navbarName}}</text>  
</view>

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;
}  
/* 顶部导航字体颜色 */
.navbar .item.active{  
  color: #f0145a;  
}  
/* 顶部指示条属性 */
.navbar .item.active:after{  
  content: "";  
  display: block;  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  height: 6rpx;  
  background: #f0145a;  
}

home.js

Reference ajax and utils public js

const ajax = require('../../utils/ajax.js');
const utils = require('../../utils/util.js');

Page initialization navigation data

data: {    
    navbars:null,
    currentTab: 0,
  },

Page initialization loading navigation data Function

/**
  * 生命周期函数--监听页面加载
  */

onLoad: function (options) {    
    var that = this;    
    //加载navbar导航条
    that.navbarShow();
  },

ajax gets navigation data<br/>

navbarShow:function(success){    
    var that = this;
    ajax.request({      
        method: 'GET',      
        url: 'home/navBar?key=' + utils.key,      
        success: data => {
        that.setData({          
            navbars: data.result
        })        
        console.log(data.result)
      }
    })
  },

The effect is as follows

Related Recommended:

WeChat Mini Program Shopping Mall System Development Series - Tools

WeChat Development Demo and Practical Mall Development

The above is the detailed content of Construction of https framework for WeChat mini program mall development and implementation of top and bottom navigation. For more information, please follow other related articles on the PHP Chinese website!