用微信小程序写一个微信（布局练习）

梦里梦外; 2023-01-15 15:22 249阅读 0赞

### 文章目录 ###

*  页面展示
 *  项目链接
 *  项目设计
 *   *  app.json
     *  index（发现页面）
     *  wallet（钱包页面）

# 页面展示 #

![在这里插入图片描述][20210423085239436.gif_pic_center]

# 项目链接 #

[https://download.csdn.net/download/weixin\_45525272/17042019][https_download.csdn.net_download_weixin_45525272_17042019]

# 项目设计 #

## app.json ##

{ 
        "pages": [
            "pages/index/index",
            "pages/wallet/wallet"
        ],
        "sitemapLocation": "sitemap.json",
        "tabBar": { 
          "list": [{ 
            "pagePath": "pages/index/index",
            "text": "发现",
            "iconPath": "/images/games.png",
            "selectedIconPath": "/images/games.png"
          },
          { 
            "pagePath": "pages/wallet/wallet",
            "text": "钱包",
            "iconPath": "/images/shopping.png",
            "selectedIconPath": "/images/shopping.png"
          }]
        }
    }

## index（发现页面） ##

wxml

<view class='container'>
      <view class='listGroup' wx:for='{ {list}}' wx:for-item='group' wx:key='group{ {index}}'>
        <view class='listItem' wx:for='{ {group}}' wx:for-item='row' wx:key='row{ {index}}'>
          <image src='{ {row.icon}}'></image>
          <text>{
       {row.text}}</text>
          <image src='/images/arrow.png'></image>
        </view>
      </view>
    </view>

wxss

/* pages/index/index.wxss */
    /*背景容器样式*/
    .container{ 
      height: 100vh;/*高度为100视窗，写成100%无效*/
      background-color: silver;/*背景颜色为银色*/
      display: flex;/*flex布局模型*/
      flex-direction: column; /*垂直布局*/
    }
    
    /*列表组样式*/
    .listGroup{ 
      background-color: white;/*背景颜色为白色*/
      margin: 20rpx 0;/*上下外边距20rpx，左右0*/
    }
    
    /*列表项单行样式*/
    .listItem{ 
      display: flex;/*flex布局模型*/
      flex-direction: row; /*水平布局*/
      align-items: center; /*垂直方向居中*/
      border: 1rpx solid silver;/*1rpx宽的银色实线边框*/
      padding: 10rpx;/*内边距10rpx*/
    }
    
    /*图标的尺寸*/
    image{ 
      width: 80rpx;/*宽度*/
      height: 80rpx;/*高度*/
      margin: 0 15rpx;/*上下外边距0，左右外边距15rpx*/
    }
    
    /*文本样式*/
    text{ 
      font-size: 40rpx;/*字体大小40rpx*/
      flex-grow: 1;/*扩张多余空间宽度*/
    }

// pages/index/index.js
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        list: [
          //第1组列表
          [{  text: '朋友圈', icon: '/images/moments.png' }],
          //第2组列表
          [
            {  text: '扫一扫', icon: '/images/scan.png' },
            {  text: '摇一摇', icon: '/images/shake.png' }
          ],
          //第3组列表
          [
            {  text: '看一看', icon: '/images/topStories.png' },
            {  text: '搜一搜', icon: '/images/search.png' }
          ],
          //第4组列表
          [
            {  text: '购物', icon: '/images/shopping.png' },
            {  text: '游戏', icon: '/images/games.png' }
          ],
          //第5组列表
          [{  text: '小程序', icon: '/images/miniProgram.png' }]
        ]
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
    
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
    
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
    
      },
    
      /** * 生命周期函数--监听页面隐藏 */
      onHide: function () { 
    
      },
    
      /** * 生命周期函数--监听页面卸载 */
      onUnload: function () { 
    
      },
    
      /** * 页面相关事件处理函数--监听用户下拉动作 */
      onPullDownRefresh: function () { 
    
      },
    
      /** * 页面上拉触底事件的处理函数 */
      onReachBottom: function () { 
    
      },
    
      /** * 用户点击右上角分享 */
      onShareAppMessage: function () { 
    
      }
    })

json

{ 
      "navigationBarTitleText": "发现"
    }

## wallet（钱包页面） ##

wxml

<view class='container'>
      <view class='topPanel'>
        <view class='box1' wx:for='{ {array1}}' wx:key='array1_{ {index}}'>
          <image src='{ {item.icon}}'></image>
          <text>{
       {item.text}}</text>
        </view>
      </view>
      <view class='servicePanel'>
        <view class='serviceTitle'>腾讯服务</view>
        <view class='serviceBlocks'>
          <view class='box2' wx:for='{ {array2}}' wx:key='array2_{ {index}}'>
            <image src='{ {item.icon}}'></image>
            <text>{
       {item.text}}</text>
          </view>
        </view>
      </view>
    </view>

wxss

