小程序开发基础篇之index页面解析（5）

小程序开发基础篇之index页面解析（5）
上一篇教程谈了些和微信小程序开发本身无关的技术问题，现在回到主题。 这边教程主要对默认生成的index 页面进行讲解。在之前的教程中有写道，每一个页面都包含.js(处理逻辑)，.wxml(描述页面内容)，.wxss(配置页面样式)三个文件，index 页面也是如此。 讲解之前先上图 index页面的内容不多，只有一个用户头像，用户姓名，和一个"Hello World"，首先来看看index....

上一篇教程谈了些和微信小程序开发本身无关的技术问题，现在回到主题。

这边教程主要对默认生成的index 页面进行讲解。在之前的教程中有写道，每一个页面都包含.js(处理逻辑)，.wxml(描述页面内容)，.wxss(配置页面样式)三个文件，index 页面也是如此。

讲解之前先上图

这里写图片描述

index页面的内容不多，只有一个用户头像，用户姓名，和一个"Hello World"，首先来看看index.wxml的内容

<!--index.wxml--><view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view></view>