Home > Article > WeChat Applet > 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. <br>
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.
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.
To create a mini program project, you can refer to the article WeChat mini program e-commerce practice-getting started
#目录结构-pages --utils ---ajax.js
const api = 'https://100boot.cn/wxShop/';
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 = requestOpen utils/util.js, add key
module.exports = {
formatTime: formatTime,
key: '开发者key'
}WeChat Mini Program Micro Mall: Developer key acquisition
{
"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": "我的"
}
]
}
}.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}<!--导航条-->
<view class="navbar">
<text wx:for="{{navbars}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item.navbarName}}</text>
</view>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;
}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)
}
})
},
Related Recommended:
WeChat Mini Program Shopping Mall System Development Series - Tools<br>
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!