Construction of https framework for WeChat mini program mall development and implementation of top and bottom navigation-Mini Program Development-php.cn

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

不言

Release： 2018-08-16 16:29:19

Original

4039 people have browsed it

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

Copy after login

Declare api global variable calling address

const api = &#39;https://100boot.cn/wxShop/&#39;;

Copy after login

Encapsulate request request

wx.request({    
    method: opt.method || &#39;GET&#39;,    
    url: api + opt.url,    
    header: {      
        &#39;content-type&#39;: &#39;application/json&#39; // 默认值
    },    
    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

Copy after login

Configure developer key

Open utils/util.js, add key

module.exports = {
  formatTime: formatTime,
  key: &#39;开发者key&#39;
}

Copy after login

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": "我的"
      }
    ]
  }
}

Copy after login

app.wxss

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

Copy after login

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>

Copy after login

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;  
}

Copy after login

home.js

Reference ajax and utils public js

const ajax = require(&#39;../../utils/ajax.js&#39;);
const utils = require(&#39;../../utils/util.js&#39;);

Copy after login

Page initialization navigation data

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

Copy after login

Page initialization loading navigation data Function

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

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

Copy after login

ajax gets navigation data<br/>

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

Copy after login

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!