微信小程序入门篇（二） 页面的构成还记得我们在上篇文章中讲解如何加入一个界面吗？在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 页面样式设计，页面的一些样式属性都写在这里 页面的解析addPage.js解析/ pages/addPage/addPage.jsPage( /* * 页面的初始数据 */ 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-用户点击右上角分享); )123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566这里面注释都是系统自动创建的，我没动，注释写的很清楚，我没什么要多说的啦，差别是我在每个方法里加入了console.debug（）这个是以后调试bug会用到的，输出日志，就是以后程序出现的问题就靠他输出来，我加入的目的就是要展示一下，系统启动小程序都执行了那些方法,怎么测试系统执行了那些方法呐？第一步，改动跳转的代码，首先找到pages/index/index.js,修改bindViewTap方法里的url,路径改为addPage的路径，这样页面跳转的时候就会跳到addPage界面啦，修改过的代码记得保存，否者效果无效！ bindViewTap: function() wx.navigateTo( /url: ./logs/logs url: ./addPage/addPage ) ,123456第二步，找到菜单栏的调试按钮，切换到调试模式，找到Console控制台，选着All或者Debug模式，Console会输出日志信息，接下来点击一下helloWord上面的用户头像，看看会出现上面效果，如果操作没错的话会出现下面的效果， 看控制台输出的信息，理论上是会出现三行蓝色字，第四行是因为我还执行了一个返回键的操作由此可判断，当点击返回键时执行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 container> <view bindtap=bindViewTap userinfo> <image userinfo-avatar src=userInfo.avatarUrl background-size=cover></image> <text userinfo-nickname>userInfo.nickName</text> </view> <view usermotto> <text user-motto>motto</text> </view></view>12345678910看代码对应的视图，从代码看过去黑色框（view）包含两个黄色框（view），第一个黄色框又包含两个image和text，界面布局大致就是这样，看里面具体代码，黑色框view里有一个属性class，这个class可以理解为ID这个class是用来关联index.wxss,可以理解为黑色框的view设置为”container”的样式，继续看第一个黄色框View，同理可以知道第二个黄色框View的样式设为”userinfo”,咦，bindtap是什么意思呐？bindtap你可以理解为事件监听，系统定义的固定字段，写事件一定会用到这个，还记得上面我们做的测试系统执行的方法时，不是有修改过index.js中”bindViewTap”的方法嘛，这个”bindViewTap”是自定义的方法名，可以随意修改，但是bindtap字段是不可修改的否则代码无效，再说说绿色框中的text，有没有注意到mottouserInfo.nickName，这个就是给视图赋值，就是界面上你看到的HelloWord就是这么设置的，”motto、userInfo.nickName”字段是在index.js中的data里面，这里要强调的是我们在调用index.js里data数据时，赋值的时候要记得加入data两个中括号，这样系统才能识别数据。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;123456789101112131415161718/*app.wxss*/.container height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; 12345678910 结合效果图一起看样式代码，看到”userinfo”和”container”是不是眼熟，就是之前在index.wxml中class的样式，我们在wxss定义好样式，就是通过这些字段把index.wxml和index.wxss关联起来，才有的上面的界面效果wxss样式积累wxss样式里代码看不懂可以查阅这里，如果没找到对应样式，请自行百度喽，这些也是代码君问的度娘 1. display属性 - none:此元素不会被显示 - block：两个元素自动换行 - inline：两个元素靠在一起 - inherit：继承父类 - flex：多栏多列 2. flex-direction: 3. 厚大司考 4. 大花洒 - column 垂直分布 - row 水平分布 3. flex-wrap： - nowrap item溢出不换行 - wrap 超出的item跳到下一行 4. justify-content属性 - flex-start：左对齐 - flex-end：右对齐 - center：居中 - space-between ：item中间留出等间距 - space-around：环绕item流程等间距 5. align-items item 边界线对齐方式 - flex-start | flex-end | center | baseline | stretch 6. border-bottom 边界线 - 举个栗子 1px solid #ccc; 7. align-items item 边界线对齐方式 - flex-start | flex-end | center | baseline | stretch 8. overflow-x 内容超过边框处理方式 - visible 显示超出的内容 - hidden 隐藏超出的内容 - auto 自动加入滚动条总结今天我们讲解了页面的所有内容，知识点很多，尤其是wxss的样式，其实wxss样式和css样式的属性是差不多的，所以可以多去参考css样式属性，今天就说这么多，两篇的小程序入门文章，应该可以帮助大家跨进小程序的大门啦，接下来，我们将进入实战篇电商，很多朋友都问怎么做一个电商小程序，所以我将在后面的文章中，一