上篇 微信小程序入門篇（一）我們講解了一下小程序的整體架構(gòu)桥状，今天來講一下雇初，一個頁面的具體實現(xiàn)原理，好注意聽烁兰，下面要開始畫重點啦~哈哈
頁面的構(gòu)成
- 還記得我們在上篇文章中講解如何加入一個界面嗎耐亏？在app.json中的pages加入要加的文件路徑就可以啦，文件路徑可以隨便起缚柏，系統(tǒng)會自動創(chuàng)建出來的苹熏，那么我就接著之前的講，我們之前創(chuàng)建了一個頁面叫addPage币喧，addPage里面包含四個文件** addPage.js轨域、addPage.json、addPage.wxml杀餐、addPage.wxss**這四個對應(yīng)的作用是什么吶干发？
- addPage.js 頁面數(shù)據(jù)的存儲，網(wǎng)絡(luò)請求的加載都是在這里
- addPage.json 用于設(shè)置導(dǎo)航欄樣式史翘，和app.json性質(zhì)一樣枉长，如果沒設(shè)置樣式冀续，默認用app.json中的樣式
- addPage.wxml 頁面的效果都在這里面，就是展現(xiàn)給用戶的界面
-
addPage.wxss 頁面樣式設(shè)計必峰，頁面的一些樣式屬性都寫在這里
1-1.png
頁面的解析
- addPage.js解析
// pages/addPage/addPage.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
console.debug("onLoad--監(jiān)聽頁面加載");
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
console.debug("onReady--監(jiān)聽頁面初次渲染完成");
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
console.debug("onShow--監(jiān)聽頁面顯示");
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
console.debug("onHide--監(jiān)聽頁面隱藏");
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
console.debug("onUnload--監(jiān)聽頁面卸載");
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
console.debug("onPullDownRefresh--監(jiān)聽用戶下拉動作");
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
console.debug("onReachBottom--頁面上拉觸底事件的處理函數(shù)");
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
console.debug("onShareAppMessage--用戶點擊右上角分享");
}
})
這里面注釋都是系統(tǒng)自動創(chuàng)建的洪唐，我沒動，注釋寫的很清楚吼蚁，我沒什么要多說的啦凭需，差別是我在每個方法里加入了console.debug（）這個是以后調(diào)試bug會用到的，輸出日志肝匆，就是以后程序出現(xiàn)的問題就靠他輸出來粒蜈，我加入的目的就是要展示一下，系統(tǒng)啟動小程序都執(zhí)行了那些方法,怎么測試系統(tǒng)執(zhí)行了那些方法吶旗国？
- 第一步枯怖，改動跳轉(zhuǎn)的代碼，首先找到pages/index/index.js,修改bindViewTap方法里的url,路徑改為addPage的路徑能曾，這樣頁面跳轉(zhuǎn)的時候就會跳到addPage界面啦度硝，修改過的代碼記得保存，否者效果無效借浊！
bindViewTap: function() {
wx.navigateTo({
//url: '../logs/logs'
url: '../addPage/addPage'
})
},
- 第二步塘淑，找到菜單欄的調(diào)試按鈕，切換到調(diào)試模式蚂斤，找到Console控制臺存捺，選著All或者Debug模式，Console會輸出日志信息曙蒸，接下來點擊一下helloWord上面的用戶頭像捌治，看看會出現(xiàn)上面效果，如果操作沒錯的話會出現(xiàn)下面的效果纽窟，
2-1.png
看控制臺輸出的信息肖油，理論上是會出現(xiàn)三行藍色字，第四行是因為我還執(zhí)行了一個返回鍵的操作由此可判斷臂港，當(dāng)點擊返回鍵時執(zhí)行onUnload方法森枪，還有當(dāng)頁面加載的時候方法執(zhí)行的先后順序為onLoad->onShow->onReady，我們只要知道頁面的生命周期就好审孽，至于具體的調(diào)用县袱，我們在后面實戰(zhàn)的時候講解，還有如果你點擊界面三個小點佑力，然后執(zhí)行轉(zhuǎn)發(fā)操作式散，就會執(zhí)行onShareAppMessage方法，具體我就不演示啦打颤，addPage.js中還有的方法是** onHide暴拄、onPullDownRefresh漓滔、onReachBottom**，當(dāng)A跳轉(zhuǎn)到B時候乖篷，A就會執(zhí)行onHide的方法啦响驴，onPullDownRefresh下拉刷新數(shù)據(jù)會用到，onReachBottom用于底部加載更多那伐，這些都放在后面在講解電商開發(fā)的時候一起講踏施。好，關(guān)于addPage.js就講解到這里
- addPage.wxml與addPage.wxss
.wxml與.wxss構(gòu)成了整個界面罕邀，我們自己新建的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
結(jié)合效果圖一起看樣式代碼飒赃，看到"userinfo"和"container"是不是眼熟利花，就是之前在index.wxml中class的樣式科侈，我們在wxss定義好樣式礁芦，就是通過這些字段把index.wxml和index.wxss關(guān)聯(lián)起來闭翩，才有的上面的界面效果
wxss樣式積累
wxss樣式里代碼看不懂可以查閱這里，如果沒找到對應(yīng)樣式玫锋，請自行百度嘍挠乳，這些也是代碼君問的度娘
- 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：環(huán)繞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 內(nèi)容超過邊框處理方式
- visible 顯示超出的內(nèi)容
- hidden 隱藏超出的內(nèi)容
- auto 自動加入滾動條
總結(jié)
今天我們講解了頁面的所有內(nèi)容权薯，知識點很多，尤其是wxss的樣式睡扬，其實wxss樣式和css樣式的屬性是差不多的盟蚣，所以可以多去參考css樣式屬性，今天就說這么多卖怜，兩篇的小程序入門文章屎开，應(yīng)該可以幫助大家跨進小程序的大門啦，接下來马靠，我們將進入實戰(zhàn)篇《電商》奄抽，很多朋友都問怎么做一個電商小程序，所以我將在后面的文章中甩鳄，一步步教大家開發(fā)一個電商小程序逞度，敬請期待！原創(chuàng)不易妙啃，覺得不錯就點個贊吧档泽！
上一篇：微信小程序入門篇（一）
下一篇：微信小程序?qū)崙?zhàn)篇-電商（一）
建了一個小程序技術(shù)交流群，想入群的讀者請加微信
小程序入群.png
