微信小程序开发教程之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(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 广州地区中小企业适合开发微信小程序吗

    广州地区密布着个各种类型的中小企业,这些企业在微信小程序的开发上必定会存在不同的看法,有些考虑公司规模觉得不合适开发小程序,而有些公司就会考虑跟上潮流与长远发展去开发小程序。

  • 广州微信餐饮行业的小程序关键词要怎么设置

    小编在之前的推文中说过,餐饮行业在开发小程序时,需要注重小程序的关键词设置,来达到提高门店曝光率与搜索数量,并在微信搜索排名中争取更加靠前的排名,将门店的小程序尽可能多地呈现在微信用户面前。那么,对于如此重要的关键词设置

  • 微信小程序开发工具改版上线,开发变得更容易

    为了满足开发者在小程序开发各个阶段的需求,微信官方在近日上线了全新改版的微信开发者工具,新增了测试系统、腾讯云工具、小程序分阶段发布、小程序性能监控

  • 小程序开发亮点:微信小程序的价值所在

    关于小程序开发,目前还是处于一个初级阶段,但这并不代表它没有价值

  • 微信小程序开发过程必须解决的几大问题

    开发者在选择进入到微信小程序市场中的时候,首先要触及到的就是市场需求定位、开发团队组建、宣传推广问题以及数据监测问题。这几个方面是在策划

  • 关于降低微信小程序定制开发成本的两点建议

    虽然说微信小程序定制开发的价格比APP开发低了很多倍,但是一些不必要的费用还是需要去避免的,特别是对于微信小程序定制开发成本把控比较严格的一些企业商家来说,更加需要去降低开发成本,把钱花在刀刃上。对此,小编有几点关于

河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三 河北快三