WeChat 미니 프로그램 몰 개발을 위한 https 프레임워크 구축 및 상하 네비게이션 구현

본 글의 내용은 위챗 미니 프로그램 몰 개발을 위한 https 프레임워크 구축과 상단 및 하단 네비게이션 구현에 대한 내용으로, 도움이 필요한 친구들에게 참고가 되었으면 좋겠습니다. 너. . <br>

기존 미니 프로그램 몰 시리즈가 장바구니 모듈로 업데이트되었는데, 많은 독자들이 어떻게 실제 전투 시나리오에 더 가까워지고, 데이터를 동적으로 획득하여 표시할 수 있는지 보고해 주셨습니다! 그래서 이 준비 기간을 거쳐 우리는 완전히 작업 시나리오에 따라 개발된 새로운 마이크로몰 버전을 만들기 시작했습니다.

Mini 프로그램 https 도메인 이름 구성

등록된 WeChat Mini 프로그램 공식 계정으로 로그인하고 아래 그림과 같이 플랫폼 -> 설정 -> 개발 설정에 로그인합니다.

<br>

비고: https ://100boot.cn은 인증된 도메인 이름이므로 안심하고 사용하실 수 있습니다.

미니 프로그램 프로젝트 생성 및 ajax 요청 캡슐화

미니 프로그램 프로젝트를 생성하려면 WeChat 미니 프로그램 전자상거래 실습 - 시작하기 문서를 참조하세요.

Create ajax.js

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

API 글로벌 선언 변수 호출 주소

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

캡슐화 요청 요청

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

개발자 키 구성

utils/util.js 열기, 키 추가

module.exports = {
  formatTime: formatTime,
  key: '开发者key'
}

WeChat 애플릿 마이크로 몰: 개발자 키 받기

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> 로딩 중 내비게이션 데이터 기능 <code style="font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:12px;color:inherit;background-color:transparent;border:none;">

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

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>

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获取导航数据<br>

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

ajax가 내비게이션 데이터 가져오기 <h4 style="font-family:inherit;line-height:1.7;color:rgb(47,47,47);"></h4>rrreee

효과는 다음과 같습니다<br>

관련 권장 사항: <br>WeChat 미니 프로그램 쇼핑몰 시스템 개발 시리즈 - 도구

WeChat 개발 데모 쇼핑몰의 실질적인 개발🎜🎜

위 내용은 WeChat 미니 프로그램 몰 개발을 위한 https 프레임워크 구축 및 상하 네비게이션 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!