微信小程序：完成“微信”中“发现”“服务”的页面

最新推荐文章于 2024-09-06 18:16:07 发布

一定要抓住啊

最新推荐文章于 2024-09-06 18:16:07 发布

阅读量3.2k

点赞数 3

文章标签：微信小程序微信 javascript

本文链接：https://blog.csdn.net/m0_62759554/article/details/129329030

版权

该文展示了如何使用微信小程序开发工具创建和配置页面，包括`discover`和`serve`两个页面。`discover`页面实现了类似微信发现页的列表布局，包含图片和文本；`serve`页面则呈现了一个九宫格布局，用于展示生活服务和交通出行的选项。每个页面的结构涉及WXML（结构层）、WXSS（样式层）和JavaScript（逻辑层），并包含了页面生命周期函数和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序：完成“微信”中“发现”“服务”的页面

列表布局小程序：完成“微信”中“发现”的页面

下为详细代码：
discover.wxml

<!--pages/discover/discover.wxml-->

<view class="grid-item" wx:for="{{array}}" wx:key="no">
<view class="grid-list">
<image src="{{item.inco}}" mode="center"/>
{{item.nam}}
<image class="right" src="../images/right.png" mode="heightFix"/></view>

</view>

discover.wxss

/* pages/discover/discover.wxss */
page{
background-color: #ededed;
}
.grid-list {
    display: flex;
    height: 60rpx;
    width: 100%;
    flex-wrap: wrap;
    background-color: #ffffff;
    border-left: 1rpx solid #efefef;
    border-top: 1rpx solid #efefef;
    margin-bottom: 15rpx;
}

.grid-item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ededed;
    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: 100%;
}

.grid-item text {
    font-size: 24rpx;
    margin-top: 10rpx;
}
.right{
    margin-right: 20rpx;
    margin-left: auto;
}

discover.js

// pages/discover/discover.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        array: [{
            no: "1",
            nam: "朋友圈",
            inco:'../images/1.png'
        }, {
            no: "2",
            nam: "视频",
            inco:'../images/2.png'
        }
        , {
            no: "3",
            nam: "扫一扫",
            inco:'../images/3.png'
        }, {
            no: "4",
            nam: "摇一摇",
            inco:'../images/4.png'
        }, {
            no: "55",
            nam: "看一看",
            inco:'../images/1.png'
        }, {
            no: "66",
            nam: "搜一搜",
            inco:'../images/1.png'
        }, {
            no: "77",
            nam: "直播和附近",
            inco:'../images/1.png'
        }
    ]

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

九宫格布局小程序：完成“微信”中“我”的“服务”页面。

serve.wxml

<!--pages/serve/serve.wxml-->
<scroll-view scroll-y="true">
<view class="cont">
    

<view class="head">
    <image src="../images/3head.png" mode="center"/>
</view>

<view class="first">
    <view class="first1">
        <text>金融理财</text>
    </view>
    <view class="first2">
        <view>
            <image src="../images/finance1.png" mode="center"/>
        
        <text>信用卡还款</text></view>
        <view>
            <image src="../images/finance2.png" mode="center"/>
        
        <text>理财通</text></view>
        <view>
            <image src="../images/finance3.png" mode="center"/>
       
        <text>保险服务</text> </view>
    </view>

</view>
<view class='servicePanel'>
  <view class='serviceTitle'>生活服务</view>
    <view class='serviceBlocks'>
      <view class='box2' wx:for='{{array2}}' wx:key='array2_{{index}}'>
        <image src='../images/{{index+5}}.png'></image>
        <text>{{item.text}}</text>
      </view>
    </view>
</view>
<view class='servicePanel'>
  <view class='serviceTitle'>交通出行</view>
    <view class='serviceBlocks'>
      <view class='box2' wx:for='{{array3}}' wx:key='array2_{{index}}'>
        <image src='../images/{{index+11}}.png'></image>
        <text>{{item.text}}</text>
      </view>
    </view>
</view>
</view>
</scroll-view>

serve.wxss

/* pages/serve/serve.wxss */
page{
    background-color: #ededed;
    }
.cont{
    display: flex;
    flex-direction: column;
    background-color: #ededed;
}
.head{
    height: 240rpx;
    width: 100%;
    display: flex;
    background-color: #2aad67;
    align-items: center;
    justify-content: center;
    
}
.first{
    display: flex;
    flex-direction: column;
    height: 220rpx;
    width: 100%;
    background-color: white;
    margin-top: 10rpx;
}
.first1{
    height: 15%;
    width: 100%;
}
.first1 text{
    color: #a19f9f;
    margin-top: 10rpx;
    margin-left: 20rpx;
}
.first2{
    height: 85%;
    width: 100%;
    display: flex;
    flex-direction: row;
    
}
.first2 view{
    width: 200rpx;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.first2 image{
    display: flex;
    height: 60rpx;
    width: 60rpx;
}
.first2 text{
    display: flex;
    font-size: 20rpx;
    font-weight:bold;
    margin-top: 15rpx;
    
}
.servicePanel{
    display: flex;
    flex-direction: column;
    height: 440rpx;
    width: 100%;
    background-color: white;
    margin-top: 10rpx;
}
.serviceTitle{
    height: 7.5%;
    width: 100%;
    color: #a19f9f;
    margin-top: 10rpx;
    margin-left: 20rpx;
  }
  .serviceBlocks{
    display: flex;
    flex-direction: row; /*水平布局*/
    flex-wrap: wrap; /*允许换行*/
  }
  .box2{
    
    display: flex; /*flex布局模型*/
    flex-direction: column; /*垂直布局*/
    align-items: center; /*水平方向居中*/
    justify-content: center; /*垂直方向居中*/
    width: 25%; /*宽度约占屏幕的1/3*/
    height: 180rpx;
  }
 
/* 方格内图标 */
.box2 image{
    width: 80rpx;
    height: 80rpx;
    }
    /* 方格内文字 */
    .box2 text{
      font-size: 20rpx; /*字号为30rpx*/
    }

serve.js

// pages/serve/serve.js
Page({

    myData:'123',
    onLoad:function(options){
        console.log(this.myData)
        
    },
    /**
     * 页面的初始数据
     */
    data: {

        array2:[
            
            {
             
              text:'手机充值'
            },
           
            {
            
              text:'生活缴费'
            },
            {
              
              text:'Q币充值'
            },
            {
              
              text:'城市服务'
            },
            {
              
              text:'腾讯公益'
            },
            {
              
              text:'医疗健康'
            }
          ],
          array3:[
            
            {
             
              text:'手机充值'
            },
           
            {
            
              text:'生活缴费'
            },
            {
              
              text:'Q币充值'
            },
            {
              
              text:'城市服务'
            },
            {
              
              text:'腾讯公益'
            },
            {
              
              text:'医疗健康'
            }
          ]
        },
        
      
    

    /**
     * 生命周期函数--监听页面加载
     */
    

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})