建设银行个人网站官网,网站后台上传用户界面不显示,挂网站需要什么服务器,做商务网站服务#x1f48c; 所属专栏#xff1a;【微信小程序开发教程】 #x1f600; 作 者#xff1a;我是夜阑的狗#x1f436; #x1f680; 个人简介#xff1a;一个正在努力学技术的CV工程师#xff0c;专注基础和实战分享 #xff0c;欢迎咨询#xff01; … 所属专栏【微信小程序开发教程】 作 者我是夜阑的狗 个人简介一个正在努力学技术的CV工程师专注基础和实战分享 欢迎咨询 欢迎大家这里是CSDN我总结知识的地方喜欢的话请三连有问题请私信 文章目录前言一、案例 - 本地生活1、首页效果以及实现步骤二、项目结构1、新建项目2、梳理项目结构三、配置导航栏效果四、配置 tabBar 效果五、实现轮播图效果1、获取轮播图数据2、渲染轮播图六、实现九宫格效果1、获取九宫格数2、渲染九宫格七、实现图片布局总结前言 大家好又见面了我是夜阑的狗本文是专栏【微信小程序开发教程】专栏的第20篇文章; 今天开始学习微信小程序的第十一天开启新的征程记录最美好的时刻每天进步一点点。 专栏地址【微信小程序开发教程】 此专栏是我是夜阑的狗微信小程序开发过程的总结希望能够加深自己的印象以及帮助到其他的小伙伴。 如果文章有什么需要改进的地方还请大佬不吝赐教。 一、案例 - 本地生活 前面已经介绍了小程序的网络数据请求通过栗子学习了在小程序中如何发起 GET 和 POST 请求。接下来通过一个案例将前面学习到知识进行巩固。话不多说让我们原文再续书接上回吧。 1、首页效果以及实现步骤 可以先来看一下要实现的效果图图中有轮播图、九宫格、导航栏和tabBar等效果如下所示 想要实现上面的那个效果实现步骤可分为 6 个步骤
Step 1、首先新建一个项目并且梳理整个项目结构Step 2、配置导航栏效果修改背景、标题等属性Step 3、配置 tabBar 效果添加图片、选中等样式总共要实现3个 tarBarStep 4、在页面主体区域实现轮播图效果Step 5、在页面主体区域实现九宫格区域效果Step 6、最后实现图片布局
二、项目结构
1、新建项目 虽然前面已经学习过了如何新建项目但是还要操作一遍加深印象。首先打开微信开发者工具点击加号按钮进行创建项目。 接下来就是填写项目信息填好项目名称和目录AppID是前面注册过的不清楚的可以看一下【微信小程序】–注册小程序账号安装开发者工具一。然后后端服务选择不使用云服务这两种开发模式是不同的这里先学习不使用云服务。注意: 你要选择一个空的目录才可以创建项目 后面就是确认编程语言了这里是以JavaScript为例。选择完之后点击 确认 按钮即可。
2、梳理项目结构 从项目效果图可以知道需要新建三个页面。删除小程序的默认页面 index 和 logs 创建 home 、message 和 contact 页面具体代码如下
app.json
{pages:[pages/home/home,pages/message/message,pages/contact/contact],
}代码重新编译之后就会生成三个页面home 为主页面实际效果如下所示 三、配置导航栏效果 页面创建之后接下来就是要从导航栏开始配置。通过修改 app.json 中 window 属性来配置导航栏效果具体代码如下所示
app.json
{window:{backgroundTextStyle:light,navigationBarBackgroundColor: #2b4b6b,navigationBarTitleText: 本地生活CSH,navigationBarTextStyle:white},
}修改完之后重新编译就可以其导航栏效果 四、配置 tabBar 效果 首先把下载好的 images 资源拷贝到小程序项目根目录中图片内容如下所示 打开 app.json 配置文件和 pages、window 平级新增 tabBar 节点其次 tabBar 节点中新增 list 数组这个数组中存放的是每个 tab 项的配置对象最后在 list 数组中新增每一个 tab 项的配置对象。具体代码如下所示
app.json
{tabBar: {list: [{pagePath: pages/home/home,text: 首页,iconPath: /images/home.png,selectedIconPath: /images/home-active.png},{pagePath: pages/message/message,text: 消息,iconPath: /images/message.png,selectedIconPath: /images/message-active.png},{pagePath: pages/contact/contact,text: 联系夜阑,iconPath: /images/contact.png,selectedIconPath: /images/contact-active.png}]},
}修改完之后重新编译就可以看到 tarBar 效果 五、实现轮播图效果 这里需要通过接口来获取轮播图的数据从而来渲染轮播图效果。获取轮播图数据列表的接口 【GET】https://www.escook.cn/slides 1、获取轮播图数据 知道接口之后就可以通过 wx.request 来获取数据由于不需要对服务器进行提交数据所以data属性可以省略。如果不知道返回的数据是什么的话可以用 console.log 打印出来看看。
home.js
Page({/*** 页面的初始数据*/data: {// 存放轮播图数据的列表swiperList: []},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getSwiperList();},/*** 获取轮播图数据的方法*/getSwiperList(){wx.request({url: https://www.escook.cn/slides,method: GET,success: (res) {console.dir(res.data);this.setData({swiperList: res.data})}})}
})这样就能获取到轮播图的数据来看一下实际效果 从图中可以看出服务器返回的数据 res.data 被打印出来了AppData 中 swiperList 数据被赋上了值说明已经成功获取数据了。
2、渲染轮播图 前面已经获取到了轮播图的数据接下来就是渲染轮播图效果并进行美化样式。
home.wxml 将轮播设置为循环自动播放。
swiper indicator-dots circular indicator-colorwhite indicator-active-colorgray
autoplay interval2000swiper-item wx:for{{swiperList}} wx:keyidimage src{{item.image}}/image/swiper-item
/swiperhome.wxss 这里的单位尽量使用 rpx。
swiper {height: 350rpx;
}
swiper image{width: 100%;height: 100%;
}这样就完成轮播图的渲染来看一下实际效果 六、实现九宫格效果 与前面轮播图一样也需要通过接口来获取九宫格的数据从而来渲染九宫格图效果。获取九宫格图数据列表的接口 【GET】https://www.escook.cn/categories 1、获取九宫格数 通过 wx.request 来获取数据由于不需要对服务器进行提交数据所以data属性可以省略。如果不知道返回的数据是什么的话可以用 console.log 打印出来看看。
home.js
Page({/*** 页面的初始数据*/data: {// 存放轮播图数据的列表swiperList: [],// 存放九宫格数据的列表gridList:[] },/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getSwiperList();this.getGridList();},/*** 获取九宫格数据的方法*/getGridList(){wx.request({url: https://www.escook.cn/categories,method:GET,success: (res) {console.dir(res.data);this.setData({gridList: res.data,})}})}
})这样就能获取到九宫格的数据来看一下实际效果 2、渲染九宫格 前面已经获取到了轮播图的数据接下来就是渲染九宫格区域的布局并进行美化样式。
home.wxml 有 id 的话尽量用 id 当 key。
view classgrid-listview classgrid-item wx:for{{gridList}} wx:keyidimage src{{item.icon}}/imagetext{{item.name}}/text/view
/viewhome.wxss 这里的单位尽量使用 rpx。
.grid-list{/* 开启flex布局 */display: flex;/* 允许换行 */flex-wrap: wrap;/* 添加左侧跟顶部之间的边框 */border-left: 1rpx solid #efefef;border-top: 1rpx solid #efefef;
}
.grid-item {width: 33.33%;height: 200rpx;/* 添加布局 */display: flex;flex-direction: column;/* 横向纵向的居中 */align-items: center;justify-content: center;/* 添加右侧跟底部之间的边框 */border-right: 1rpx solid #efefef;border-bottom: 1rpx solid #efefef;/* 改变box方式 */box-sizing: border-box;
}
.grid-item image{width: 60rpx;height: 60rpx;
}
.grid-item text{font-size: 24rpx;margin-top: 10rpx;
}这样就完成九宫格的渲染来看一下实际效果 七、实现图片布局 前面基本上已经完成大部分的效果接下来就剩下最后两张图片的设置和美化了具体代码如下所示
home.wxml 有 id 的话尽量用 id 当 key。
view classimg-boximage src/images/link-01.png/imageimage src/images/link-02.png/image
/viewhome.wxss
.img-box{display: flex;/* 添加间距 上下 左右*/padding: 20rpx 10rpx;justify-content: space-around;
}.img-box image{width: 45% ;
}到了这里基本上就已经完成整个案例了来看一下完整效果 总结 感谢观看这里就是案例 - 本地生活的介绍如果觉得有帮助请给文章点个赞吧让更多的人看到。 也欢迎你关注我。 原创不易还希望各位大佬支持一下你们的点赞、收藏和留言对我真的很重要 最后本文仍有许多不足之处欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正下期再见。 更多专栏订阅: 【LeetCode题解持续更新中】 【Java Web项目构建过程】 【微信小程序开发教程】⚽ 【JavaScript随手笔记】 【大数据学习笔记华为云】 【程序错误解决方法建议收藏】 【软件安装教程】 订阅更多你们将会看到更多的优质内容
