微信小程序开发教程之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(高生)
在线留言:
微信扫码,关注我们
相关文章
  • 小程序入口总结:哪些入口效率比较高

    微信小程序从一开始的没有固定入口到现在已经发展成为多个入口结合一起发展的形式。不过,有很多入口,当然就会存在流量大的入口与流量较小的入口,企业商家掌握这些入口的大概效率,就能去较好地选择宣传方式与阵地

  • 已有APP的公司要不要开发对应的微信小程序

    虽然小程序是以应用平台作为开发点,拥有着基本的App功能,但是目前看来

  • 借力微信小程序开发,为传统行业拓展流量来源

    自从电商行业出现以来,传统行业就一直被改革。不过也正是因为电商行业所带来的冲击,才让传统行业不得不去反思自己的发展模式,寻求新的商业模式结合发展。而微信小程序的出现,就被很多传统行业从业人士所看好,因为它的服务场景更广,能发展

  • 微信小程序升级页面体验让用户爱上你的小程序

    昨日微信小程序开放了新的页面能力,在原有页面能力的基础上对其进行优化和升级,以提高开发者的开发效果跟用户体验的满意度。而升级优化体现在哪些方面,就是小编在今天这篇推文里的主要写作目的。

  • 广州微信小程序定制开发报价规则

    微信上的每一种产品都有定制开发,小程序也一样,但不是所有产品的制定开发报价规则都相同,每一种产品根据其开发特色的不同与所处地区不同

  • 培养客户忠诚度,用微信小程序会员积分系统就好

    微信小程序商城系统不仅是一个可以展示商品、销售商品的系统,而且为了解决一般电商系统吸引新粉丝难、维护老粉丝难的问题,还同时配备了会员积分管理等系统,来为企业商家或者个人开发者开发后增加客户粘性、培养客户忠诚度起到一个工具性的作用。