微信小程序——常用功能1：使用wx:if逻辑，根据data视图层在相同页面显示不同数据

微信小程序——常用功能1：使用wx:if逻辑，根据data视图层在相同页面显示不同数据

本节我们的主角是wx:if逻辑。

老规矩，先上完整代码，大家先看看怎么回事，搞不明白的话看下边讲解

大家也可以直接在微信开发者工具新建页面，复制代码更直观查看

如何新建小程序页面？微信小程序云开发——常用功能1：使用云函数获取用户openid，并使用1.setData加载到视图层 和2.setStorage缓存到本地

<view wx:if="{{!loginOK}}" style="width:350px;text-align: center;">
  <image class="touxiang" src="{{touxiang}}"></image>
  <view class="yonghuming">{{yonghuming}}</view>
  <view class="suozaidi">{{suozaidi}}</view>
  <button type="primary" bindtap="login">用户授权</button>
</view>
<view wx:else>
  欢迎来到我的小程序：）
</view>

.touxiang{
  width: 100px;
  height: 100px;
  border-radius: 500px;
  background: red;
  
  margin-top: 140px;
}
.yonghuming{
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.suozaidi{
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 60px;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    yonghuming: '用户名',
    touxiang: '',
    suozaidi: '微信显示所在地区',
    loginOK: false,
  },

  login(){
    this.setData({
      loginOK:true
    })
  }
})

讲解：

首先，基本模型搭建出来，直接加入wx:if = “{{ ! loginOK}}”，“！”为非，也就是 ! loginOK = false。
wxml:

<view wx:if="{{!loginOK}}" style="width:350px;text-align: center;">
  <image class="touxiang" src="{{touxiang}}"></image>
  <view class="yonghuming">{{yonghuming}}</view>
  <view class="suozaidi">{{suozaidi}}</view>
  <button type="primary" bindtap="login">用户授权</button>
</view>
<view wx:else>
  欢迎来到我的小程序：）
</view>

css:

.touxiang{
  width: 100px;
  height: 100px;
  border-radius: 500px;
  background: red;
  
  margin-top: 140px;
}
.yonghuming{
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.suozaidi{
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 60px;
}

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    yonghuming: '用户名',
    touxiang: '',
    suozaidi: '微信显示所在地区',
    loginOK: false,
  },
  
})

呈现效果可看出，我们本次讲解的操作背景是小程序的用户登录。当loginOK值为false，我们认为当前是未登录状态；当loginOK值为true时，我们认为当前是已登录状态。

这时，当我们点击用户授权按钮时，需要将loginOK 的值由 false 变成 true 。

如何使用setdata操作data视图层：查看往期文章微信小程序云开发——常用功能1：使用云函数获取用户openid，并使用1.setData加载到视图层
和2.setStorage缓存到本地

加入js代码，点击button按钮时调用login函数：

login(){
    this.setData({
      loginOK:true
    })
  }

此时完整js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    yonghuming: '用户名',
    touxiang: '',
    suozaidi: '微信显示所在地区',
    loginOK: false,
  },

  login(){
    this.setData({
      loginOK:true
    })
  }
})

点击button，调试器中AppData和窗口页面同时发生变化

我不是专业程序工作者，在这里是把我的小程序设计经验分享给大家。
如果其中有用词不当的地方，请大家留言指正，我们共同学习。
更多设计、功能的学习经验，大家也可以去我的公众号查看！
————