【微信小程序】 清爽简约的主页界面（布局+配色方案）

写在前面

早就想出一个微信小程序入门引导了，但是又担心鄙人才疏学浅，造成错误引导……那篇文章拖了好久，写了大概4000字，迟迟没有发出来，还是需要很多时间去完善，需要我自己从头走一遍，才能更熟悉初学者会遇到的困难所在。。。

对于没有前端开发经验的开发者来说，学习微信小程序开发可能需要花费一定的时间和精力。需要掌握一些前端开发技术，如HTML、CSS、JavaScript等，并了解小程序的开发规范和API。

完整代码

页面布局index.wxml

<!--index.wxml-->
<view class="container">
  <view class="title">功能大厅</view>
<view class="top_tip"></view>
  <view class="power" wx:key="title" wx:for="{{powerList}}" wx:for-item="power">
    <view class="power_info" data-index="{{index}}" bindtap="onClickPowerInfo">
      <view class="power_info_text">
        <view class="power_info_text_title">{{power.title}}</view>
        <view class="power_info_text_tip">{{power.tip}}</view>
      </view>
      <image wx:if="{{!power.showItem}}" class="power_info_more" src="../../images/arrow.svg"></image>
      <image wx:if="{{power.showItem}}" class="power_info_less" src="../../images/arrow.svg"></image>
    </view>
    <view wx:if="{{power.showItem}}">
      <view wx:key="title" wx:for="{{power.item}}">
        <view class="line"></view>
        <view class="power_item" bindtap="jumpPage" data-page="{{item.page}}">
          <view class="power_item_title">{{item.title}}</view>
          <image class="power_item_icon" src="../../images/arrow.svg"></image>
        </view>
      </view>
    </view>
  </view>

  <view class="environment" bindtap="onChangeShowEnvChoose">当前环境 {{ selectedEnv.alias }}</view>

  <cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></cloud-tip-modal>

</view>

主页面采用的就是一个非常普通的基于<view>标签的垂直布局，可通过direction属性设置更改布局效果。

执行程序index.js

// index.js
// const app = getApp()
const { envList } = require('../../envList.js');

Page({
  data: {
    showUploadTip: false,
    powerList: [
      {
        title: '总得跑一个',
        tip: '登陆以体验完整服务',
        showItem: false,
        item: [{
          title: '总得跑一个',
          page: 'login'
        } 
      ]
      }, 
      {
      title: '总得跑一个',
      tip: '总得跑一个',
      showItem: false,
      item: [{
        title: '总得跑一个',
        page: 'election'//选举页面
      },
       {
        title: '总得跑一个',
        page: 'getResult'//结果查询
      },
    ]
    }, {
      title: '总得跑一个',
      tip: '总得跑一个',
      showItem: false,
      item: [{
        title: '总得跑一个',
        page: 'remoteSwitchPre'
      }, {
        title: '总得跑一个',
        page: 'apply'
      }, 
    ]
    }, {
      title: '总得跑一个',
      tip: '',
      showItem: false,
      item: [{
        title: '总得跑一个',
        page: 'remoteSwitch'//拉合闸控制api
      }
    ]
    }, 
  ],
    envList,
    selectedEnv: envList[0],
    haveCreateCollection: false
  },

  onClickPowerInfo(e) {
    const index = e.currentTarget.dataset.index;
    const powerList = this.data.powerList;
    powerList[index].showItem = !powerList[index].showItem;
    if (powerList[index].title === '总得跑一个' && !this.data.haveCreateCollection) {
      this.onClickDatabase(powerList);
    } else {
      this.setData({
        powerList
      });
    }
  },

  onChangeShowEnvChoose() {
    wx.showActionSheet({
      itemList: this.data.envList.map(i => i.alias),
      success: (res) => {
        this.onChangeSelectedEnv(res.tapIndex);
      },
      fail (res) {
        console.log(res.errMsg);
      }
    });
  },

  onChangeSelectedEnv(index) {
    if (this.data.selectedEnv.envId === this.data.envList[index].envId) {
      return;
    }
    const powerList = this.data.powerList;
    powerList.forEach(i => {
      i.showItem = false;
    });
    this.setData({
      selectedEnv: this.data.envList[index],
      powerList,
      haveCreateCollection: false
    });
  },

  jumpPage(e) {
    wx.navigateTo({
      url: `/pages/${e.currentTarget.dataset.page}/index?envId=${this.data.selectedEnv.envId}`,
    });
  },

  onClickDatabase(powerList) {
    wx.showLoading({
      title: '',
    });
    wx.cloud.callFunction({
      name: 'quickstartFunctions',
      config: {
        env: this.data.selectedEnv.envId
      },
      data: {
        type: 'createCollection'
      }
    }).then((resp) => {
      if (resp.result.success) {
        this.setData({
          haveCreateCollection: true
        });
      }
      this.setData({
        powerList
      });
      wx.hideLoading();
    }).catch((e) => {
      console.log(e);
      this.setData({
        showUploadTip: true
      });
      wx.hideLoading();
    });
  }
});

配色方案index.wxss

页面配色我是参考了学校主页，然后用取色器调的，个人感觉还挺还看。

/**index.wxss**/

page {
  padding-top: 54rpx;
  background-color: #f6f6f6;
  padding-bottom: 60rpx;
}

.title {
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  font-size: 44rpx;
  margin-bottom: 40rpx;
}

.top_tip {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #888888;
  margin-bottom: 28rpx;
}

.power {
  margin-top: 30rpx;
  border-radius: 5px;
  background-color: white;
  width: 93%;
  padding-bottom: 1rpx;
}

.power_info {
  display: flex;
  padding: 30rpx 25rpx;
  align-items: center;
  justify-content: space-between;
}

.power_info_more {
  width: 30rpx;
  height: 30rpx;
  transform: rotate(90deg);
}

.power_info_less {
  width: 30rpx;
  height: 30rpx;
  transform: rotate(270deg);
}

.power_info_text {
  display: flex;
  flex-direction: column;
}

.power_info_text_title {
  margin-bottom: 10rpx;
  font-weight: 400;
  font-size: 35rpx;
}

.power_info_text_tip {
  color: rgba(0, 0, 0, 0.4);
  font-size: 25rpx;
}

.power_item {
  padding: 30rpx 25rpx;
  display: flex;
  justify-content: space-between;
}

.power_item_title {
  font-size: 30rpx;
}

.power_item_icon {
  width: 30rpx;
  height: 30rpx;
}

.line {
  width: 95%;
  margin: 0 auto;
  height: 2rpx;
  background-color: rgba(0, 0, 0, 0.1);
}

.environment {
  color: rgba(0, 0, 0, 0.4);
  font-size: 24rpx;
  margin-top: 25%;
}

配色我还挺喜欢，实现效果因人而异

以上就是本文的全部内容，代码复可以直接使用✌️

觉得有帮助的小伙伴还请点个关注

后续会持续分享 免费、高质量 的高校相关以及Python学习文章