上篇 微信小程序入门篇（一）我们讲解了一下小程序的整体架构，今天来讲一下，一个页面的具体实现原理，好注意听，下面要开始画重点啦~哈哈
页面的构成
- 还记得我们在上篇文章中讲解如何加入一个界面吗？在app.json中的pages加入要加的文件路径就可以啦，文件路径可以随便起，系统会自动创建出来的，那么我就接着之前的讲，我们之前创建了一个页面叫addPage，addPage里面包含四个文件** addPage.js、addPage.json、addPage.wxml、addPage.wxss**这四个对应的作用是什么呐？
- addPage.js 页面数据的存储，网络请求的加载都是在这里
- addPage.json 用于设置导航栏样式，和app.json性质一样，如果没设置样式，默认用app.json中的样式
- addPage.wxml 页面的效果都在这里面，就是展现给用户的界面
-
addPage.wxss 页面样式设计，页面的一些样式属性都写在这里
1-1.png
页面的解析
- addPage.js解析
// pages/addPage/addPage.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.debug("onLoad--监听页面加载");
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.debug("onReady--监听页面初次渲染完成");
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.debug("onShow--监听页面显示");
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.debug("onHide--监听页面隐藏");
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.debug("onUnload--监听页面卸载");
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.debug("onPullDownRefresh--监听用户下拉动作");
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.debug("onReachBottom--页面上拉触底事件的处理函数");
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
console.debug("onShareAppMessage--用户点击右上角分享");
}
})
这里面注释都是系统自动创建的，我没动，注释写的很清楚，我没什么要多说的啦，差别是我在每个方法里加入了console.debug（）这个是以后调试bug会用到的，输出日志，就是以后程序出现的问题就靠他输出来，我加入的目的就是要展示一下，系统启动小程序都执行了那些方法,怎么测试系统执行了那些方法呐？
- 第一步，改动跳转的代码，首先找到pages/index/index.js,修改bindViewTap方法里的url,路径改为addPage的路径，这样页面跳转的时候就会跳到addPage界面啦，修改过的代码记得保存，否者效果无效！
bindViewTap: function() {
wx.navigateTo({
//url: '../logs/logs'
url: '../addPage/addPage'
})
},
- 第二步，找到菜单栏的调试按钮，切换到调试模式，找到Console控制台，选着All或者Debug模式，Console会输出日志信息，接下来点击一下helloWord上面的用户头像，看看会出现上面效果，如果操作没错的话会出现下面的效果，
2-1.png
看控制台输出的信息，理论上是会出现三行蓝色字，第四行是因为我还执行了一个返回键的操作由此可判断，当点击返回键时执行onUnload方法，还有当页面加载的时候方法执行的先后顺序为onLoad->onShow->onReady，我们只要知道页面的生命周期就好，至于具体的调用，我们在后面实战的时候讲解，还有如果你点击界面三个小点，然后执行转发操作，就会执行onShareAppMessage方法，具体我就不演示啦，addPage.js中还有的方法是** onHide、onPullDownRefresh、onReachBottom**，当A跳转到B时候，A就会执行onHide的方法啦，onPullDownRefresh下拉刷新数据会用到，onReachBottom用于底部加载更多，这些都放在后面在讲解电商开发的时候一起讲。好，关于addPage.js就讲解到这里
- addPage.wxml与addPage.wxss
.wxml与.wxss构成了整个界面，我们自己新建的addPage文件没什么样式，所以我就拿index.wxml和index.wxss来讲解
- 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>
2-2.png
- 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;
}
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
2-3.png
结合效果图一起看样式代码，看到"userinfo"和"container"是不是眼熟，就是之前在index.wxml中class的样式，我们在wxss定义好样式，就是通过这些字段把index.wxml和index.wxss关联起来，才有的上面的界面效果
wxss样式积累
wxss样式里代码看不懂可以查阅这里，如果没找到对应样式，请自行百度喽，这些也是代码君问的度娘
- display属性
- none:此元素不会被显示
- block：两个元素自动换行
- inline：两个元素靠在一起
- inherit：继承父类
- flex：多栏多列
- flex-direction:
- column 垂直分布
- row 水平分布
- flex-wrap：
- nowrap item溢出不换行
- wrap 超出的item跳到下一行
- justify-content属性
- flex-start：左对齐
- flex-end：右对齐
- center：居中
- space-between ：item中间留出等间距
- space-around：环绕item流程等间距
- align-items item 边界线对齐方式
- flex-start | flex-end | center | baseline | stretch
- border-bottom 边界线
- 举个栗子 1px solid #ccc;
- align-items item 边界线对齐方式
- flex-start | flex-end | center | baseline | stretch
- overflow-x 内容超过边框处理方式
- visible 显示超出的内容
- hidden 隐藏超出的内容
- auto 自动加入滚动条
总结
今天我们讲解了页面的所有内容，知识点很多，尤其是wxss的样式，其实wxss样式和css样式的属性是差不多的，所以可以多去参考css样式属性，今天就说这么多，两篇的小程序入门文章，应该可以帮助大家跨进小程序的大门啦，接下来，我们将进入实战篇《电商》，很多朋友都问怎么做一个电商小程序，所以我将在后面的文章中，一步步教大家开发一个电商小程序，敬请期待！原创不易，觉得不错就点个赞吧！
上一篇：微信小程序入门篇（一）
下一篇：微信小程序实战篇-电商（一）
建了一个小程序技术交流群，想入群的读者请加微信
小程序入群.png
