第二章我們已經創建了一個Hello WXapplet示例小程序。愛掏網 - it200.com我們從文件目錄結構來了解Hello WXapplet項目的構成。愛掏網 - it200.com
目錄結構顯示&＃xff0c;在小程序項目的根目錄下面包含3個app開頭的文件&＃xff08;app.js、app.json、app.wxss&＃xff09;以及pages目錄與utils目錄。愛掏網 - it200.com其中pages目錄存放了2個頁面&＃xff08;index和log&＃xff09;的構成文件。愛掏網 - it200.com每個頁面都是一個目錄&＃xff0c;目錄名就是唯一的頁面名&＃xff0c;其下由以頁面名為前綴的2~4個文件組成。愛掏網 - it200.com
? 小程序的目錄文件結構如上&＃xff0c;左側的3個app文件必須放在小程序根目錄下面&＃xff0c;其他文件由開發者自由控制。愛掏網 - it200.com
app.js是小程序的腳本代碼&＃xff0c;用來監聽并處理小程序的生命周期、聲明全局變量、調用框架提供的豐富API等。愛掏網 - it200.com
//app.js
App({onLaunch: function () {//調用API從本地緩存中獲取數據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{//調用登錄接口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是對整個小程序的全局配置&＃xff0c;配置小程序是由哪些頁面組成&＃xff0c;配置小程序的窗口背景顏色、配置導航條樣式、配置默認標題等。愛掏網 - it200.com&＃xff08;json文件中不可以加注釋&＃xff09;
{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"}
}
app.wxss是整個小程序的公共樣式表。愛掏網 - 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是必需的。愛掏網 - it200.com
小程序頁面是由同路徑下同名不同后綴的2~4個文件組成&＃xff1a;
.js后綴的文件是腳本文件。愛掏網 - it200.com
//index.js
//獲取應用實例
var app &＃61; getApp()
Page({data: {motto: &＃39;Hello World&＃39;,userInfo: {}},//事件處理函數bindViewTap: function() {wx.navigateTo({url: &＃39;../logs/logs&＃39;})},onLoad: function () {console.log(&＃39;onLoad&＃39;)var that &＃61; this//調用應用實例的方法獲取全局數據app.getUserInfo(function(userInfo){//更新數據that.setData({userInfo:userInfo})})}
})
.json后綴的文件是配置文件。愛掏網 - it200.com&＃xff08;如存在&＃xff0c;會層疊覆蓋app.json的window中相同的配置項&＃xff0c;json文件中不可以加注釋&＃xff09;
.wxss后綴的樣式表文件。愛掏網 - it200.com&＃xff08;如存在&＃xff0c;會層疊覆蓋app.wxss中的樣式規則&＃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后綴的文件是頁面結構文件。愛掏網 - it200.com
其中.js文件和.wxml文件時必需的。愛掏網 - it200.com
微信小程序中的每一個頁面的“路徑&＃43;頁面名”都需要寫在app.json的pages中&＃xff0c;且pages中的第一個頁面是小程序的首頁。愛掏網 - it200.com
轉:https://www.cnblogs.com/Strive-count/p/8983727.html