小程序用户和登录页面展示

suncolor 2023-03-28 原文

用户页面wxml

<!--pages/home/home.wxml-->
<view class="container">
  <view class="top-view">
    <view class="user">
      <view class="row">
        <image class="avatar" wx:if="{{userInfo}}" src="{{userInfo.avatarUrl}}"></image>
        <image class="avatar" wx:else="{{userInfo}}" src="/static/2.png"></image>
        <!-- 点击跳转到登录注册页面 -->
        <view class="name" wx:if="{{userInfo}}">
          <view bindtap="onClickLogout">
            {{userInfo.nickName}}
          </view>
        </view>
        <view class="name" wx:else="{{userInfo}}">
          <navigator url="/pages/auth/auth">登录</navigator>
          |
          <navigator url="/pages/auth/auth">注册 </navigator>
        </view>

      </view>
      <view class="site">查看个人主页</view>
    </view>

    <view class="numbers">
      <view class="row">
        <text>0</text>
        <text>关注</text>
      </view>
      <view class="row">
        <text>0</text>
        <text>粉丝</text>
      </view>
      <view class="row">
        <text>0</text>
        <text>赞与收藏</text>
      </view>
      <view class="row">
        <text>0</text>
        <text>好友动态</text>
      </view>
    </view>

  </view>

  <view class="middle-view">
    <view class="item">
      <image src="/static/images/icon/transaction_order1_icon_show.png"></image>
      <text>待支付</text>
    </view>
    <view class="item">
      <image src="/static/images/icon/transaction_order2_icon_show.png"></image>
      <text>待支付</text>
    </view>
    <view class="item">
      <image src="/static/images/icon/transaction_order3_icon_show.png"></image>
      <text>待支付</text>
    </view>
    <view class="item">
      <image src="/static/images/icon/transaction_order4_icon_show.png"></image>
      <text>待支付</text>
    </view>
    <view class="item">
      <image src="/static/images/icon/transaction_order5_icon_show.png"></image>
      <text>待支付</text>
    </view>
  </view>
  <view class="function-view">
    <view class="row">
      <view class="left">我的钱包</view>
      <view class="right">
        <text>¥20</text>
        <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>
      </view>
    </view>
    <view class="row">
      <view class="left">我的优惠券</view>
      <view class="right">
        <text>暂无课用</text>
        <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>
      </view>
    </view>
    <view class="row">
      <view class="left">领劵中心</view>
      <view class="right">
        <text>你的福利都在这里</text>
        <image class="go-icon" src='/static/images/icon/to_icon_show_small.png'></image>
      </view>
    </view>
  </view>
  <view class="contact-view">
    <button open-type="contact">
      <image src="/static/images/icon/wechat_contact_icon_show.png"></image>
    </button>
    <button bindtap="onClickCall">
      <image src="/static/images/icon/phone_contact_icon_show.png"></image>
    </button>
  </view>
</view>

用户页面js

// pages/home/home.js

var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: null,
  },

  /**
   * 生命周期函数--监听页面加载(第一次打开时会执行)
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成（第一次打开时会执行）
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //本地storage中获取值
    // var phone = wx.getStorageSync('phone')
    // this.setData({
    //   phone:phone
    // })
    //从全局变量中获取值
    this.setData({
      // phone:app.globalData.phone
      userInfo: app.globalData.userInfo
    }) 
  },
   /**
   * 用户注销
   */
  onClickLogout:function(){
    app.delUserInfo();
    this.setData({
      userInfo: null
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

用户页面css

/* pages/home/home.wxss */

.top-view{
  background-color: #01ccb6;

  color: white;
  padding: 40rpx;
}

.top-view .user{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.top-view .user .row{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.top-view .user .avatar{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}

.top-view .user .name{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 200rpx;
}

.top-view .site{
  background-color: rgba(0, 0, 0, 0.16);
  padding: 20rpx;
  border-top-left-radius: 32rpx;
  border-bottom-left-radius: 32rpx;
}

.top-view .numbers{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 28rpx;
  padding: 40rpx;
  padding-bottom: 0rpx;
}

.top-view .numbers .row{
   display: flex;
  flex-direction: column;
  align-items: center;
}


.middle-view{
  padding: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 25rpx;
  border-bottom: 18rpx solid #f5f5f5;
}

.middle-view .item{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.middle-view .item image{
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 20rpx;
}

.function-view{
  padding: 40rpx;
  font-size: 28rpx;
}

.function-view .row{
  padding: 30rpx 0;
  border-bottom: 1px solid #efefef;
  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.function-view .row .right{
  color: #8c8c8c;
}
.function-view .row .go-icon{
  margin: 0 20rpx;
  width: 16rpx;
  height: 16rpx;
}


.contact-view{
  padding: 40rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.contact-view button {
  background-color: transparent;
  border: 0;
  padding: 0;
}
.contact-view button::after{
  border: 0;
}
.contact-view  image{
  width: 204rpx;
  height: 66rpx;
}

登录注册页wxml

<!--pages/auth/auth.wxml-->

<view class="logo">
  <image src='/static/2.png'></image>
  <text>交流交易社区</text>
</view>

<view class="form">
  <view class="row-group">
    <text>手机</text>
    <!-- value属性是后端对于前端的绑定，bindinput的前端变化时后端数据也会相应变化 -->
    <input placeholder="请填写手机号码" placeholder-class='txt' maxlength='11' value="{{phone}}" bindinput="bindPhoneInput" />
  </view>
   <view class="row-group">
    <text>验证码</text>
    <input placeholder="请填写验证码" placeholder-class='txt' maxlength='4' value="{{code}}" bindinput="bindCodeInput" />
    <view class="code" bindtap="onClickCheckCode">获取验证码</view>
  </view>

  <view>
    <button class="submit"  open-type="getUserInfo" bindgetuserinfo="onClickSubmit">登录 | 注册</button>
  </view>
</view>

登录注册页js

// pages/auth/auth.js
var app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    phone: "15822539779",
    code: "",
  },
  bindPhoneInput: function (e) {
    this.setData({
      phone: e.detail.value
    });
  },
  bindCodeInput: function (e) {
    this.setData({
      code: e.detail.value
    });
  },

  /** 
   * 点击获取短信验证码
   */
  onClickCheckCode: function (e) {
    // 判断手机号格式是否正确
    if (this.data.phone.length == 0) {
      wx.showToast({
        title: '请填写手机号码',
        icon: 'none'
      })
      return
    }
    var reg = /^(1[3|4|5|6|7|8|9])\d{9}$/;
    if (!reg.test(this.data.phone)) {
      wx.showToast({
        title: '手机格式错误',
        icon: 'none'
      })
      return
    }
    // 发送短信验证码，登录成功之后获取jwt和微信用户信息，保存到globalData和本地存储中。
    wx.request({
      url: "http://127.0.0.1:8000/api/message/",
      data: {
        phone: this.data.phone
      },
      method: 'GET',
      dataType: 'json',
      success: function (res) {
        // 根据后端发送的status判断是否发送成功
        if (res.data.status) {
          // 提示验证码倒计时或者提示发送成功
          wx.showToast({
            title: res.data.message,
            icon: 'none'
          });
        } else {
          // 短信发送失败
          wx.showToast({
            title: res.data.message,
            icon: 'none'
          });
        }
      }
    })
  },
  onClickSubmit(e) {
    console.log(e)
    wx.request({
      url: "http://127.0.0.1:8000/api/login/",
      data: {
        phone: this.data.phone,
        code: this.data.code
      },
      method: 'POST',
      dataType: 'json',
      success: function (res) {
        // 根据status状态判断是否成功
        if (res.data.status) {
          // 1.可以将手机号放到公共的位置，比如app.js里，方便别的页面进行获取
          // app.globalData.phone = res.data.data.phone
          // 2.上述方法是将值存在变量里的，一重启就没有了，我们也可以将值保存在cookie中
          // wx.setStorageSync('phone', res.data.data.phone)
          // 3.将上述两种存储优化一下，在全局的app中定义一个initUserInfo方法，将用户初始化的信息（电话和token）传入该函数，然后上面1和2两部就可以放到该函数内执行了
          // 4.优化，我们还可以将wx的用户信息也初始化到initUserInfo函数内
          app.initUserInfo(res.data.data, e.detail.userInfo)


          // 登录成功之后，自动跳转到上一级页面
          //getCurrentPages方法是记录程序的页面，包括上一页信息，下一页信息等，pages是一个列表，最后一个是元素是当前页面，前一个元素是上一页
          // var pages = getCurrentPages()
          // console.log(pages)
          // 得到上一页
          // prepage  = pages[pages.length-2]
          // 使用该方法就可以之前跳转到登录之前的上一页
          wx.navigateBack({})
        } else {
          wx.showToast({
            title: "登录失败",
            icon: 'none'
          });
        }
      }
    })
  },
  /** 
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

登录注册页css

/* pages/auth/auth.wxss */


.logo{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo image {
  margin-top: 140rpx;
  width: 216rpx;
  height: 100rpx;
}

.logo text {
  margin-top: 26rpx;
  margin-bottom: 50rpx;
  font-size: 24rpx;
  line-height: 24rpx;
  font-weight: 400;
  color: #8c8c8c;
  text-align: center;
}

.form{
  padding: 40rpx;
}

.form .row-group{
  padding: 20rpx 0;
  border-bottom: 1rpx solid #ddd;
  position: relative;
}

.form .row-group text{
  font-size: 28rpx;
  padding:10rpx 0;
}

.form .row-group input{
  padding: 10rpx 0;
}

.form .row-group .txt{
  color: #ccc;
}

.form .row-group .code{
  position: absolute;
  right: 0;
  bottom: 26rpx;
  z-index: 2;

  width: 206rpx;
  height: 60rpx;
  border: 2rpx solid #00c8b6;
  border-radius: 12rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #00c8b6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form .submit{
  margin-top: 80rpx;
  color: #fff;
  border: 2rpx solid #00c8b6;
  background-color: #00c8b6;
  font-size: 32rpx;
  font-weight: bold;
}

小程序小程 view gt lt Python

有关小程序用户和登录页面展示的更多相关文章

ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2
我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0
ruby - 如何指定 Rack 处理程序 - 2
Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack
ruby - 在 Ruby 中编写命令行实用程序 - 2
我想用ruby编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序
ruby-on-rails - Rails 应用程序之间的通信 - 2
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
ruby - 无法运行 Rails 2.x 应用程序 - 2
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2
我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。最佳答案如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2
我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。
ruby - RVM "ERROR: Unable to checkout branch ."单用户 - 2
我在新的Debian6VirtualBoxVM上安装RVM时遇到问题。我已经安装了所有需要的包并使用下载了安装脚本(curl-shttps://rvm.beginrescueend.com/install/rvm)>rvm，但以单个用户身份运行时bashrvm我收到以下错误消息:ERROR:Unabletocheckoutbranch.安装在这里停止，并且(据我所知)没有安装RVM的任何文件。如果我以root身份运行脚本(对于多用户安装)，我会收到另一条消息:Successfullycheckedoutbranch''安装程序继续并指示成功，但未添加.rvm目录，甚至在修改我的.bas

小程序用户和登录页面展示

用户页面wxml

用户页面js

用户页面css

登录注册页wxml

登录注册页js

登录注册页css

有关小程序用户和登录页面展示的更多相关文章

随机推荐