【微信小程序】仿Instagram个人界面

 1. home.wxml

<view wx:if="{{flag==0}}">
<view style="color: white" style="text-align: center">
  <image src="/image/flow.png" style="width: 300rpx; height: 90rpx; margin-top: 340rpx"></image>
</view>
<view>
<input type="text" placeholder="输入手机号" bindinput="usernameInput" style="color: white; border-radius: 8rpx; margin: 50rpx 80rpx; background-color: #262626; height: 90rpx; padding-left: 20rpx">
</input>
<input type="password" placeholder="输入密码" bindinput="passwordInput" style="color: white; border-radius: 8rpx; margin: 50rpx 80rpx; background-color: #262626; height: 90rpx; padding-left: 20rpx"></input>
<button style="width: 588rpx" bindtap="signIn">登录</button>
<view style="color: white; text-align: center; margin-top: 300rpx; padding: 30rpx;border-top: 1px solid #262626; font-size: 26rpx">
没有账户？<span style="color: #DAF7A6" bindtap="login">立即注册/重置密码。</span>
</view>
</view>
</view>

<view wx:if="{{loading != 5 && loading!=6}}" style="text-align:center; margin-top: 450rpx">
<image src="/image/flow.gif" style="width: 100px; height: 100px;"></image>
</view>
<view wx:if="{{flag==1 && loading==6}}" style="margin:80rpx 40rpx">
<view style="display: flex; align-items:center; justify-content: space-between">
<view style="color: white; margin-bottom:50rpx; font-size: 40rpx; font-weight: 550; margin-left:10rpx">
{{userinfo.name}}
</view>
<view style="color: white; margin-bottom:0rpx; font-size: 40rpx; font-weight: 550; margin-left:10rpx"><image src="/image/home_more.png" style="width: 50rpx; height:50rpx;" bindtap="clickme"></image></view>
</view>
<view style="display: flex; color: white; align-items: center; justify-content: space-between">
<image src="{{userinfo.avatar}}" style="border-radius: 50%; width: 150rpx; height: 150rpx"></image>
<view style="display: flex; flex-direction: column; align-items: center">
<view>1</view>
<view>帖子</view>
</view>
<view style="display: flex; flex-direction: column; align-items: center">
<view>1</view>
<view>粉丝</view>
</view>
<view style="display: flex; flex-direction: column; align-items: center; margin-right: 50rpx">
<view>1</view>
<view>关注</view>
</view>
</view>
<view style="color: white; margin-top: 30rpx; margin-bottom: 20rpx">{{userinfo.signature}}</view>
<button style="width: 100%; height: 60rpx; font-size: 30rpx; line-height: 30rpx; color: #FAFAFA; background-color: #262626; font-weight: 550">编辑主页</button>

<view style="border-bottom: 1px solid #1E1E1E; padding-bottom: 20rpx">
<image src="/image/grid.png" style="width: 40rpx; height: 40rpx; margin-top: 60rpx"></image> 
</view>
<view wx:for="{{grid}}" wx:key="index" style="float: left; margin-top: 30rpx;">
<image wx:if="{{item.mediaList.length > 1 && item.mediaList[0].thumb != ''}}" src="{{item.mediaList[0].thumb}}" style="width: 200rpx; height:200rpx; margin-right: 23rpx; position: relative;" mode="aspectFill" bindtap="flow" data-id="{{item.id}}">
  <image src="/image/list.png" style="width: 50rpx; height: 50rpx;   position: absolute; right: 10rpx; top: 10rpx; width: 30rpx; height: 30rpx;"></image>
</image>
<image wx:elif="{{item.mediaList.length > 1 && item.mediaList[0].thumb == ''}}" src="{{item.mediaList[0].url}}" style="width: 200rpx; height:200rpx; margin-right: 23rpx; position: relative;" mode="aspectFill" bindtap="flow" data-id="{{item.id}}">
  <image src="/image/list.png" style="width: 50rpx; height: 50rpx;   position: absolute; right: 10rpx; top: 10rpx; width: 30rpx; height: 30rpx;"></image>
</image>
<image wx:elif="{{item.mediaList[0].thumb != ''}}" src="{{item.mediaList[0].thumb}}" style="width: 200rpx; height:200rpx; margin-right: 23rpx; position: relative;" mode="aspectFill" bindtap="flow" data-id="{{item.id}}">
  <image src="/image/video.png" style="width: 50rpx; height: 50rpx;   position: absolute; right: 10rpx; top: 10rpx; width: 40rpx; height: 40rpx;"></image>
</image>
<image wx:else src="{{item.mediaList[0].url}}" style="width: 200rpx; height:200rpx; margin-right: 23rpx; position: relative;" mode="aspectFill" bindtap="flow" data-id="{{item.id}}">
  <image src="/image/picture.png" style="width: 50rpx; height: 50rpx;   position: absolute; right: 10rpx; top: 10rpx; width: 40rpx; height: 40rpx;"></image>
