微信小程序开发教程(基础篇)5-index 页面解析

GT 发布于2019-08-20 12:29 / 2202人阅读

摘要：上一篇教程谈了些和微信小程序开发本身无关的技术问题，现在回到主题。这边教程主要对默认生成的页面进行讲解。而的显示则是由属性直接指定。在该例子中，当用户点击用户头像和昵称的视图区域时，程序便会显示页面。

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

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

讲解之前先上图

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



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

该页面的层级结构比较简单，三个view标签，一个image以及两个text标签，其中view为容器标签，image用来显示用户头像，第一个text用来显示用户昵称，第二个text则是"Hello World"

可以看到页面描述文件中绑定了几个变量，分别是第二个view标签的 bindtap="bindViewTap"，image标签的src="{{userInfo.avatarUrl}} 以及两个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绑定的变量，其中onLoad方法会在页面加载时被调用，该方法会调用app对象的getUserInfo方法来获取用户信息并赋值给userInfo属性，这样界面就可以显示用户头像和昵称了。而"Hello World"的显示则是由motto属性直接指定。

Page对象还定义了bindViewTap方法，该方法通过调用wx.navigateTo导航到logs页面。关于页面导航的更多内容将在后面的教程中讲解。在该例子中，当用户点击用户头像和昵称的视图区域时，程序便会显示logs页面。

最后简单看下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中使用到的样式选择器，这部分比简单，在这里就不多做解释了。

GPU云服务器云服务器购物微信小程序开发视频教程微信小程序开发微信小程序开发语言微信小程序开发免费

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81009.html

微信小程序开发教程(基础篇)6-logs页面解析

摘要：到此为止，默认生成程序的解析部分就结束了。这个解析过程是为了对微信小程序有个总体上的理解，所以很多地方并没有深入。在后面的教程中，我会继续讲解微信小程序开发的各个方面。上一篇教程中对index页面进行了解析，这一篇来解析下logs页面老规矩先上图 showImg(https://segmentfault.com/img/remote/1460000007613022?w=378&h...

shiguibiao 2019-08-20 12:34 评论0 收藏0
微信小程序开发教程(基础篇)3-app.js 解析

摘要：微信小程序框架提供了一系列来帮助我们进行本地数据存储，上面的代码中使用到了和两个更多相关可以参考这里方法很容易理解，会执行获取用户信息的功能。上一篇教程中写道，开发工具会生成一个默认的程序框架，其中程序的主流程代码包含在app.js中。默认实现中，该部分功能比较简单，不过对于学研究小程序开发还是比较有价值的。由于代码行数不多，下面一次性贴出来后进行讲解 //app.js App({...

lemon 2019-08-20 12:23 评论0 收藏0
微信小程序开发教程(基础篇)2-微信小程序结构概览

摘要：在新建一个项目后，微信小程序会生成一个默认的程序框架，后续程序的开发工作都在这个框架上进行。微信小程序的开发模式确实和开发很相似。通常一个完整的微信小程序包含上面两部分，当然我们也可以定义自己的目录用于存放公共代码和程序需要的其它文件。在上一篇教程的最后，我们生成了一个类似Hello World的小程序，这个过程中没有编写任何一行代码。在新建一个项目后，微信小程序会生成一个默认的程序...

muddyway 2019-08-20 12:21 评论0 收藏0
微信小程序开发教程(基础篇)7-数据绑定上

摘要：在之前的教程中写到，微信小程序框架将程序分为逻辑层文件和视图层文件。关于数据绑定的更多讲述，敬请期待微信小程序开发教程基础篇数据绑定下在之前的教程中写到，微信小程序框架将程序分为逻辑层(.js文件)和视图层(.wxml文件)。这是一种常见的UI和逻辑分离的程序设计方式，开发出来的程序更加灵活，易扩展。这种程序设计方式通常要解决两个问题: UI层响应逻辑层逻辑和数据的变化UI层将用户...

I_Am 2019-08-21 15:01 评论0 收藏0