?2016-2026 Matools All rights reserved,
粵ICP備17059708號(hào)
一個(gè)小程序應(yīng)用，由index，logs等多個(gè)頁(yè)面組成。一個(gè)頁(yè)面，包含4個(gè)同名，不同后綴的文件，它們分別是負(fù)責(zé)配置的json，布局的wxml，樣式的wxss和業(yè)務(wù)邏輯的js。其中，wxml和js是不可刪除，是必須有的文件。
4.1 index.json
每一個(gè)小程序頁(yè)面也可以使用.json文件來對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置。頁(yè)面中配置項(xiàng)在當(dāng)前頁(yè)面會(huì)覆蓋app.json的window中相同的配置項(xiàng)。
?
以上屬性的含義跟app.json里的是一模一樣的，我就不重復(fù)講了，再講的話，怕你用時(shí)間跟我換金錢。
{ "navigationBarTitleText": "首頁(yè)", "navigationBarTextStyle": "black" }
我沒錢，只好說下頁(yè)面json文件才有的disableScroll和usingComponents屬性。disableScroll默認(rèn)為false，設(shè)置為true時(shí)頁(yè)面不能上下滾動(dòng)。usingComponents用來引入第3方組件，唯有在json文件中引入的，才可以在wxml文件中使用。這個(gè)只是示例代碼，等講到組件時(shí)，就自然明白了。
{ "usingComponents": { "mp-cells": "../../components/cells/cells", "mp-cell":
"../../components/cell/cell" }, "disableScroll": true }
4.2 index.js
在頁(yè)面js文件中，可在Page()里面指定頁(yè)面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等；可在外面引入模塊和getApp()等。
const util = require('../../utils/util.js') const app = getApp() Page({ data:
{ motto:'Hello World' }, //自定義函數(shù) bindViewTap: function() {}, //頁(yè)面加載時(shí)觸發(fā) onLoad:
function() {} })
初始化數(shù)據(jù)的data，在頁(yè)面第一次渲染時(shí)使用。自定義函數(shù)bindViewTap，綁定頁(yè)面組件，在用戶觸發(fā)時(shí)調(diào)用。onLoad為生命周期函數(shù)，在頁(yè)面加載時(shí)觸發(fā)，可通過this調(diào)用自定義函數(shù)。有關(guān)函數(shù)的更多內(nèi)容，咱騎驢看唱本，走著瞧。
4.3 index.wxml
WXML（WeiXin Markup
Language）是框架設(shè)計(jì)的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出wxml頁(yè)面的結(jié)構(gòu)。關(guān)于WXML的更多內(nèi)容，在后面會(huì)花多點(diǎn)篇章、花多點(diǎn)時(shí)間、花多點(diǎn)心思進(jìn)行詳細(xì)的介紹。
<!—pages/index/index.wxml--> <view class="container"> <text class="user-motto">
{{motto}}</text> </view>
4.4 index.wxss
在page的?wxss文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋?app.wxss?中相同的選擇器。
/**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items
: center; } .userinfo-avatar { width: 128rpx; height: 128rpx; } .usermotto {
margin-top: 200px; }
能堅(jiān)持看到這的人，都是能做事的碼農(nóng)，如果能答對(duì)我要問的問題，肯定會(huì)讓他人佩服得五體投床的。那么問題就來了：仔細(xì)觀察上面index.wxss里的內(nèi)容，猜一猜哪一個(gè)東西在CSS是沒見過的？
沒錯(cuò)，rpx在CSS里是不曾有過的，你猜對(duì)沒？--如果猜對(duì)的話，我就五體投床去了，如果沒猜對(duì)的話，我就五體投床去了，因?yàn)槲弩w投地還得洗衣服。
rpx為小程序特有的尺寸單位，可解決屏幕寬度進(jìn)行自適應(yīng)的問題。它以屏幕寬為750rpx為基準(zhǔn)。如在?iPhone6?上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx
= 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
猜對(duì)上面問題的人，給你10分鐘，一邊嘚瑟去吧。沒猜對(duì)的人，趕緊抓緊機(jī)會(huì)，猜猜.userinfo和.usermotto用的是哪種選擇器？
沒錯(cuò)，答案就在下表中。你真聰明！
好了，項(xiàng)目文件就這樣了，沒什么要說的了。如果你還沒搞懂的話，就從頭到尾再多學(xué)幾遍，如果你還沒搞懂的話，就從頭到尾再多學(xué)幾遍，直到能去基礎(chǔ)語法為止。
熱門工具 換一換