条件渲染

kn.wxml

  <view class="userinfo">
  <!--1、使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息 //获取数据  -->
  <!-- /2、使用 open-data 展示用户基本信息。 -->
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>

Page.js

Page({
  data: {
    text: 'Click me get my posts!',
    motto: helloData,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')//使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息
  }
  })