1. 新建项目
点击+
号
进入创建场景,选择对应的选项和自己的AppID
为了不见黄色警告热重载,可以选择关闭。
在project.config.json
项目的配置文件的setting
配置添加如下:
"checkSiteMap":false
2. 配置首页
2.1 新建项目与梳理项目结构
点击app.json
小程序项目的全局配置文件的pages
配置中新建三个页面的目录,同时删掉默认创建的index
与logs
路径,记得保存。
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
2.2 配置导航栏
在app.json文件的window全局配置中修改导航栏名称的"navigationBarTitleText": "Weixin"
为本地生活。
"navigationBarTitleText": "本地生活"
修改导航栏的默认背景颜色#fff
为#2b4b6b
"navigationBarBackgroundColor": "#2b4b6b",
改变文本颜色"navigationBarTextStyle":"black"
由黑变白(也就这两种颜色选择)
"navigationBarTextStyle":"white"
效果如下:
2.3 配置\(tabBar\)
由于我嫌找阿里图标太麻烦了,所以我选择直接拿别人的资料。
搜索黑马程序员公众号->黑马资源->2022资料下载->点击Web前端->找列表中的手把手快速带你开发微信小程序->找到微信小程序基础目录-领取资料中的day02。
链接:https://pan.baidu.com/s/1-2KMJ_lSHMI8JnzqUOy49w
提取码:p1op
把image文件夹放入到自己创建的项目主目录中。
在app.json
文件中配置tabBar
项,修改三个页面对应的选中与未选中的图标,设置好各个的导航路径,最终配置如下。
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/tabs/home.png",
"selectedIconPath": "/images/tabs/home-active.png"
},{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png"
},{
"pagePath": "pages/contact/contact",
"text": "联系我",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}
]
},
最终效果如下:
2.4 实现轮播图
2.4.1 获取数据
进入微信公众平台,登录后点击开发的开发管理
选择开发设置
选择服务器域名设置
在我们的request接口上添加黑马程序员提供的接口https://applet-base-api-t.itheima.net;
现在就可以看到微信开发者工具 右上侧详情的项目配置的域名信息了
获取Get接口为:https://applet-base-api-t.itheima.net/slides
进入pages/home/home.js
文件,在data中定义数据数组swiperList
接着在onLoad函数下新增一个获取轮播图数据的方法
//获取轮播图数据的方法
getSwiperList(){
wx.request({
url: 'https://applet-base-api-t.itheima.net/slides',
method:'GET',
//定义一个名为res的形参,获取服务器返回的结果
success:(res)=>{
console.log(res);
}
})
},
而我们清楚,当页面加载完成后才能显示出轮播图的结果,那么就需要修改onLoad函数对我们定义的上述方法进行加载。
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getSwiperList()
},
可以看到控制台显示的后台信息为对象。
那么当我们成功调用函数时,也应该考虑把相应的数据加入到之前设置的swiperList
数组中,通过在setdata
中设定key
为该数组,并对应的value
为之前控制台得到的res
对象中的data
数组数据。
所以修改onLoad函数如下:
//获取轮播图数据的方法
getSwiperList(){
wx.request({
url: 'https://applet-base-api-t.itheima.net/slides',
method:'GET',
//定义一个名为res的形参,获取服务器返回的结果
success:(res)=>{
console.log(res);
this.setData({
swiperList:res.data
})
}
})
},
接着我们在调试器下面切换到AppData
中,可以看到之前默认swiperList
为空数组,也即没有存放数据。
后面保存后就有对应的数据,可以看到是相应的对象,有轮播图的图片链接。
2.4.2 渲染图层
利用微信自带的swiper
轮播图组件中间镶嵌swiper-item
组件,结合wx:for
遍历与微信mustache
语法(不就是插值表达式嘛?),另外要注意设置wx:key
对应数据的id
(这确定不是Vue?)。
之后我们要在swiper-item里加入image组件,src为动态地址,所以还是要是使用mustache
语法,由于用了wx:for
可以获取item项,而我们之前可以知道之前swiperList存放的数据对象就有image键值对,因此可以写item.image
。
pages/home/home.wxml