Aufbau eines https-Frameworks für die WeChat Mini-Programm-Mall-Entwicklung und Implementierung der oberen und unteren Navigation-Mini-Programmentwicklung-php.cn

Der Inhalt dieses Artikels befasst sich mit dem Aufbau des https-Frameworks und der Implementierung der oberen und unteren Navigation für die Entwicklung des WeChat-Miniprogramms. Ich hoffe, dass es einen gewissen Referenzwert hat wird Ihnen nützlich sein. <br>

Die vorherige Mini-Programm-Mall-Serie wurde auf das Warenkorbmodul aktualisiert, aber viele Leser haben berichtet, wie es näher an tatsächlichen Kampfszenarien sein, Daten dynamisch abrufen und anzeigen kann! Nach dieser Vorbereitungsphase begannen wir mit der Entwicklung einer neuen Micro-Mall-Version, die vollständig entsprechend dem Arbeitsszenario entwickelt wurde.

Konfiguration des https-Domänennamens des Miniprogramms

Melden Sie sich beim registrierten offiziellen Konto des WeChat-Miniprogramms an und melden Sie sich bei der Plattform an -> Einstellungen -> Entwicklungseinstellungen, wie in der folgenden Abbildung dargestellt:

<br>

Hinweis: https://100boot.cn ist ein zertifizierter Domainname, Sie können ihn bedenkenlos verwenden.

Erstellen Sie ein Miniprogrammprojekt und kapseln Sie Ajax-Anfragen

Um ein Miniprogrammprojekt zu erstellen, können Sie sich auf den Artikel „WeChat-Miniprogramm-E-Commerce-Praxis – Erste Schritte“ beziehen

Erstellen Sie ajax.js

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

Nach dem Login kopieren</div></div>

API-Global-Variablen-Aufrufadresse deklarieren

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

Nach dem Login kopieren</div></div>

Anforderungsanfrage kapseln

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

Nach dem Login kopieren</div></div></div>

Entwicklerschlüssel konfigurieren

Öffnen Sie utils/util.js, fügen Sie den Schlüssel hinzu

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

Nach dem Login kopieren</div></div>

WeChat Mini Program Micro Mall: Erwerb des Entwicklerschlüssels

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

Nach dem Login kopieren</div></div></div>

app.wxss

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

Nach dem Login kopieren</div></div></div>

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>

Nach dem Login kopieren</div></div></div>

home .“ Navigationsdatenfunktion laden

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

Nach dem Login kopieren</div></div>

ajax ruft Navigationsdaten ab</div>

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

Nach dem Login kopieren</div></div>Der Effekt ist wie folgt

Verwandte Empfehlungen:

<br>

WeChat Mini Program Shopping Mall System Development Series – Tools

<br>WeChat Development Demo Mall Praktische Entwicklung

Das obige ist der detaillierte Inhalt vonAufbau eines https-Frameworks für die WeChat Mini-Programm-Mall-Entwicklung und Implementierung der oberen und unteren Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

微信小程序

Quelle：php.cn

Vorheriger Artikel：Beispiel für ein WeChat Mini-Programm: Code-Implementierung zur Einführung des WeUI-Frameworks Nächster Artikel：Implementierungscode für das Karussell auf der Startseite des Einkaufszentrums, die Produktklassifizierungsnavigation und Sonderverkäufe für neue Produkte, entwickelt vom WeChat Mini-Programm Mall

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors