第二章我們已經(jīng)創(chuàng)建了一個(gè)Hello WXapplet示例小程序。愛(ài)掏網(wǎng) - it200.com我們從文件目錄結(jié)構(gòu)來(lái)了解Hello WXapplet項(xiàng)目的構(gòu)成。愛(ài)掏網(wǎng) - it200.com
目錄結(jié)構(gòu)顯示&＃xff0c;在小程序項(xiàng)目的根目錄下面包含3個(gè)app開(kāi)頭的文件&＃xff08;app.js、app.json、app.wxss&＃xff09;以及pages目錄與utils目錄。愛(ài)掏網(wǎng) - it200.com其中pages目錄存放了2個(gè)頁(yè)面&＃xff08;index和log&＃xff09;的構(gòu)成文件。愛(ài)掏網(wǎng) - it200.com每個(gè)頁(yè)面都是一個(gè)目錄&＃xff0c;目錄名就是唯一的頁(yè)面名&＃xff0c;其下由以頁(yè)面名為前綴的2~4個(gè)文件組成。愛(ài)掏網(wǎng) - it200.com
? 小程序的目錄文件結(jié)構(gòu)如上&＃xff0c;左側(cè)的3個(gè)app文件必須放在小程序根目錄下面&＃xff0c;其他文件由開(kāi)發(fā)者自由控制。愛(ài)掏網(wǎng) - it200.com
app.js是小程序的腳本代碼&＃xff0c;用來(lái)監(jiān)聽(tīng)并處理小程序的生命周期、聲明全局變量、調(diào)用框架提供的豐富API等。愛(ài)掏網(wǎng) - it200.com
//app.js
App({onLaunch: function () {//調(diào)用API從本地緩存中獲取數(shù)據(jù)var logs &＃61; wx.getStorageSync(&＃39;logs&＃39;) || []logs.unshift(Date.now())wx.setStorageSync(&＃39;logs&＃39;, logs)},getUserInfo:function(cb){var that &＃61; thisif(this.globalData.userInfo){typeof cb &＃61;&＃61; "function" && cb(this.globalData.userInfo)}else{//調(diào)用登錄接口wx.login({success: function () {wx.getUserInfo({success: function (res) {that.globalData.userInfo &＃61; res.userInfotypeof cb &＃61;&＃61; "function" && cb(that.globalData.userInfo)}})}})}},globalData:{userInfo:null}
})
app.json是對(duì)整個(gè)小程序的全局配置&＃xff0c;配置小程序是由哪些頁(yè)面組成&＃xff0c;配置小程序的窗口背景顏色、配置導(dǎo)航條樣式、配置默認(rèn)標(biāo)題等。愛(ài)掏網(wǎng) - it200.com&＃xff08;json文件中不可以加注釋&＃xff09;
{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"}
}
app.wxss是整個(gè)小程序的公共樣式表。愛(ài)掏網(wǎng) - it200.com
/**app.wxss**/
.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;
}
其中app.js和app.json是必需的。愛(ài)掏網(wǎng) - it200.com
小程序頁(yè)面是由同路徑下同名不同后綴的2~4個(gè)文件組成&＃xff1a;
.js后綴的文件是腳本文件。愛(ài)掏網(wǎng) - it200.com
//index.js
//獲取應(yīng)用實(shí)例
var app &＃61; getApp()
Page({data: {motto: &＃39;Hello World&＃39;,userInfo: {}},//事件處理函數(shù)bindViewTap: function() {wx.navigateTo({url: &＃39;../logs/logs&＃39;})},onLoad: function () {console.log(&＃39;onLoad&＃39;)var that &＃61; this//調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)app.getUserInfo(function(userInfo){//更新數(shù)據(jù)that.setData({userInfo:userInfo})})}
})
.json后綴的文件是配置文件。愛(ài)掏網(wǎng) - it200.com&＃xff08;如存在&＃xff0c;會(huì)層疊覆蓋app.json的window中相同的配置項(xiàng)&＃xff0c;json文件中不可以加注釋&＃xff09;
.wxss后綴的樣式表文件。愛(ài)掏網(wǎng) - it200.com&＃xff08;如存在&＃xff0c;會(huì)層疊覆蓋app.wxss中的樣式規(guī)則&＃xff09;
/**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;
}
.wxml后綴的文件是頁(yè)面結(jié)構(gòu)文件。愛(ài)掏網(wǎng) - it200.com
其中.js文件和.wxml文件時(shí)必需的。愛(ài)掏網(wǎng) - it200.com
微信小程序中的每一個(gè)頁(yè)面的“路徑&＃43;頁(yè)面名”都需要寫(xiě)在app.json的pages中&＃xff0c;且pages中的第一個(gè)頁(yè)面是小程序的首頁(yè)。愛(ài)掏網(wǎng) - it200.com
轉(zhuǎn):https://www.cnblogs.com/Strive-count/p/8983727.html