搭建第一个小程序页面

1.首页效果以及实现步骤

新建项目并梳理项目结构
配置导航栏效果
配置 tabBar 效果
实现轮播图效果
实现九宫格效果
实现图片布局

2.接口地址

获取轮播图数据列表的接口【GET】https://www.escook.cn/slides
获取九宫格数据列表的接口【GET】https://www.escook.cn/categories

一、新建项目并梳理项目结构

1.新建项目

参考本作者的上一篇教程进行项目创建即可

2.项目结构

项目可分如图5个区

导航栏
轮播图
九宫格
图片布局
tabBar效果

二、导航栏区

1.打开app.json文件，在pages节点下添加如下三条路径：

   "pages":["pages/home/home",   //一定要注意顺序！！！"pages/massage/massage","pages/myinfo/myinfo"],

2.保存后，删除pages文件夹下的index文件夹和logs文件夹

3.修改导航栏的背景颜色和标题

打开app.json文件，找到window节点
将window节点下的navigationBarBackgroundColor的值改为#0088cc, 也可以是自己喜欢的颜色，但必须是6位二进制数
navigationBarTitleText这个属性可以设置标题
navigationBarTextStyle这个属性可以设置标题的字体颜色，注意！该属性的值只有black和white

4.保存后即可查看效果

三、tabBar效果

1.打开app.json文件，添加tabBar节点

2.在该节点下添加如下配置

 "tabBar": {"selectedColor": "#0088cc","list": [{"pagePath": "pages/home/home","text": "主页","iconPath": "images/tabs/home.png","selectedIconPath": "images/tabs/home-active.png"},{"pagePath": "pages/massage/massage","text": "消息","iconPath": "images/tabs/message.png","selectedIconPath": "images/tabs/message-active.png"},{"pagePath": "pages/myinfo/myinfo","text": "联系我们","iconPath": "images/tabs/contact.png","selectedIconPath": "images/tabs/contact-active.png"}]}

需要注意的是，tabBar节点中，list属性中对象的个数必须在2~5之间

pagePath：页面路径
text：该tabBar的名字
iconPath：tabBar图标的路径
selectedIconPath：选中后的tabBar图标路径
selectedColor：选中后tabBar名称的颜色

tabBar中还有其他的一些属性，可以参考本作者的上一篇文章

3.保存一下，查看效果

四、轮播图区

轮播图的关键字是 swiper

1.打开home.wxml文件夹，搭建轮播图的结构

 <!-- 轮播图 start --><swiper indicator-dots circular     indicator-active-color="white"><swiper-item ><image src=""></image></swiper-item> <swiper-item><image src=""></image></swiper-item></swiper><!-- 轮播图 end -->

2.打开home.wxss文件设置设置轮播图的样式

 swiper {height: 350rpx;}swiper image {height: 100%;width: 100%;}

3.给image元素添加src属性，属性值为轮播图中照片的路径

注意：有几张照片就要在swiper中放几个<swiper-item ></swiper-item>标签

每个<swiper-item ></swiper-item>标签中只能存一个图片

indicator-dots 、circular 、indicator-active-color这三个属性是设置轮播图中的索引小点点的

五、九宫格区

1.打开home.wxml文件，搭建九宫格的结构

 <!-- 九宫格 start --><view class="grid-list"><view wx:for="{{ gridList }}" wx:key="id" class="grid-item"><image src="{{ item.icon }}"> </image><text>{{ item.name }}</text></view></view><!-- 九宫格 end -->

因为渲染九宫格需要向服务器请求数据，所以需要在home.js文件下设置请求

2.打开home.js文件，进行如下配置

 // data节点 data: {swiperList: [],}  /*** 生命周期函数--监听页面加载*/onLoad(options) {// 在声明周期中调用该方法this.getSwiperList(), }// 方法getSwiperList() {wx.request({url: 'https://www.escook.cn/slides',method: 'GET',success: (res) => {this.setData({swiperList: res.data})}})}

到这一步，请求就可以发送成功了

3.美化九宫个的样式

打开home.wxss文件进行如下配置

 .grid-list {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-sizing: border-box;}.grid-item image {width: 60rpx;height: 60rpx;}.grid-item text {font-size: 24rpx;margin-top: 10rpx;}

六、图片布局

1.打开home.wxml文件，搭建图片布局的基本结构

 <view class="img-box"><image src="/images/link-01.png" mode="widthFix"></image><image src="/images/link-02.png" mode="widthFix"></image></view>

2.打开home.wxss文件，美化样式

 .img-box {display: flex;padding: 20rpx 10rpx;justify-content: space-around;}.img-box image {width: 45%;}

查看一下效果

到这一步，我们第一个微信小程序的页面就做完了！

小编时间有限，暂时只能大体上写一下，小编将不断完善该文章！！！

手把手教你写第一个微信小程序页面相关推荐

手把手教你搭建Mac环境微信小程序的本地测试服务器
问题的提出 Mac环境方便快捷地搭建小程序的测试服务器小程序对于网络请求的URL的特殊要求不能出现端口号不能用localhost 必须用https 主要步骤用json-server搭建简单的 ...
微信小程序开发学习笔记001--认识微信小程序,第一个微信小程序
第一天,认识微信小程序,第一个微信小程序 1.什么是微信小程序? 是h5网页嘛?不是微信张小龙说: 小程序是一种不需要下载安装即可使用的应用, 它实现了应用"触手可及"的梦想,用 ...
微信小程序手写签名_微信小程序实现电子签名功能
本文实例为大家分享了微信小程序实现电子签名的具体代码,供大家参考,具体内容如下 // XXXX.wxml bindtouchmove="canvasMove" bindtouche ...
普本在校生是如何零基础在一个月内开发出第一款微信小程序的
先自我介绍一下,我是一个普通本科的大三在读生,在2020年春节前后,自己一个人开发并上线了第一款微信小程序,后续陆续开发了N款小程序,并且自己通过毕设.课设的开发在2020年上半年的疫情期间挣了一万多 ...
2022-2023第一学期微信小程序期末实训报告
2022-2023第一学期微信小程序期末实训报告微信小程序小程实训报告 2022-2023第一学期微信小程序期末实训报告前言一.微信小程序简介二.微信小程序布局三.微信小程序实现,分页面展示 ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
微信小程序开发与应用第一章微信小程序的基本知识1
1-1 第一章第一节微信小程序的基本知识1 文章目录前言一.注册一个小程序账号二.第一个微信小程序"Hello Wechat!" (一)准备工作 (二)页面介绍 (三)代 ...
多平台多渠道账号体系绑定第一篇-微信小程序篇
先奉上本篇实现效果多平台多渠道账号体系绑定第一篇-微信小程序篇近来,在对接三方平台时,欲将多方开放平台统一整合入笔者的框架内. 如下为大致思路设计图由于需对接多方平台关联账号体系,思来之后,将设 ...
新手尝试编写微信小程序（1）——我的第一个微信小程序
微信小程序风靡全国已经好多年了,首先是微信小程序,后面百度等多个平台都发布了自己的小程序了,可我还从未尝试过开发一个玩玩,其实对于一个程序员而言,开发一个小程序实在不是什么难事情,所以今天就要聊此心愿 ...

手把手教你写第一个微信小程序页面