微信小程序开发本身无关的index页面进行讲解教程

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序开发本身无关的index页面进行讲解教程

本教程主要讲解默认生成的索引页。 正如上一篇教程中所写，每个页面包含三个文件：.js（处理逻辑）、.wxml（描述页面内容）和.wxss（配置页面样式）。 索引页也是如此。

解释之前先来一张图

在这里写下图片描述

索引页上没有太多内容。 只有用户头像、用户名和“Hello World”。 首先我们看一下index.wxml的内容。

  
    
    {{userInfo.nickName}}
  
  
    {{motto}}
  

页面的层次结构比较简单，只有三个视图标签、一个图像和两个文本标签。 View是容器标签，image用于显示用户的头像，**个文本用于显示用户的昵称，第二个文本是“Hello World”

可以看到页面描述文件中绑定了几个变量，分别是第二个view标签的=""，image标签的src="{{.}}微信小程序开发页面，以及两个text标签的文本。然后这些变量定义在哪里?答案在index.js

//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
      })
    })
  }
})

index.js 代码定义了 Page 对象，该对象定义了绑定到 index.wxml 的变量。 该方法将在页面加载时被调用。 该方法会调用app对象的方法获取用户信息并赋值给属性，这样界面就可以显示用户的头像和昵称了。 “Hello World”的显示直接由 motto 属性指定。

Page 对象还定义了通过调用 wx.log 导航到日志页面的方法。 有关页面导航的更多信息将在后面的教程中解释。 本例中，当用户点击用户头像和昵称的查看区域时，程序会显示日志页面。

*后简单看一下index.wxss

/**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;
}

该文件定义了index.wxml 中使用的样式选择器。 这部分比较简单微信小程序开发本身无关的index页面进行讲解教程，这里就不解释了。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等