草庐IT

微信小程序实现 登录 退出功能 以及简单的我的页面附上源代码拷贝直接用

Beblien 2023-04-15 原文

1:首先声明:对于小白可能还是有点用 我也是入门不久,欢迎指出问题。

2:先上效果图:

3:index(我的)页面wxml:

<!-- 用户信息:头像,呢称 /登录 -->

  <view class="xx">

    <view><image src="{{avatarUrl}}" class="tx"></image></view>

    <view class="mz" >{{name}}</view>

    <view bindtap="getUserProfile" class="underline">登录</view>  

  </view>   

<!-- 分割线 -->

  <view class="hr"></view>

<!-- 循环数组 mySet  -->

<view wx:for="{{mySet}}" bindtap="onMySet" data-type="{{item.name}}"> 

<!-- 图标和循环myset中的文字  -->

  <view class="vv_1">

    <image class="image1" src="{{item.img}}"/>

      {{item.name}}

    <view class="icon">></view> 

  </view>  

</view>

<!-- 分割线 --> 

<view class="hr2"></view>

4:index(我的)页面js:

Page({

  /**

   * 页面的初始数据

   */

  data: {

    avatarUrl:"",

    name: "",

    m:"0",

    mySet:[

       {

         'name':"我的预约",

         'img':"../images/预约.png"

       },

       {

       'name':"我的收藏",

        'img':"../images/收藏.png"

      },

      {

       'name':"个人设置",

        'img':"../images/设置.png"

      },

    ]

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    

  },

    /**

   * 用户信息获取权限

   */

  getUserProfile: function () {

    if(this.data.m==0){

   

    wx.getUserProfile({

      desc: '信息仅作为个人展示',

      success: (res) => {

        console.log('获取成功', res)

        wx.setStorage({

          data: res.userInfo,

          key: 'userInfo',

        });

        this.setData({

          m:1

        })

        this.onShow();

      }})

    

    }else{

      wx.showToast({

        title: '您已登录啦',

      })

    }     

    },

    /**

   * 点击我的预约等板块后进行页面跳转

   */

  onMySet:function(e){

  if(e.currentTarget.dataset.type=="个人设置"){

    wx.navigateTo({

      url: '/pages/index/setting/setting',

    })

  }

  else if(e.currentTarget.dataset.type=="我的预约"){

    wx.navigateTo({

      url: '/pages/index/want/want',

    })

  }

  else (e.currentTarget.dataset.type=="我的收藏")

  {

    wx.navigateTo({

      url: '/pages/index/like/like',

    })

  }

},

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

    var useInfo = wx.getStorageSync('userInfo')

    var that = this;

    that.setData({

    avatarUrl:useInfo.avatarUrl,

    name:useInfo.nickName,

  })

 }

})

5: index(我的)页面wxss:

/* pages/index/index.wxss */

.mz{

  font-size:50rpx;

  line-height: 200rpx;

  margin-left: 20rpx;

  color: #FFFFFF;

}

.hr{

  height:16rpx;

  background-color:rgb(202, 202, 202);

}

.vv_1{

  line-height: 100rpx;

  background-color: #ffffff;

  display: flex;



}





.vv{

  background-color: #ebebeb;

  height: 950rpx;

}

.xx{

  

  display: flex;  

  flex-direction:row;

  background-color:#32667e;

  line-height: 400rpx;

}

.tx{

  width: 150rpx;

  height: 150rpx;

  border-radius: 40%;

  margin-left:50rpx ;

}

.underline{

  text-decoration:underline;

  font-size: 30rpx;

  color: white;

  text-align: center;

  line-height: 200rpx;

}

.hr2{

  height: 2rpx;

  background-color: rgba(202, 202, 202, 0.856);

}

.icon{

  margin-left:470rpx;

  color: rgba(202, 202, 202) ;

  

}

.image1{

  padding-top:26rpx;

  padding-right:20rpx;

  padding-left: 30rpx;

  width: 50rpx;

  height: 50rpx;

}

6:到这一步就已经可以实现登录功能了 退出功能我放到了设置里 

以下把设置页面代码放出 其他几个页面里都是没有东西的跳转 大家可以看情况增加。

7:设置setting页面wxml:

<view class="info">

  <view class="info_more1"><view class="tx1">头像</view>

  <view><image src="{{tx}}" class="tx"/></view>

  </view>

<view class="hr"></view>



<view class="info_more">昵称

  <view class="icon">{{name}}</view>

  </view>

<view class="hr"></view>



<view class="info_more" >手机号

  <view class="icon">198****5052</view>

  </view>

<view class="hr"></view>

<view class="info_more">生日

  <view class="icon"><picker class="picker" mode="date" value="{{date}}"end="{{endDate}}" bindchange="bindDateChange">

  <view class="picker-date ">

    {{currentDate}}

  </view>

</picker></view>

  </view>

<view class="hr"></view>



<view class="info_more" bindtap="chooseAddress">收货地址

  <view class="icon">>></view>

  </view>

<view class="hr"></view>



<view class="info_more" bindtap="version">当前版本

  <view class="icon">v1.0</view>

  </view>

<view class="hr"></view>



<view class="info_more" bindtap="about">关于

  <view class="icon">>></view>

  </view>

<view class="hr"></view>



<view class="info_more" bindtap="houtai">后台登录入口

  <view class="icon">>></view>

  </view>

<view class="hr"></view>

</view>

<button bindtap="logout">退出登录</button>

8:设置setting页面js:

// pages/index/setting/setting.js

const util = require('../../../utils/util.js')

