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

2022-07-04 234

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

页面展示

项目链接

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

<!--pages/index/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

<!--pages/wallet/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"
}

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

页面展示

项目链接

项目设计

app.json

index（发现页面）

wallet（钱包页面）

热门文章

最新文章

相关课程

相关电子书

相关实验场景