微信小程序开发教程之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 页面解析"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:13119592416(高生)
在线留言:
微信扫码,关注我们
相关文章
  • 开发微信小程序对哪些行业影响比较大?

    虽然小程序从内测到上线后都没有来势汹汹的气势,但还是止不住小程序的各种优点的传播发散以及对一些

  • 微信小程序开发能为企业品牌策划起到什么作用?

    任何行业在微信平台中去做品牌策划的时候,可以从品牌的创新度、体验效果以及触发分享的效果这三个方面去考虑。

  • 定制化微信小程序为何价格会高那么多

    无论是定制版本的微信小程序还是公众号、微商城,价格都会比模板制作的高出一些。那为什么会高?又高在哪里?这两个问题的回答就能让企业商家看出定制开发是否值得,所以小编得摩拳擦掌来好好夸大其词了。

  • 目前微信小程序开发的市场反应如何

    对于微信小程序开发的市场反应可以分为三个阶段:过去、目前与未来。过去式作为已经发生过的事情,小程序低迷的市场反应大家也已经看在眼中

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

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

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

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