微信小程序开发教程之index 页面解析

微信小程序的每一个页面都包含三个文件，分别是.js(处理逻辑)，.wxml(描述页面内容)，.wxss(配置页面样式)，index 页面同样也包含这三个文件，本文就着默认生成的index 页面进行开发流程解析。不过，index页面内容不多，只有用户头像、用户姓名、Hello World，下面我们分别看下这几个文件的内容。

1、index.wxml内容

  这个页面的层级结构比较简单，主要是三个view标签，一个image以及两个text标签，其中view为容器标签，image用来显示用户头像，第一个text用来显示用户昵称，第二个text则是“Hello World”。以下述代码为例，可以看到页面的描述文件中绑定了几个变量，分别是第二个view标签的 bindtap=”bindViewTap”，image标签的src=”{{userInfo.avatarUrl}} 以及两个text标签的内容文本。

<!--index.wxml-->

<view>

  <view  bindtap="bindViewTap">

    <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>

    <text>{{userInfo.nickName}}</text>

  </view>

  <view>

    <text>{{motto}}</text>

  </view>

</view>

  2、index.js内容

  index.js代码定义了Page对象，该对象中定义了index.wxml绑定的变量，其中onLoad方法会在页面加载时被调用，该方法会调用app对象的getUserInfo方法来获取用户信息并赋值给userInfo属性，如此下来，该界面即可显示用户头像和昵称。而“Hello World”的显示则是由motto属性直接指定。此外，Page对象还定义了bindViewTap方法，通过调用wx.navigateTo导航到logs页面。比如下述代码实例所示，当用户点击用户头像和昵称的视图区域时，程序便会显示logs页面。

//index.js

//获取应用实例

var app = getApp()

Page({

  data: {

    motto: 'Hello World',

    userInfo: {}

  },

  //事件处理函数

  bindViewTap: function() {

    wx.navigateTo({

      url: '../logs/logs'

    })

  },

  onLoad: function () {

    console.log('onLoad')

    var that = this

    //调用应用实例的方法获取全局数据

    app.getUserInfo(function(userInfo){

      //更新数据

      that.setData({

        userInfo:userInfo

      })

    })

  }

})

  3、index.wxss内容

index.wxss文件定义了index.wxml中使用到的样式选择器，相对比较简单，所以在这里我们就不多赘述了，贴出示例代码给大家看一下。

/**index.wxss**/

.userinfo {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.userinfo-avatar {

  width: 128rpx;

  height: 128rpx;

  margin: 20rpx;

  border-radius: 50%;

}

.userinfo-nickname {

  color: #aaa;

}

.usermotto {

  margin-top: 200px;

}