小程序微商城（一）：https框架搭建並實現導航功能

前言

之前的小程序商城系列已經更新到購物車模塊了但是很多讀者反映如何能夠更接近於實戰場景，動態的獲取數據並展示出來！那麼經過這段時間的準備我們開始來做新的微商城版本，該版本是完全按照工作場景來開發的。

小程序https域名配置

登錄註冊好的小程序官方賬號並登錄平臺——>設置——>開發設置，如下圖所示：

備註：https://100boot.cn 是已經認證過的域名，大家可以放心使用。

創建小程序項目並封裝ajax請求

創建小程序項目可以參考文章小程序電商實戰-入門篇

新建ajax.js

#目錄結構-pages
--utils
---ajax.js 

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

封裝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

配置開發者key

打開utils/util.js，增加key

module.exports = {
 formatTime: formatTime,
 key: '開發者key'
}

小程序微商城：開發者key獲取

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

  

 
 {{item.navbarName}} 

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('../../utils/ajax.js');
const utils = require('../../utils/util.js');

頁面初始化導航數據

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

頁面初始化加載導航數據函數

/**
 * 生命週期函數--監聽頁面加載
 */
onLoad: function (options) { 
 var that = this; 
 //加載navbar導航條
 that.navbarShow();
 },

ajax獲取導航數據

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)
 }
 })
 },

實現效果如下

關注我們

如果需要源碼可以關注“IT實戰聯盟”並留言（微商城源碼，5個字會收到源碼下載地址），也可以加入交流群和作者互撩哦~~~

閱讀更多 IT實戰聯盟 的文章

關鍵字: 程序 Line 獲取數據