小編給大家分享一下微信小程序商城開發(fā)中如今搭建https框架，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元若羌做網(wǎng)站,已為上家服務(wù),為若羌各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

本篇文章給大家?guī)淼膬?nèi)容是關(guān)于微信小程序商城開發(fā)之https框架的搭建以及頂部和底部導(dǎo)航的實現(xiàn)，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

之前的小程序商城系列已經(jīng)更新到購物車模塊了但是很多讀者反映如何能夠更接近于實戰(zhàn)場景，動態(tài)的獲取數(shù)據(jù)并展示出來！那么經(jīng)過這段時間的準(zhǔn)備我們開始來做新的微商城版本，該版本是完全按照工作場景來開發(fā)的。

小程序https域名配置

登錄注冊好的微信小程序官方賬號并登錄平臺——>設(shè)置——>開發(fā)設(shè)置，如下圖所示：

創(chuàng)建小程序項目并封裝ajax請求

創(chuàng)建小程序項目可以參考文章微信小程序電商實戰(zhàn)-入門篇

新建ajax.js

#目錄結(jié)構(gòu)-pages
--utils
---ajax.js

聲明api 全局變量調(diào)用地址

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

封裝request請求

wx.request({    
    method: opt.method || 'GET',    
    url: api + opt.url,    
    header: {      
        'content-type': 'application/json' // 默認(rèn)值
    },    
    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

配置開發(fā)者key

打開utils/util.js，增加key

module.exports = {
  formatTime: formatTime,
  key: '開發(fā)者key'
}

微信小程序微商城：開發(fā)者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

<!--導(dǎo)航條-->  
<view class="navbar">  
  <text wx:for="{{navbars}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" 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;
}  
/* 頂部導(dǎo)航字體顏色 */
.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');

頁面初始化導(dǎo)航數(shù)據(jù)

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

頁面初始化加載導(dǎo)航數(shù)據(jù)函數(shù)

/**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */

onLoad: function (options) {    
    var that = this;    
    //加載navbar導(dǎo)航條
    that.navbarShow();
  },

ajax獲取導(dǎo)航數(shù)據(jù)


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

實現(xiàn)效果如下

以上是“微信小程序商城開發(fā)中如今搭建https框架”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：微信小程序商城開發(fā)中如今搭建https框架
網(wǎng)頁鏈接：http://chinadenli.net/article12/ggpedc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、營銷型網(wǎng)站建設(shè)、ChatGPT、品牌網(wǎng)站設(shè)計、虛擬主機、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)