小程序應用頁面開發(fā)
1、創(chuàng)建項目并配置項目目錄結構
- 創(chuàng)建項目我相信大家都會，不會的可以csdn搜索即可
這里我們需要對項目目錄進行修改配置
在 app.json 文件中的 pages 數(shù)組中添加三個頁面，如上圖所示，然后我們將其他默認的兩個進行刪除，然后左側目錄 pages 文件夾中的多余頁面進行刪除。
配置導航欄效果
- 同樣的在app.json 文件中的 window 對象中進行配置 我們的 導航欄效果 （app.json是全局配置）
"window": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "本地生活",
"navigationBarBackgroundColor": "#2b4b6b"
}
三、配置 tabBar 效果
- 依舊是在 app.json 全局進行配置
"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": "聯(lián)系我們",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}
]
},
- 效果圖如下：
+ 這里的字體圖標可以在 網(wǎng)上找， 也可以私信我，我給大家提供！
四、輪播圖實現(xiàn)
- 輪播圖這里的效果，我們需要從后臺接口中獲取數(shù)據(jù)，接口如下：
接口地址：https://applet-base-api-t.itheima.net/slides
https://applet-base-api-t.itheima.net/slides
4.1 創(chuàng)建輪播圖數(shù)據(jù)容器
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
// 輪播圖數(shù)據(jù)
slidesList: []
},
4.2 定義一個請求輪播圖數(shù)據(jù)的接口
home.js 代碼如下：
// 獲取輪播圖請求的方法
getSlidesData () {
wx.request({
url: 'https://applet-base-api-t.itheima.net/slides',
method: 'GET',
success: (result) => {
console.log(result.data)
this.setData({
slidesList: result.data
})
}
})
},
4.3 頁面加載調用 數(shù)據(jù)請求接口
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
this.getSlidesData()
},
方法一但被調用，立馬發(fā)送接口數(shù)據(jù)的請求：我們可以進行查看數(shù)據(jù)請求是否成功！
如上圖所示，如果數(shù)據(jù)存在，那么表示成功，就可以使用我們的數(shù)據(jù)了。
代碼編寫：home.wxml文件中
<!-- 輪播圖區(qū)域 -->
<swiper indicator-dots circular>
<swiper-item wx:for="{{ slidesList }}" wx:key="id">
<image src="{{ item.image }}"></image>
</swiper-item>
</swiper>
home.wxss
/* 輪播圖樣式 */
swiper {
height: 300rpx
}
swiper swiper-item image {
width: 100%;
height: 100%;
}
實現(xiàn)的效果圖如下：
五、九宮格實現(xiàn)
5.1 獲取九宮格數(shù)據(jù)
// 1、九宮格數(shù)據(jù)列表
gridList: []
// 2、九宮格接口請求方法調用
this.getGridList()
// 3、九宮格數(shù)據(jù)請求方法
getGridList () {
wx.request({
url: 'https://applet-base-api-t.itheima.net/categories',
method: "GET",
success: (result) => {
this.setData({
gridList: result.data
})
}
})
},
5.2 結構和樣式的完善
home.wxml 代碼：
<!-- 九宮格區(qū)域 -->
<view class="grid-list">
<view class="grid-item" wx:for="{{ gridList }}" wx:key="id">
<image src="{{ item.icon }}"></image>
<text>{{ item.name }}</text>
</view>
</view>
home.wxss 代碼：
/* 九宮格樣式 */
.grid-list {
display: flex;
flex-wrap: wrap;
border-left: 1rpx solid #efefef;
border-top: 1rpx solid #efefef;
}
.grid-item {
width: 33.3%;
height: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1rpx solid #efefef;
border-bottom: 1rpx solid #efefef;
box-sizing: border-box;
}
.grid-item image {
width: 60rpx;
height: 60rpx;
}
.grid-item text {
font-size: 24rpx;
margin-top: 10rpx;
}
實現(xiàn)效果圖：
六、圖片布局實現(xiàn)
<!-- 底部圖片區(qū)域 -->
<view class="image-box">
<image src="/images/link-01.png" mode="widthFix"/>
<image src="/images/link-02.png" mode="widthFix"/>
</view>
/* 圖片區(qū)域 */
.image-box {
display: flex;
padding: 20rpx 10rpx;
justify-content: space-around;
}
.iamge-box image {
width: 45%;
}
這樣整個案例頁面就全部實現(xiàn)了
七、綜合效果
文章來源：http://www.zghlxwxcb.cn/news/detail-825652.html
完結，敬請期待…文章來源地址http://www.zghlxwxcb.cn/news/detail-825652.html
到了這里，關于微信小程序：實現(xiàn)微信小程序應用首頁開發(fā) （本地生活首頁）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
