微信小程序|小程序开发
微信小程序,小程序电商
微信小程序-小程序开发
换肤软件源码,ubuntu系统安装VM,tomcat8.5不管用,python爬虫推广软件,用php做一个代码,seo商机推广lzw
本篇文章给大家带来的内容是关于微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
源码科技有限公司,vscode 缩进样式,ubuntu怎么装输入法,tomcat hang,sqlite 字符包含,阿里服务器域名,保存好赞图片插件,前端框架模块设计,爬虫箱怎么控制温度,php查壳,seo内部优化方案,mvc网站模板下载,个人网页相册模板,html5 教育模板,帝国cms会员页面模板,java公交车管理系统,声卡数据采集播放演示源程序lzw
之前的小程序商城系列已经更新到购物车模块了但是很多读者反映如何能够更接近于实战场景，动态的获取数据并展示出来！那么经过这段时间的准备我们开始来做新的微商城版本，该版本是完全按照工作场景来开发的。
php 发布系统源码,ubuntu没root权限,tomcat9运行一闪而过,python爬虫收费视频,php程序员外派怎么样,seo考核数据lzw
小程序https域名配置
登录注册好的微信小程序官方账号并登录平台——>设置——>开发设置，下图例：
备注： 是已经认证过的域名，大家可以放心使用。
创建小程序项目并封装ajax请求
创建小程序项目可以参考文章微信小程序电商实战-入门篇
新建ajax.js
#目录结构-pages--utils---ajax.js
声明api 全局变量调用地址
const api = /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.jpg" alt="微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现" title="微信小程序商城开发之https框架的搭建以及顶部和底部导航的实现","selectedIconPath": "images/home_select.jpg","text": "首页"},{"pagePath": "pages/classify/classify","iconPath": "images/classify.jpg","selectedIconPath": "images/classify_select.jpg","text": "分类"},{"pagePath": "pages/cart/cart","iconPath": "images/cart.jpg","selectedIconPath": "images/cart_select.jpg","text": "购物车"},{"pagePath": "pages/mine/mine","iconPath": "images/mine.jpg","selectedIconPath": "images/mine_select.jpg","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
{{item.navbarName}}
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之商城实战开发
