微信小程序微商城(一):https框架搭建并实现导航功能

脱发程序员 2018-05-28 14:53:15 ⋅ 169 阅读


前言

之前的小程序商城系列已经更新到购物车模块了但是很多读者反映如何能够更接近于实战场景,动态的获取数据并展示出来!那么经过这段时间的准备我们开始来做新的微商城版本,该版本是完全按照工作场景来开发的。

小程序https域名配置

登录注册好的微信小程序官方账号并登录平台——>设置——>开发设置,如下图所示:



备注:https://100boot.cn 是已经认证过的域名,大家可以放心使用。

创建小程序项目并封装ajax请求

创建小程序项目可以参考文章微信小程序电商实战-入门篇

新建ajax.js
#目录结构-pages
--utils
---ajax.js    
声明api 全局变量调用地址
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

<!--导航条-->  
<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;
}  
/* 顶部导航字体颜色 */
.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个字会收到源码下载地址),也可以加入交流群和作者互撩哦~~~


全部评论: 0

    我有话说:

    程序商城(九):授权实现个人中心页面页面

    实现商城授权获取用户信息和个人中心页面布局

    程序商城(七):动态API实现商品分类

    程序商品分类页面布局并且调用动态API获取数据加载

    程序实现商品数量加减

    这是一个用程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用

    程序商城(八):缓存实现商品购物车功能

    商品详情页将商品信息放入缓存,购物车页面读取缓存获取商品信息,购物车商品计算和删除缓存商品

    程序商城(二):电商首页轮播、分类导航和新品特卖实现

    本案例所有模块都为https动态调用API数据服务获得

    程序-template使用:实现购物车商品数量加减功能

    篇我们实现了购物车功能,里面有用到template模板功能实现购物车商品数量加减和价格计算功能......

    程序实战篇:如何解决https域名问题 ?

    开发自己的程序绕不开https问题,为了能在程序中调用我们自己的API服务请打开看看吧!!!

    程序电商实战-首页(下)

    篇:程序电商实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续

    程序电商实战-商品详情(上)

    先看下今天要实现程序商品详情页吧!

    程序实战篇:商品属性联动选择(案例)

    本期的程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点

    程序电商实战-商品列表流式布局

    今天给大家分享一下程序商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~

    程序商城(四):动态API实现商品详情页(上)

    1、实现商品详情页面布局(这篇实现3个模块,头部商品图片轮播、商品价格和商品描述、商品详情展示) 2、根据用户点击不同的商品请求API动态加载数据

    程序商城(五):动态API实现商品详情页(下)

    加入购物车悬浮框、商品数量、价格计算、收藏和加入购物车功能开发

    程序商城(六):动态API实现新品特卖商品流式布局

    实现新品特卖商品列表布局、调用动态API获取数据加载和点击商品跳转商品详情

    程序电商实战-首页(上)

    篇:程序电商实战-入门篇 嗨,大家好!经过近两周的精心准备终于开始程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!   首页效果图

    程序抖音实战-首页(上)

    你也可以用程序编写一个抖音

    程序-Image的widthFix属性和rpm尺寸的使用

    在做程序商品详情页,商品的详情是图片集合,渲染完成后发现图片加载的很不自然

    程序:最新登录授权获取openid等信息

    为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,程序游戏的体验版、开发版调用 wx.getUserInfo 接口,将