Page({



  /**

   * 页面的初始数据

   */

  data: {

    info:["头像","名称","收货地址","当前版本","关于"],

    tx:"",

    name:"",

    currentDate:util.formatTime(new Date(), '-', false),

    phone:""




  },

  bindDateChange: function (e) {

    console.log(e.detail.value)

    this.setData({

      currentDate:e.detail.value

    }) },

      chooseAddress() {

        wx.chooseAddress({

          success (res) {

            console.log(res.userName)

          }

        })

    },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    var useInfo = wx.getStorageSync('userInfo')

    var that = this;

    that.setData({

    tx:useInfo.avatarUrl,

    name:useInfo.nickName,})



  },

  about(){

    wx.navigateTo({

      url: '/pages/index/setting/about/about',

    })

  },

  houtai(){

    wx.navigateTo({

      url: '',

    })



  },

  version(){

    wx.showToast({

      title: '当前已是最新版本~',

    })



  },

  logout:function() {

    wx.removeStorage({

      key: 'userInfo',

      success (res) {

        wx.showModal({

          title: '提示',

          content: '真的要退出了吗',

          cancelText:'我骗你的',

          confirmText:'是的没错',

          confirmColor:'#000000',

          cancelColor:'#576b95',

          success (res) {

            if (res.confirm) {

              wx.reLaunch({

                url: '/pages/index/index',

              })

            } else if (res.cancel) {

              console.log('用户点击取消')

            }

          }

        })

        

      }

    })



  }



})

9:设置setting页面wxss:

button{

    background-color:rgb(255, 26, 26);

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none; 

    display:block;

    margin:60rpx auto;

    font-size: 16px;

}

.hr{

    height: 1rpx;

    background-color: rgb(202, 202, 202);

}

.info{

    display: flex;

    flex-direction: column;

    font-size: 30rpx;

    margin-left: 30rpx;

    margin-top: 10rpx; 

}

.info_more1{

    display:flex;

    justify-content: space-between;

    padding-bottom: 20rpx;

    padding-top: 20rpx;

}

.info_more{

    display:flex;

    justify-content: space-between;

    padding-bottom: 30rpx;

    padding-top: 30rpx;

}

.tx{

    width: 100rpx;

    height: 100rpx;

    border-radius: 50%;

    margin-right: 10rpx;

}

.icon{

    padding-right: 30rpx;

    color: rgb(167, 164, 164);

}



.tx1{

    padding-top: 30rpx;

}

10:到这里功能基本实现,需要注意的是,记得在app.json里将tarbar加入,还有其他的图片大家自己替换即可。

app.json添加:

"list": [
      {
        "pagePath": "pages/aa/aa",
        "text": "aa"
      },
      {
        "pagePath": "pages/index/index",
        "text": "我的",
        "iconPath": "./pages/images/me.png",
        "selectedIconPath": "./pages/images/me_select.png"
      }
    ]

有关微信小程序实现 登录 退出功能 以及简单的我的页面附上源代码拷贝直接用的更多相关文章

  1. ruby - 如何在 buildr 项目中使用 Ruby 代码? - 2

    如何在buildr项目中使用Ruby?我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序,我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/),但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻,因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  2. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们? - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  3. ruby-on-rails - Rails 源代码 : initialize hash in a weird way? - 2

    在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中,它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has

  4. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  5. ruby-on-rails - 浏览 Ruby 源代码 - 2

    我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码,但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如,我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码?我知道在pry中我可以执行类似show-methodmethod的操作,但我如何才能对Rails框架中的方法执行此操作?您对我如何更好地理解Gem及其API有什么建议吗?仅仅阅读源代码似乎真的很难,尤其是对于框架。谢谢! 最佳答案 Ru

  6. ruby - 模块嵌套代码风格偏好 - 2

    我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个,因为它显然有一个缺点?我有一种直觉,它可能与性能有关,因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是,据我所知,没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别,可能也是最著名的,是你的

  7. ruby - 寻找通过阅读代码确定编程语言的ruby gem? - 2

    几个月前,我读了一篇关于ruby​​gem的博客文章,它可以通过阅读代码本身来确定编程语言。对于我的生活,我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗? 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem?,我们在StackOverflow上找到一个类似的问题:

  8. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能? - 2

    只是想确保我理解了事情。据我目前收集到的信息,Cucumber只是一个“包装器”,或者是一种通过将事物分类为功能和步骤来组织测试的好方法,其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗? 最佳答案 有点。它是一种组织测试的方式,但不仅如此。它的行为就像最初的Rails集成测试一样,但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意,您可以使用步骤来构建对象和设置状态,但通常您

  9. ruby - Net::HTTP 获取源代码和状态 - 2

    我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态,而无需发出第二个请求。有没有办法用另一种方法做到这一点?我一直在查看文档,但似乎找不到我要找的东西。 最佳答案 在我看来,除非您需要一些真正的低级访问或控制,否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur

  10. 程序员如何提高代码能力? - 2

    前言作为一名程序员,自己的本质工作就是做程序开发,那么程序开发的时候最直接的体现就是代码,检验一个程序员技术水平的一个核心环节就是开发时候的代码能力。众所周知,程序开发的水平提升是一个循序渐进的过程,每一位程序员都是从“菜鸟”变成“大神”的,所以程序员在程序开发过程中的代码能力也是根据平时开发中的业务实践来积累和提升的。提高代码能力核心要素程序员要想提高自身代码能力,尤其是新晋程序员的代码能力有很大的提升空间的时候,需要针对性的去提高自己的代码能力。提高代码能力其实有几个比较关键的点,只要把握住这些方面,就能很好的、快速的提高自己的一部分代码能力。1、多去阅读开源项目,如有机会可以亲自参与开源

随机推荐