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

搭建第一个小程序页面

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

 

 

• 新建项目并梳理项目结构

• 配置导航栏效果

• 配置 tabBar 效果

• 实现轮播图效果

• 实现九宫格效果

• 实现图片布局

2.接口地址

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

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

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

1.新建项目

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

2.项目结构

 

项目可分如图5个区

1. 导航栏

2. 轮播图

3. 九宫格

4. 图片布局

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%;
 }

查看一下效果

 

 

---

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

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