标签的认识
第一个：
open-data：是一个能自动获取微信开发数据的标签（微信号 微信头像都是开放数据）
官方解析
如下
<open-data type="userAvatarUrl"></open-data>上面代码相当于 可以直接显示 用户的头像
第二个：
block：相当于view或者HTML里面的div 主要作用是为了在wxml中写 if… else if… else… 语句（当然其他标签也可以写if语句只不过常用block） 如下图
上图中页面
当index1，index2，index3哪一个为true就执行其里面的wxml代码 所以只会显示其中的一个block
因为三个标签用if… else if… else… 语句连接在一起同样下面的两个button一样道理
当canIUseGetUserProfile为true的时候只显示第一个button
接口的认识
第一个：
wx.canIUse：返回该属性等 在目前的开发工具版本中 是否支持
官方解析
如下图
第一行就是如果 本版本支持button标签里面的open-type属性中的getUserInfo值 那么canIUse就是true 否则就是false
下面也是这样的道理第二个：
wx.getUserProfile：旧版本用于获取用户数据（微信名字性别头像）的接口函数
上图是判断是否支持该接口
第三个：
wx.getUserProfile：新版本用于获取用户数据的接口函数
代码讲解
了解了上面的基础以后 就可以分析新建的项目的初始代码的意思了
js
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
//支持button.open-type.getUserInfo为true 也就是支持旧版获取用户信息的接口wx.getUserInfo()
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
//同时支持open-data.type.userAvatarUrl和open-data.type.userNickName时候为true 也就是支持用open-data标签直接获取用户信息
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad() {
if (wx.getUserProfile) {
console.log("本版本支持使用wx.getUserProfile接口函数")
this.setData({
canIUseGetUserProfile: true
})
}
},
//新版获取用户信息
getUserProfile(e) {
console.log("getUserProfile")
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
//旧版获取用户信息
getUserInfo(e) {
console.log("getUserInfo")
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
console.log(e)
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})wxml
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<!-- 如果canIUseOpenData为true 那么显示第一个block -->
<block wx:if="{{canIUseOpenData}}" calss="userinfo-opendata">
<view class="userinfo-avatar" bindtap="bindViewTap">
<!-- 显示头像图片 -->
<open-data type="userAvatarUrl"></open-data>
</view>
<!-- 显示微信名字 -->
<open-data type="userNickName"></open-data>
</block>
<!-- 如果canIUseOpenData为false 同时!hasUserInfo为true 那么显示第二个block 而不显示第一个 -->
<block wx:elif="{{!hasUserInfo}}">
<!-- 如果canIUseGetUserProfile为true 显示按钮 点击使用新版获取用户信息的接口函数 -->
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
<!-- 如果canIUseGetUserProfile为false canIUse为true 显示按钮 点击使用新版获取用户信息的接口函数 -->
<button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<!-- 如果版本太旧了 新旧版本获取用户数据都不支持 -->
<view wx:else> 请使用1.4.4及以上版本基础库 </view>
</block>
<!-- 最后一个block -->
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>这样就可以理解 初始代码的意思了
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
训练营
