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

微信小程序制作日常生活首页相关推荐

微信小程序电商实战-首页（上）
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序电商实战-入门篇嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯 ...
【计算机毕业设计】基于微信小程序的校园生活服务平台
毕设帮助.技术解答.源码交流联系方式见文末. 一.课题概述随着互联网时代的到来,移动端应用的发展十分迅猛,校园服务类应用也是不计其数.但大多功能单一,只能满足学生们的部分需求,无法实现真正的一站 ...
微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...
微信小程序开发难？资深大V教您微信小程序制作步骤和方法
微信小程序开发难?资深大V教您微信小程序制作步骤和方法一.登录微信公众平台就能在菜单"开发"---"基本配置"中看到小程序的AppID了,小程序的 Ap ...
个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
小程序微信统计表格_微信小程序制作表格的方法
本文实例为大家分享了微信小程序制作表格的具体代码. 微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码参数内容 ...
微信小程序制作简单的商品列表页，实现价格求和
微信小程序制作简单的商品列表页,实现价格求和准备工作 1.node.js 2.微信开发者工具目录结构客户端代码实现 index.wxml <view class="contain ...
html制作炸金花,微信小程序怎么制作炸金花?微信小程序制作炸金花的方法
很多朋友喜欢玩炸金花游戏,那么怎么在微信小程序上制作炸金花呢?下面就是小编带来的完整详细的教程,想要学习的小伙伴就赶紧看过来吧. 微信小程序怎么制作炸金花?微信小程序制作炸金花的方法 app.json ...
零基础也能学会的微信小程序制作动态搜索页
零基础也能学会的微信小程序制作动态搜索页准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 最终效果: 动手做起来吧~ index.wxml <vi ...

微信小程序制作日常生活首页

1、手机上效果预览

2、开发者工具效果图

3、真机调试

4、项目的目录结构

5、核心代码

5.1 app.json

5.2 首页的代码

5.3 对应的数据

6、友情提示

7、完整的项目代码

微信小程序制作日常生活首页相关推荐

最新文章

热门文章