微信小程序开发之根据判断用户是否登录状态来显示不同的内容

灰太狼 2022-01-28 07:01 923阅读 0赞

> ### 我的qq 2038373094 ###
> 
> 我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会
> 
> 做过律师在线咨询系统、共享农场手机app、在线心理咨询系统

### ***页面效果如下***  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

### *** 代码如下*** ###

***login.wxml***

<view>
      <view wx:if="{
       {login}}">
        <view class="ui-row" style="height:50px;">
          <view class="ui-col ui-col-align-center align-center valign-middle" style="flex:0 0 40px;">
            <view class="ui-col-content align-center valign-middle">
              <span type="comment" size="20" color="#545454" class="ui-icon icon-comment" style="color: #545454;font-size: 20px;"></span>
            </view>
          </view>
          <view class="text ui-col" style="">
            <view class="ui-col-content">
              用户名
            </view>
          </view>
        </view>
      </view>
      <view wx:else="" class="bg">
        <button type="warn" bindtap="submitHandler" size="mini" class="btn">还未登录</button>
      </view>
      <view class="info">
        <view class="ui-row-list ui-row-list-border-indent" style="">
          <view class="ui-row" style="height:50px;">
            <view class="ui-col ui-col-align-center align-center valign-middle" style="flex:0 0 40px;">
              <view class="ui-col-content align-center valign-middle">
                <span type="comment" size="20" color="#545454" class="ui-icon icon-comment" style="color: #545454;font-size: 20px;"></span>
              </view>
            </view>
            <view class="text ui-col" style="">
              <view class="ui-col-content">
                修改密码
              </view>
            </view>
            <view class="ui-col valign-middle" style="flex:0 0 25px;">
              <view class="ui-col-content valign-middle">
                <span type="arrow-right" class="ui-icon icon-arrow-right" style="font-size: 16px;"></span>
              </view>
            </view>
          </view>
          <view class="ui-row" style="height:50px;">
            <view class="ui-col ui-col-align-center align-center valign-middle" style="flex:0 0 40px;">
              <view class="ui-col-content align-center valign-middle">
                <span type="comment" size="20" color="#545454" class="ui-icon icon-comment" style="color: #545454;font-size: 20px;"></span>
              </view>
            </view>
            <view class="text ui-col" style="">
              <view class="ui-col-content">
                我的作业
              </view>
            </view>
            <view class="ui-col valign-middle" style="flex:0 0 25px;">
              <view class="ui-col-content valign-middle">
                <span type="arrow-right" class="ui-icon icon-arrow-right" style="font-size: 16px;"></span>
              </view>
            </view>
          </view>
        </view>
    
      </view>
    </view>

***login.wxss***

.bg {
      width: 100%;
      height: 450rpx;
      background-color: #e0acc5;
    }
    .btn {
      margin-left: 250rpx;
      margin-top: 194rpx;
    }
    .info {
      margin-top: 50rpx;
    }

***login.js***

'use strict';
    
    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    //引入文件
    exports.default = Page({
      data: {
        login: false
      },
      onLoad: function onLoad() {
        //判断一下存储的用户名
        var uname = wx.setStorageSync('uname');
        if (uname == null || uname == 'undefined') {
          this.login = false;
        } else {
          this.login = true;
        }
        //判断一下存储的用户名    
      }
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220128/58e42001d1274c8ea165fe7e548d7ba6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，923人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序获取用户信息并保存登录状态

一、登录态维护官方的文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html\wxlogino

小鱼儿/ 2023年07月18日 12:41/ 0 赞/ 28 阅读

相关前端开发-微信小程序用户授权登录

我的第一篇博客决定献给-微信小程序。今年一直在做小程序开发，从无到有，自己自学。从用户授权到微信支付。学习了很多，收获很多。年底项目就会上线，在空余

旧城等待，/ 2023年06月11日 06:21/ 0 赞/ 6 阅读

相关微信小程序判断文件是否为图片的方法，以及根据不同字段返回不同内容，时间进行转换

1.根据后台返回的不同字段显示不同内容： formatSX(item){ let title=""; switch(item){

墨蓝/ 2022年11月21日 01:05/ 0 赞/ 126 阅读

相关微信小程序根据返回值判断状态

json { "msg": "查询成功", "total": 25, "code": 1, "rows": [{

末蓝、/ 2022年10月12日 01:26/ 0 赞/ 40 阅读

相关微信小程序根据返回值判断状态

json { "msg": "查询成功", "total": 25, "code": 1, "rows

旧城等待，/ 2022年10月10日 09:44/ 0 赞/ 137 阅读

相关微信小程序显示html内容

一、概述小程序默认是不支持html格式的内容显示的，网络上的文章提到：wxParse-微信小程序富文本解析组件，链接如下： [https://github.com/i

╰+哭是因爲堅強的太久メ/ 2022年10月05日 08:00/ 0 赞/ 200 阅读

相关微信小程序用户登录凭证根据登录凭证获取用户登录状态信息

微信登录接口：wx.login(Object object) ；微信登录获取临时凭证code参数后台根据code参数调用后返回前端包括用户的唯一标识（openid）及本

ゝ一纸荒年。/ 2022年02月21日 02:09/ 0 赞/ 331 阅读

相关微信小程序开发之根据判断用户是否登录状态来显示不同的内容

> 我的qq 2038373094 > > 我做的是微信小程序、网站、手机app，后端java+前端vue、bootstrap框架、原生的html+css+js都会 >

灰太狼/ 2022年01月28日 07:01/ 0 赞/ 924 阅读

相关微信小程序开发用户授权登录

用wx.login获取登录凭证code  <view hidden='{ {boolea

水深无声/ 2021年09月16日 22:32/ 0 赞/ 627 阅读

相关微信小程序根据状态换图

在index.wxml中添加图片 <image bindtap="click" src="{ {show?'/images/.png':'/image

不念不忘少年蓝@/ 2021年07月24日 17:44/ 0 赞/ 351 阅读