Construction d'un cadre https pour le développement du mini-centre commercial WeChat et mise en œuvre de la navigation supérieure et inférieure-Développement de mini-programmes-php.cn

Construction d'un cadre https pour le développement du mini-centre commercial WeChat et mise en œuvre de la navigation supérieure et inférieure

不言

Libérer： 2018-08-16 16:29:19

original

4040 Les gens l'ont consulté

Le contenu de cet article concerne la construction du framework https et la mise en œuvre de la navigation haut et bas pour le développement du mini centre commercial WeChat. J'espère qu'il a une certaine valeur de référence. vous sera utile aidé.

La série précédente de mini-centres commerciaux a été mise à jour vers le module de panier d'achat, mais de nombreux lecteurs ont rapporté comment il peut être plus proche des scénarios de combat réels, obtenir dynamiquement des données et les afficher ! Ainsi, après cette période de préparation, nous avons commencé à créer une nouvelle version du micro-centre commercial, qui a été entièrement développée selon le scénario de travail.

Configuration du nom de domaine https du mini programme

Connectez-vous au compte officiel du mini programme WeChat enregistré et connectez-vous à la plateforme -> Paramètres -> Paramètres de développement, comme indiqué dans la figure ci-dessous :

Remarque : https://100boot.cn est un nom de domaine certifié, vous pouvez l'utiliser en toute confiance.

Créer un mini projet de programme et encapsuler les requêtes ajax

Pour créer un mini projet de programme, vous pouvez vous référer à l'article WeChat Mini Program E-commerce Practice - Getting Started

Créer ajax.js

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

Copier après la connexion

Déclarer l'adresse d'appel de la variable globale de l'API

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

Copier après la connexion

Encapsuler la demande de requête

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

Copier après la connexion

Configurer la clé de développeur

Ouvrez utils/util.js et ajoutez la clé

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

Copier après la connexion

WeChat Mini Program Micro Mall : Obtenez la clé de développeur

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

Copier après la connexion

app.wxss

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

home.js

Référence ajax et utils public js

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

Copier après la connexion

page Initialiser les données de navigation

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

Copier après la connexion

Fonction d'initialisation de la page charger les données de navigation

/**
  * 生命周期函数--监听页面加载
  */

onLoad: function (options) {    
    var that = this;    
    //加载navbar导航条
    that.navbarShow();
  },

Copier après la connexion

ajax obtient les données de navigation<code><br/>

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

Copier après la connexion