小程序入门——设计页面

DaveCui
378 阅读5分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天，点击查看活动详情

写在前面

在第一篇文章文章小程序入门——注册流程 - 掘金 (juejin.cn)我们已经创建好了我们的项目。
在第二篇文章小程序入门——架构配置 - 掘金 (juejin.cn)我们已经完成了小程序的基础架构配置。

现在我们就开始正式开发小程序，后面我会全部走一遍页面设计、功能开发、对接接口的流程。这一部分界面实现我是不太擅长的，但是多少有点经验，就给大家贴出来一个比较美观的作为参考，实现逻辑什么的就不写了。前端的玩意儿，我现在还写不明白。

你可能会觉得这个页面平平无奇，但是，凡事就怕对比，以下是我一年前写的小程序，是不是感觉我最近实现的界面赏心悦目了？( ´◔︎ ‸◔︎\`)
**大致的效果就是以上了。**

一、页面结构实现

首先确定一下，我们大致的文件目录架构。 image.png

微信小程序初始化的compnents什么的我全都给删了，当然也出了点问题。不过都是一些删减性的问题，希望大家自行解决。

在小程序入门——结构配置那一篇文章里，我们说了app.json里面的tabBar是用来增加tab页面的，这里放一下我的app.json的配置.

pages，list的配置里面一定要有对应的文件目录页面，不然会报错的。iconPath、selectedIconPath同理，图标可以在这个网站iconfont-阿里巴巴矢量图标库自行搜索。

{
  "pages": [
    "pages/index/index",
    "pages/mine/mine"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "手写字体转换器",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "selectedColor": "#b24444",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/icon/index.png",
        "selectedIconPath": "images/icon/index_selected.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/icon/mine.png",
        "selectedIconPath": "images/icon/mine_selected.png",
        "text": "我的"
      }
    ]
  },
  "sitemapLocation": "sitemap.json",
  "usingComponents": {},
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000,
    "uploadFile": 10000
  },
  "debug": true,
  "lazyCodeLoading": "requiredComponents"
}

这样，我们的底部导航栏tabBar就做好了。实际效果如下：

二、index页面实现

你们也知道我之前的审美有多么糟糕，能够实现这个比较美观的首页，全靠模仿以及我过去对各类图片素材的积累。

我无意间看到这个小程序的布局和色彩搭配，这种透明度的和icon的结合非常值得参考。 image.png

这里放个源码，一般来说有前端html三件套经验的同学应该都看得懂，如果看不懂的话，就参考下吧：

  • index.js文件如下：这里只放了展示元素，后续的实现都没有放
//index.js
Page({
  data: {
    powerList: [{
      icon:"https://i.328888.xyz/2023/01/11/CoJww.png",
      background:"rgba(84,112,198,0.3)",
      title: '手写字体转换',
      tip: '将word,txt等印刷字体文件转换为手写字体图片',
    }, {
      icon:"https://i.328888.xyz/2023/01/11/CosFq.png",
      background:"	rgba(145,204,117,0.3)",
      title: '手写字体识别',
      tip: '对手写字体图片进行识别返回word文件',
    }, {
      icon:"https://i.328888.xyz/2023/01/11/CoKxa.png",
      background:"rgba(18,150,219,0.3)",
      title: '通用表格识别',
      tip: '对各类表格图片进行识别返回excel文件',
    }],
  },

});
  • index.html文件如下
<!--index.wxml-->
<view class="container">

  <!-- <view class="title">快速了解云开发</view>

  <view class="top_tip">免鉴权接口调用 免部署后台 高并发</view> -->
  <image src="https://i.328888.xyz/2023/01/11/CSMSC.png" mode="aspectFill" class='img'></image>

  <view class="backgroud-float">
    <view wx:key="title" wx:for="{{powerList}}" wx:for-item="power">
      <view class="power" style="background-color: {{power.background}}">
        <view class="power_info" data-index="{{index}}">
          <image class="power_info_icon" src="{{power.icon}}"></image>
          <view class="power_info_text">
            <view class="power_info_text_title">{{power.title}}</view>
            <view class="power_info_text_tip">{{power.tip}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <view class="bottom-tip">DaveCui@https://github.com/Dave-Cui</view>


</view>
  • index.wxss文件如下：
/**index.wxss**/

page {
  /* padding-top: 54rpx; */
  background-color:#F6F6F6;
  padding-bottom: 60rpx;
}
.img {
  width: 100%;
}


.backgroud-float{
  background-color:#FFFFFF;
  width: 100%;
  margin-bottom:30rpx;
}
.power {
  margin-top: 30rpx;
  margin-left: 30rpx;
  border-radius: 5px;
  /* background-color: 	#F5F5F5; */
  width: 93%;
  padding-bottom: 1rpx;
}

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

.power_info_icon{
  width: 50rpx;
  height: 50rpx;
  /* transform: rotate(90deg); */
}



.power_info_text {
  margin-left: 50rpx;
  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;
}

.bottom-tip {
  color: rgba(0, 0, 0, 0.4);
  font-size: 24rpx;
  margin-top: 25%;
}
  • index.json,这里因为没用到什么组件，就没有引入,所以光秃秃的：
{
  "usingComponents": {
  }
}

图片元素都贴心的换成了url链接。这还拿不下你？

三、mine页面实现

这个界面我是直接抄的我原来的，那次也算是我审美的巅峰了。虽然也是借鉴的别人的页面。

  • mine.html
<!--pages/mine.wxml-->
<view class="container">
  <view class="user">

    <view class="top-background">
      <image mode="aspectFill" src="https://i.328888.xyz/2023/01/11/CSqCc.png"></image>
    </view>
    <view class="user-bar">
      <view class="avatar" wx:if="{{user.avatar}}">
        <image model="aspectFit" src="{{user.avatar}}"></image>
      </view>

      <view class="avatar" wx:else catchtap="login">
        <open-data type="userAvatarUrl"></open-data>
      </view>

      <view class="detail" wx:if="{{user.nickName}}">
        <view class="name">{{user.nickName}}</view>
        <view class="desc">
          <view wx:if="{{user.label==1}}" class="tag small round bg-skin1">普通用户</view>
          <view wx:if="{{user.label==2}}" class="tag small round bg-yellow">普通VIP</view>
          <view wx:if="{{user.label==3}}" class="tag small round bg-orange">超级VIP</view>
        </view>
      </view>

      <view class="detail" wx:else bindtap="login">
        <view class="name">登录</view>
        <view class="desc">
          <view class="tag">
            登录立即解锁更多功能
          </view>
        </view>
      </view>
    </view>

    <button open-type="share" class="share-my-btn">
      <image src="https://i.328888.xyz/2023/01/11/Cobj3.png" class="icon"></image>
      <text>分享给朋友</text>
    </button>
  </view>

  <view class="menu">
    <view class="item" bindtap="my_font">
      <view class="content">
        <image src="https://i.328888.xyz/2023/01/11/CoNl8.png" class="icon"></image>
        <!-- <text class="icon"></text> -->
        <text class="text-black">我的字体</text>
        <text class="arrow">></text>
      </view>
    </view>
    <view class="item" bindtap="my_model">
      <view class="content">
        <image src="https://i.328888.xyz/2023/01/11/Co8Q5.png" class="icon"></image>
        <text class="text-black">我的模板</text>
        <text class="arrow">></text>
      </view>
    </view>

    <view class="item" bindtap="service">
      <view class="content">
        <image src="https://i.328888.xyz/2023/01/11/CojFy.png" class="icon"></image>
        <text class="text-black">联系客服</text>
        <text class="arrow">></text>
      </view>
    </view>

    <view class="item" bindtap="about">
      <view class="content">
        <image src="https://i.328888.xyz/2023/01/11/CoOVv.png" class="icon"></image>
        <text class="text-black">关于我们</text>
        <text class="arrow">></text>
      </view>
    </view>

  </view>
  <!--down area end-->
</view>
  • mine.js
// pages/mine.js
Page({


  /**
   * 页面的初始数据
   */
  data: {
    user: null,
    loading: true,
    register: false
  },
  )}
  • mine.wxss
/* pages/mine/mine.wxss */
.card-menu {
  border-radius: 0rpx !important;
}

.container {
  padding: 0;
}

.top-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 350rpx;
  opacity: 1.0;
}

.top-background image {
  width: 100%;
  height: 100%;
}

.container .user {
  height: 350rpx;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 100rpx 40rpx 0rpx 40rpx;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}


.container .user .user-bar {
  flex: 1;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  z-index: 999;
}

.container .user .user-bar .avatar {
  height: 130rpx;
  width: 130rpx;
  margin-top: 10rpx;
  border: 0rpx;
}

.container .user .user-bar .detail {
  width: 400rpx;
  margin-left: 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: #fff;
  box-sizing: border-box;
}

.container .user .user-bar .detail .name {
  font-size: 55rpx;
  font-weight: bold;
  color: #fff;
}

.container .user .user-bar .detail .desc {
  margin-top: 15rpx;
  /* width:180rpx;    */
  /* font-weight: bold; */
  display: flex;
  justify-content: flex-start;
}


.container .user .user-bar .detail .desc .tag {
  background-color: #b24444;
  color: #fff;
  font-size: 25rpx;
  padding: 5rpx 20rpx;
  height: 35rpx;
  border-radius: 0;
}


.share-my-btn {
  position: absolute;
  bottom: 30rpx;
  right: 10rpx;
  opacity: .8;
  padding: 0rpx 30rpx !important;
  font-size: 30rpx;
  color: #fff;
  border-radius: 0 !important;
  z-index: 99999;
}

.share-my-btn .icon {
  margin-top: 9rpx;
  height: 28rpx;
  width: 28rpx;
}

.container .menu {
  /* box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-direction: column;
  justify-content: center; */
  background: #FFFFFF;
  height: 80%;
  width: 95%;
  margin-left: 2.5%;
  margin-right: 2.5%;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  margin-top: 20px;
}



.menu .item {
  position: relative;
  display: flex;
  padding: 0rpx 30rpx;
  min-height: 100rpx;
  background-color: var(--white);
  justify-content: space-between;
  align-items: center;
}

.menu .item .content {
  display: flex;
  /* flex-direction: column; */
  justify-content: space-between;
}

.menu .item .content .icon {
  margin-top: 9rpx;
  height: 30rpx;
  width: 30rpx;
}

.menu .item .content .text-black {
  margin-left: 15rpx;
  font-size: 35rpx;
}

.menu .item .content .arrow {
  color: #b24444;
  font-size: 40rpx;
  margin-left: 440rpx;
  /* margin-right: 20rpx; */
}
  • mine.json
{
  "usingComponents": {}
}

同样的，贴心的把图片换成url链接格式。这下动心了吧？

avatar
文章
阅读
粉丝