微信小程序微商城(一):https框架搭建并实现导航功能
IT实战联盟博客:http://blog.100boot.cn
前言
之前的小程序商城系列已经更新到购物车模块了但是很多读者反映如何能够更接近于实战场景,动态的获取数据并展示出来!那么经过这段时间的准备我们开始来做新的微商城版本,该版本是完全按照工作场景来开发的。
小程序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个字会收到源码下载地址),也可以加入交流群和作者互撩哦~~~
IT实战联盟博客:http://blog.100boot.cn
微信小程序微商城(一):https框架搭建并实现导航功能相关推荐
- 微信小程序srt_微信小程序微商城(八):缓存实现商品购物车功能
看效果web 购物车.gif小程序 开发计划微信小程序 一.商品详情页将商品信息放入缓存 二.购物车页面读取缓存获取商品信息 三.购物车商品计算和删除缓存商品 1.商品详情页将商品信息放入缓存数组 d ...
- 微信小程序微商城(五):动态API实现商品详情页(下)
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序微商城(四):动态API实现商品详情页(上) 看效果 加入购物车.gif 开发计划 1.加入购物车悬浮框.商品数量.价 ...
- 微信小程序微商城(九):微信授权并实现个人中心页面页面
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序微商城(八):缓存实现商品购物车功能 看效果 开发计划 1.实现微信授权并获取用户信息 2.个人中心页面布局 一.实现 ...
- 微信小程序微商城(八):缓存实现商品购物车功能
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序微商城(七):动态API实现商品分类 看效果 购物车.gif 开发计划 1.商品详情页将商品信息放入缓存 2.购物车页 ...
- uniapp + vue3微信小程序开发(1)框架搭建
uniapp内置vue2,很多小伙伴喜欢用,但是作为首批吃螃蟹的人,肯定会想用vue3来开发,那么会遇到哪些问题呢? 1.编辑器等工具 Hbuilder X 3.4.6版本及以上(编辑器也在不断更新, ...
- 免费的小程序微商城系统它不香吗?
互联网市场更新迭代很快,基本5年左右就能完成一个周期的技术升级,这不,微信小程序微商城系统刚火不久,现在市面上很多类似系统就开始宣传永久免费使用了.这是为什么呢,他们没有成本吗?他们不想赚钱吗?现在我 ...
- 分析:很多小程序微商城系统为什么敢永久免费使用
互联网市场更新迭代很快,基本5年左右就能完成一个周期的技术升级,这不,微信小程序微商城系统刚火不久,现在市面上很多类似系统就开始宣传永久免费使用了.这是为什么呢,他们没有成本吗?他们不想赚钱吗?现在我 ...
- 搭建公众号微商城+小程序微商城 企业商城系统一条龙 拖拽可视化装修模板
搭建公众号微商城+小程序微商城 企业商城系统一条龙 拖拽可视化装修模板 来源:廖万里的博客 www.kkkliao.cn 本程序需有认证服务号!或者认证小程序 微信支付走官方接口! 没有的话 自己准 ...
- 微信小程序一定要用https的理由,小程序使用HTTPS链接分析
微信小程序一定要用https的理由,小程序使用HTTPS链接分析 一.HTTPS HTTPS是HTTP的安全版,在HTTP的基础上加入SSL证书 (服务器证书)后形成的安全协议,不但可以建立信息加密通 ...
- 【微信小程序】 apache配置https,nginx配置https
1,简介 最近在做一个微信小程序的项目,把我搞得焦头烂额,微信小程序默认必须使用https加密请求,现在配置好了,所以记录一下,如果你也遇到疑惑,希望下面的文章可以帮到你~~! 2,配置https必须 ...
最新文章
- android 常用类
- 【转】Kconfig,Makefile 和 .config
- python费用结算系统_python 全栈开发,Day104(DRF用户认证,结算中心,django-redis)
- UVA 11178 Morley’s Theorem(莫雷定理 计算几何)
- Bookshelf 2 简单DFS
- lua 区间比较_TI-Lua 系列教程2.4.1: 条件分支
- hdu 3829 最大独立集
- java爬虫教程:模拟用户表单登录
- 3des base64 java_java和c++中的DES\3DES\Base64
- Uipath文档教程
- Netty:原理架构解析
- U-BLOX GPS 模块及GPRMC指令解析
- Lambda表达式与Stream
- 一、物流的基本概念|1.2现代物流管理的形成和发展
- 2016年华为研发出征大会演讲--任正非
- 函数的定义以及关键字参数
- outlook怎样同步服务器的文件夹,当您使用辅助在 Outlook 邮箱中的文件夹时的性能和同步问题...
- SIP 协议的系统构架
- 链式法则(chain rule)
- Windows下Chcp命令的用法
热门文章
- Audio播放流程(四)---MediaPlayerService流程之AudioTrack的创建
- B - I Hate It(单点更新)(区间求最大值)
- php换行符sql,如何在PHP和MySQL的textarea中给换行符的同时避免SQL注入?
- 推荐系统中的矩阵分解详解
- mysql如何更改文件所有者sa_Mssql Server2005中更改sa的用户名的多种方法
- C#网络编程----(一)获取IP地址
- android弹窗警告,Android 开发使用PopupWindow实现弹出警告框的复用类示例
- oracle 10g管理地址,oracle10g管理共享服务器
- jquery width,height,innerwidth,innerheight,outerwidth,outerheight方法
- php array函数 array_slice截取数组