前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >「小程序JAVA实战」小程序我的个人信息页面开发(41)

「小程序JAVA实战」小程序我的个人信息页面开发(41)

作者头像
IT架构圈
发布2019-07-08 10:14:37
1.3K0
发布2019-07-08 10:14:37
举报
文章被收录于专栏:IT架构圈

已经完成了登录和注册页面已经开发完毕,当用户注册和登录完毕后,让用户登录到我们的个人信息页面,就是我的页面。源码:https://github.com/limingios/wxProgram.git 中No.15

我的页面的功能

  • 当其他人查看我的信息,可以看到关注我,粉丝数量,关注数量,获赞数量。
  • 当用户自己点击我的信息,可以看到上传视频,注销登录,粉丝数量,关注数量,获赞数量。
  • 页面的设计
  • mine文件内加入基本的小程序需要的元素
  • mine.wxml
代码语言:javascript
复制
<view>

  <view class='container'>
      <image src="{{faceUrl}}" class="face"></image>
    <label class='nickname'>{{nickname}}</label>
      <button size='mini' class='primary' bindtap='uploadVideo'> 上传作品</button>
      <button size='mini' type='' class='logout' bindtap='logout'>注销</button>

        <button size='mini' type='' class='follow' data-followType='0' bindtap='followMe'>已关注</button>

        <button size='mini' type='primary' class='follow' data-followType='1' bindtap='followMe'>关注我</button>


    <view class='container-row'>
      <label class='info-items'>{{fansCounts}} 粉丝</label>
      <label class='info-items'>{{followCounts}} 关注</label>
      <label class='info-items'>{{receiveLikeCounts}} 获赞</label>
    </view>
  </view>

</view>

<view class="line"></view>
  • mine.js
代码语言:javascript
复制
// pages/mine/mine.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    faceUrl: "../../resource/images/noneface.png",
    nickname: "昵称",
    fansCounts: 0,
    followCounts: 0,
    receiveLikeCounts: 0,
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})
  • mine.wxss
代码语言:javascript
复制
page {
    font-size: 14px;
}

.container {
    background-color: whitesmoke;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-row {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    margin-top: 10px;
}

.info-items {
    margin-left: 30px;
}

.face {
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    margin-top: 20px;
}

.nickname {
    margin-top: 5px;
    font-weight: bold;
    font-size: 18px;
}

.logout {
    margin-top: 3px;
    float: right;
}

.follow {
    margin-top: 3px;
}

.line {
    width: 100%;
    height: 1px;
    background-color: gainsboro;
    margin-top: 1px;
}

.container-video {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    text-align: center;
    border: solid 1px;
    line-height: 30px;
}

.video-info {
    width: 100%;
}

.video-info-selected {
    background-color: gainsboro;
}

.container-video-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.videoImage {
    width: 250rpx;
    height: 180px;
}

PS:下次针对页面的基本的功能增加一些后台的功能,

  1. 注销(注销的接口)
  2. 上传视频(比较大的功能)
  3. 上传头像 (用户的头像的更改)
  4. 用户的信息查询(用的粉丝数,点赞数,关注数)
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-12-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 编程坑太多 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 我的页面的功能
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档