标王 热搜:
 
当前位置: 首页 » 系统运维 » web应用 » 正文

微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现

放大字体  缩小字体 发布日期:2019-04-27  来源:rrzWtl  作者:xinb2b.cn  浏览次数:118
核心提示:本篇文章给大家带来的内容是关于微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现,有一定的参考价值,有需要的朋


本篇文章给大家带来的内容是关于微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

小程序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)
      }
    })
  },

实现效果如下


相关推荐:

微信小程序购物商城系统开发系列-工具篇

微信开发demo之商城实战开发

以上就是微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现的详细内容,更多请关注其它相关文章!

rrzWtl
 
关键词: 搭建
 
[ 系统运维搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 违规举报 ]  [ 关闭窗口 ]
 
推荐图文
微信小程序如何实现下拉框效果?(代码示例) filter怎样全局使用
关于scroll 超实用的大神级云端设计神器!
推荐系统运维
点击排行
 
网站首页 | 关于我们 | 联系方式 | 使用协议 | 版权隐私 | 网站地图 | 排名推广 | 广告服务 | 积分换礼 | 网站留言 | RSS订阅