/* pages/wallet/wallet.wxss */
    /* pages/index/index.wxss */
    /*1 背景容器样式*/
    .container { 
        height: 100vh; /*高度为100视窗，写成100%无效*/
        background-color: silver; /*背景颜色为银色*/
        display: flex; /*flex布局模型*/
        flex-direction: column; /*垂直布局*/
      }
      
      /*2 面板1：顶端状态栏*/
      .topPanel { 
        height: 300rpx; /*高度*/
        background-color: #686f79; /*背景颜色为灰色#686F79*/
        display: flex; /*flex布局模型*/
        flex-direction: row; /*水平布局*/
      }
      /*2-1 面板1：方格样式*/
      .box1 { 
        display: flex;/*flex布局模型*/
        flex-direction: column;/*垂直布局*/
        align-items: center;/*水平方向居中*/
        width: 33%;/*宽度约占屏幕1/3*/
        height: 250rpx;/*高度*/
      }
      /*2-2 面板1：方格内图标样式*/
      .box1 image{ 
        width: 110rpx;/*宽度*/
        height: 110rpx;/*高度*/
        margin: 20rpx;/*四周外边距均为20rpx*/
      }
      /*2-3 面板1：方格内文本样式*/
      .box1 text{ 
        text-align: center;/*文本居中*/
        color: white;/*字体颜色为白色*/
        font-size: 35rpx;/*字号35rpx大小*/
      }
      
      /*3 面板2：腾讯服务栏*/
      .servicePanel { 
        min-height: 600rpx; /*最小高度*/
        background-color: white; /*背景颜色为白色*/
        margin: 20rpx 0; /*上下外边距20rpx，左右0*/
      }
      /*3-1 面板2：第一行标题样式*/
      .serviceTitle { 
        padding: 20rpx;/*四周内边距20rpx*/
        border: 1rpx solid silver;/*1rpx宽的银色实线边框*/
        font-size: 30rpx;/*字号30rpx大小*/
        color: gray;/*字体颜色为灰色*/
      }
      /*3-2 面板2：九宫格区域样式*/
      .serviceBlocks { 
        display: flex;/*flex布局模型*/
        flex-direction: row;/*水平布局*/
        flex-wrap: wrap;/*允许换行*/
      }
      /*3-2-1 面板2：九宫格区域-方格样式*/
      .box2 { 
        border-right: 1rpx solid silver;/*1rpx宽的银色实线边框*/
        border-bottom: 1rpx solid silver;/*1rpx宽的银色实线边框*/
        display: flex;/*flex布局模型*/
        flex-direction: column;/*垂直布局*/
        align-items: center;/*水平方向居中*/
        justify-content: center;/*垂直方向居中*/
        width: 33%;/*宽度约占屏幕1/3*/
        height: 230rpx;/*高度230rpx*/
      }
      /*3-2-2 面板2：方格内图标*/
      .box2 image { 
        width: 90rpx;/*宽度*/
        height: 90rpx;/*高度*/
      }
      /*3-2-3 面板2：方格内文本*/
      .box2 text { 
        font-size: 30rpx;/*字号30rpx大小*/
      }

// pages/index/index.js
    Page({ 
    
        /** * 页面的初始数据 */
        data: { 
          //面板1的九宫格数组
          array1: [
            {  icon: '/images/top/money.png', text: '收付款' },
            {  icon: '/images/top/balance.png', text: '零钱\n0.00' },
            {  icon: '/images/top/cards.png', text: '银行卡' },
          ],
          //面板2的九宫格数组
          array2: [
            {  icon: '/images/service/cardRepay.png', text: '信用卡还款' },
            {  icon: '/images/service/mobileTopup.png', text: '手机充值' },
            {  icon: '/images/service/wealth.png', text: '理财通' },
            {  icon: '/images/service/utilities.png', text: '生活缴费' },
            {  icon: '/images/service/qqCoins.png', text: 'Q币充值' },
            {  icon: '/images/service/publicService.png', text: '城市服务' },
            {  icon: '/images/service/charity.png', text: '腾讯公益' },
            {  icon: '/images/service/insurance.png', text: '保险服务' }
          ]
        },
      
        /** * 生命周期函数--监听页面加载 */
        onLoad: function (options) { 
      
        },
      
        /** * 生命周期函数--监听页面初次渲染完成 */
        onReady: function () { 
      
        },
      
        /** * 生命周期函数--监听页面显示 */
        onShow: function () { 
      
        },
      
        /** * 生命周期函数--监听页面隐藏 */
        onHide: function () { 
      
        },
      
        /** * 生命周期函数--监听页面卸载 */
        onUnload: function () { 
      
        },
      
        /** * 页面相关事件处理函数--监听用户下拉动作 */
        onPullDownRefresh: function () { 
      
        },
      
        /** * 页面上拉触底事件的处理函数 */
        onReachBottom: function () { 
      
        },
      
        /** * 用户点击右上角分享 */
        onShareAppMessage: function () { 
      
        }
      })

json

{ 
      "navigationBarTitleText": "钱包",
      "navigationBarBackgroundColor":"#686F79"
    }

[20210423085239436.gif_pic_center]: /images/20221022/be2fe952e67a4a83a6cd54f59600119b.png
[https_download.csdn.net_download_weixin_45525272_17042019]: https://download.csdn.net/download/weixin_45525272/17042019