早茶微信基础篇《程序篇》 三》索引页面解析，日志页面解析....

第一部分：index 页面解析

这边教程主要对默认生成的index 页面进行讲解。在之前的教程中有写道每一个页面都包含.js(处理逻辑).wxml(描述页面内容)百度网址提交.wxml(描述页面内容).wxss(配置页面样式)三个文件index 页面也是如此。

讲解之前先上图

这里写图片描述

index页面的内容不多百度网址提交index 页面也是如此。

讲解之前先上图

这里写图片描述

index页面的内容不多只有一个用户头像用户姓名和一个"Hello World"首先来看看index.wxml的内容

<!--index.wxml--> <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view>

该页面的层级结构比较简单三个view标签一个image以及两个text标签其中view为容器标签image用来显示用户头像第一个text用来显示用户昵称第二个text则是"Hello World"

可以看到页面描述文件中绑定了几个变量分别是第二个view标签的 bindtap="bindViewTap"image标签的src="{{userInfo.avatarUrl}} 以及两个text标签的内容文本。那么这些变量定义在哪里呢答案就在index.js中

//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 }) }) } })

index.js代码定义了Page对象该对象中定义了index.wxml绑定的变量其中onLoad方法会在页面加载时被调用该方法会调用app对象的getUserInfo方法来获取用户信息并赋值给userInfo属性这样界面就可以显示用户头像和昵称了。而"Hello World"的显示则是由motto属性直接指定。

Page对象还定义了bindViewTap方法该方法通过调用wx.navigateTo导航到logs页面。关于页面导航的更多内容将在后面的教程中讲解。在该例子中当用户点击用户头像和昵称的视图区域时程序便会显示logs页面。

最后简单看下index.wxss

/**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.wxml中使用到的样式选择器这部分比简单在这里就不多做解释了。

第二部分：logs页面解析

老规矩先上图

logs页面

该页面包含返回按钮(用于返回index页面)页面title和程序启动日志列表。
和index页面相比logs页面多了一个logs.json文件来配置页面title的内容

{ "navigationBarTitleText": "查看启动日志" }

 

更多配置项可以参考配置 小程序

<!--logs.wxml--> <view class="container log-list"> <block wx:for="{{logs}}" wx:for-item="log"> <text class="log-item">{{index + 1}}. {{log}}</text> </block> </view>

 

在logs.wxml中定义了三个标签分别为viewblock和text其中view标签为容器block用于绑定logs数组而text标签用于显示每一条log。wx:for和wx:for-item是小程序框提供的列表绑定语法更多详情请参考列表渲染

//logs.js var util = require('../../utils/util.js') Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync('logs') || []).map(function (log) { return util.formatTime(new Date(log)) }) }) } })

logs.js定义了logs数组并在onLoad方法中从本地缓存中获取程序启动时间数据之后调用数组的map方法来将时间格式化为字符串

.log-list { display: flex; flex-direction: column; padding: 40rpx; } .log-item { margin: 10rpx; }

最后仍然是logs.wxss对页面样式进行控制。

到此为止默认生成程序的解析部分就结束了。这个解析过程是为了对微信小程序有个总体上的理解所以很多地方并没有深入。在后面的教程中我会继续讲解微信小程序开发的各个方面。