</image>
</view>
</view>


<l-toast
  show="{{loading_show}}"
  icon="{{loading_icon}}"
  title="{{loading_title}}"
  placement="right"
  duration="1500"
  icon-size="40"
/>

<!--屏幕背景变暗的背景  -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<!--弹出框  -->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}" style="color: white">
<view style="display: flex; align-items: center; margin-left: 30rpx">
<image src="/image/collect-s.png" style="width: 50rpx; height: 50rpx"></image>
<view style="margin-left: 10rpx; font-size: 35rpx; font-weight: 550">收藏夹</view>
</view>
</view>

2. home.js

const rsa = require('../../utils/rsa.js')
const domain = require('../../utils/domain.js').domain
Page({

  data: {
    flag: 0,
    loading_title: '',
    loading_icon: '',
    loading_show: false,
    username: '',
    password: '',
    userinfo: '',
    loading: 2,
    grid: ''
  },
  login(){
    wx.navigateTo({
      url: '../login/login',
    })
  },
  usernameInput(e){
    this.setData({
      username: e.detail.value
    })
  },
  passwordInput(e){
    this.setData({
      password: e.detail.value
    })
  },
  signIn(){
    if(this.data.username == ''){
      wx.showModal({
        title: '手机号不能为空！',
        showCancel: false,
      })
      return;
    }else if(!(/^[1][0-9]{10}$/.test(this.data.username))){
      wx.showModal({
        title: '手机号格式不正确！',
        showCancel: false,
      })
      return;
    }else if(this.data.password == ''){
      wx.showModal({
        title: '密码不能为空！',
        showCancel: false,
      })
      return;
    }
    this.setData({
      loading_icon: 'loading',
      loading_show: true,
      loading_title: '请等待...'
    })
    const rawPassword = rsa.rsaEncrypt(this.data.password)
    console.log(rawPassword)
    var that = this
    wx.request({
      method: 'POST',
      url: domain + '/auth/signIn',
      data: {
        username: that.data.username,
        password: rawPassword
      },
      success(res){
        console.log(res)
        that.setData({
          loading_icon: '',
          loading_title: res.data.msg,
          loading_show: true
        })
        if(res.data.code == "200"){
          wx.setStorageSync('token', res.data.data.token)
          setTimeout(function() {
            that.onShow(
              that.setData({
                flag: 1
              })
            )
          }, 1500)
        }
      }
    })
  },

  onShow(){
    var that = this
    if(wx.getStorageSync('token')!='' && this.data.userinfo == ''){
      this.setData({
        flag: 1,
        loading: true
      })
      wx.request({
        header: {
          "alexmisko-user": wx.getStorageSync('token')
        },
        url: domain + '/video/home/user',
        data: {
          page: 1,
          num: 6
        },
        success(res){
          console.log(res)
          that.setData({
            loading: that.data.loading + 4,
            grid: res.data.data.records
          })
        }
      })
      wx.request({
        method: "GET",
        url: domain + '/userInfo/user',
        header: {
          "alexmisko-user": wx.getStorageSync('token')
        },
        success(res){
          console.log(res)
          that.setData({
            userinfo: res.data.data,
            loading: that.data.loading + 1
          })
          wx.setStorageSync('userinfo', res.data.data)
        }
      })
    }
  },

  //点击我显示底部弹出框
clickme:function(){
  console.log("点击")
  this.showModal();
},

//显示对话框
 showModal: function () {
   // 显示遮罩层
   var animation = wx.createAnimation({
     duration: 200,
     timingFunction: "linear",
     delay: 0
   })
   this.animation = animation
   animation.translateY(300).step()
   this.setData({
     animationData: animation.export(),
     showModalStatus: true
   })
   setTimeout(function () {
     animation.translateY(0).step()
     this.setData({
       animationData: animation.export()
     })
   }.bind(this), 200)
 },
 //隐藏对话框
 hideModal: function () {
   // 隐藏遮罩层
   var animation = wx.createAnimation({
     duration: 200,
     timingFunction: "linear",
     delay: 0
   })
   this.animation = animation
   animation.translateY(300).step()
   this.setData({
     animationData: animation.export(),
   })
   setTimeout(function () {
     animation.translateY(0).step()
     this.setData({
       animationData: animation.export(),
       showModalStatus: false
     })
   }.bind(this), 200)
 },
  
  flow(e){
    wx.navigateTo({
      url: '../detail/detail?id=' + e.target.dataset.id,
    })
  }
})

3. home.wxss

.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
/*对话框 */
.commodity_attr_box {
  border-radius: 25rpx 25rpx 0 0;
  height: 300rpx;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #262626;
  padding-top: 20rpx;
}

4. home.json

{
  "navigationStyle": "custom",
  "usingComponents": {
    "l-toast": "/miniprogram_npm/lin-ui/toast/index",
    "l-arc-pop": "/miniprogram_npm/lin-ui/arc-popup/index"
  }
}