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

2018/4/23 19:19:57
摘要: 微信小程序的每一个页面都包含三个文件,分别是.js(处理逻辑),.wxml(描述页面内容),.wxss(配置页面样式),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;

}

声明:文章"微信小程序开发教程之index 页面解析"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序开发,参数传值方法介绍

    开发者在开发微信小程序的过程中,需要进行参数取值,也需要进行参数传值,之前小编介绍过两种常见的取值,接下来就要介绍一下参数传值的方法

  • 定制开发微信小程序之前需要搞清的4个问题

    一个企业想要定制开发小程序之前,必须要对小程序有一定的了解,特别是以下4个问题,在定制开发之前一定要弄清楚,才能帮助企业做出正确的开发决策。

  • 影响广州微信小程序定制开发费用的因素

    在目前的广州微信圈市场上,不会存在每一个定制开发的小程序费用都一样的情况,不同的功能需求、不同的开发主体以及市场环境都有可能成为影响开发价格的因素。

  • 微信小程序放出新功能,传送门开启更便捷

    为了让微信小程序在使用上能够更加便捷,微信官方又开放了两个新功能,作为便捷的“传送门”来让小程序本身引流、为公众号引流的效果更进一步

  • 如何培养起用户使用微信小程序的习惯

    用户对微信小程序的使用惯性的强弱,是小程序能否长远发展的重要因素。所以,在运营的过程中,对用户使用习惯的培养也非常重要

  • 分享:微信小程序开发过程中,常用的功能代码总结

    开发者进行微信小程序开发的时候,有一些比较常用的功能代码是可以学习使用的,根据基础的功能代码进行小调小整,就能调整成自己想要的代码

pc蛋蛋首页 湖北快3投注平台 河北快3网址 广西快三 河北快3 pc蛋蛋网站 pc蛋蛋网站 河北快3 广西快3平台 河北快3平台