微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现

本篇文章给大家带来的内容是关于微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

之前的小程序商城系列已经更新到购物车模块了但是很多读者反映如何能够更接近于实战场景，动态的获取数据并展示出来！那么经过这段时间的准备我们开始来做新的微商城版本，该版本是完全按照工作场景来开发的。

登录注册好的微信小程序官方账号并登录平台—— 设置—— 开发设置，如下图所示：

备注：https://100boot.cn 是已经认证过的域名，大家可以放心使用。

创建小程序项目可以参考文章微信小程序电商实战-入门篇

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

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

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

打开utils/util.js，增加key

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

微信小程序微商城：开发者key获取

{ 
 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 >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
引用ajax和utils公共js
const ajax = require( #39;../../utils/ajax.js #39;);
const utils = require( #39;../../utils/util.js #39;);
页面初始化导航数据
data: { 
 navbars:null,
 currentTab: 0,
 },
页面初始化加载导航数据函数
/**
 * 生命周期函数--监听页面加载
onLoad: function (options) { 
 var that = this; 
 //加载navbar导航条
 that.navbarShow();
 },
ajax获取导航数据
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)
 },
实现效果如下


相关推荐：
微信小程序购物商城系统开发系列-工具篇

微信开发demo之商城实战开发
以上就是微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！