1、手機上效果預覽

不知道為啥上傳后是如此的高糊畫質（手機畫質很好）

微信小程序日常生活首頁手機效果演示

2、開發者工具效果圖

3、真機調試

4、項目的目錄結構

5、核心代碼

5.1 app.json

{"pages": ["pages/home/home","pages/message/message","pages/phone/phone"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#2b4b6b","navigationBarTitleText": "日常生活","navigationBarTextStyle": "white"},"tabBar": {"list": [{"pagePath": "pages/home/home","text": "首頁","iconPath": "/images/home_before.png","selectedIconPath": "/images/home_after.png"},{"pagePath": "pages/message/message","text": "消息","iconPath": "/images/message_before.png","selectedIconPath": "/images/message_after.png"},{"pagePath": "pages/phone/phone","text": "聯系我們","iconPath": "/images/phone_before.png","selectedIconPath": "/images/phone_after.png"}]},"style": "v2","sitemapLocation": "sitemap.json"}

---

5.2 首頁的代碼

<!--pages/home/home.wxml--> <!-- <text>pages/home/home.wxml</text> --> <!-- 輪播圖區域 --> <swiper autoplay circular indicator-dots><swiper-item wx:for="{{imageList}}" wx:key="id"><image src="{{item.image}}"></image> </swiper-item> </swiper><!-- 九宮格 --> <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><!-- 圖片區域 --> <view class="img-box"><image src="/images/two.jpg" mode="widthFix"></image><image src="/images/two.jpg" mode="widthFix"></image> </view>

---

5.3 對應的數據

// pages/home/home.js Page({/*** 頁面的初始數據*/data: {// 存放輪播圖數據的列表imageList:[{id:1,image:"/images/one.jpg"},{id:2, image:"/images/refrigerator.jpg"},{id:3, image:"/images/pan.jpg"}],// 存放九宮格數據的列表gridList:[]},//獲取九宮格數據的方法getGridList(){wx.request({url: 'https://www.escook.cn/categories',method: 'GET',success: (res) =>{this.setData({gridList: res.data})}})},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {this.getGridList()},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

---

6、友情提示

• 1、需要配置導航欄的效果(在app.json中進行配置 在windows中配置)
• 2、配置tabBar效果（在app.json中進行配置、需要額外增加tabBar）
• 3、實現輪播圖效果（知道swiper的使用、可以創建數組對象、圖片地址可以是項目中的靜態資源圖片、也可以是聯網圖片（這里是項目中的靜態資源））
• 4、實現九宮格效果（數據來自網絡請求 （需要掌握網絡請求相關的知識））
• 5、實現圖片布局

7、完整的項目代碼

地址鏈接：https://download.csdn.net/download/weixin_43304253/86401914

總結

以上是生活随笔為你收集整理的微信小程序制作日常生活首页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。