当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序开发教程之index页面解析

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

2018-06-06 11:36 来源: 霸界科技

摘要:微信小程序的每一个页面都包含三个文件,分别是.js(处理逻辑),.wxml(描述页面内容),.wxss(配置页面样式),index 页面同样也包含这三个文件,本文就着默认生成的index 页面进行开发流程...

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

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页面解析
 
  //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;
 
  }
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088