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

灰太狼 2022-01-28 07:01 895阅读 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 条评论，895人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关微信小程序---强制用户授权登录

wxml页面：  <view class="login" wx:if="{ {!hasUserInfo &&

小鱼儿/ 2022年03月20日 10:59/ 0 赞/ 789 阅读

相关微信小程序判断用户设备信息

微信接口：wx.getSystemInfo wx.getSystemInfo({ success: function (res) {

待我称王封你为后i/ 2022年02月21日 02:31/ 0 赞/ 352 阅读

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

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

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

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

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

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

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

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

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

相关微信小程序登录获取用户openid

//app.js App({ onLaunch: function () { // 展示本地存储能力 var log

柔情只为你懂/ 2021年07月25日 02:22/ 0 赞/ 576 阅读

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

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

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