app文件：
1、app.js文件：在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)逛绵、聲明全局變量墙歪。
2、app.json 是對整個小程序的全局配置舍悯。我們可以在這個文件中配置小程序是由哪些頁面組成（第一個頁面就是默認(rèn)要加載的頁面）航棱，配置小程序的窗口?背景色睡雇，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題饮醇、配置tabBar等它抱。注意該文件不可添加任何注釋。
3朴艰、app.wxss 是整個小程序的公共樣式表观蓄。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。
//app.js
App({
onLaunch:function() {
// 展示本地存儲能力
varlogs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登錄
wx.login({
success: res => {
// 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
}
})
// 獲取用戶信息
wx.getSetting({
success: res => {
if(res.authSetting['scope.userInfo']) {
// 已經(jīng)授權(quán)祠墅，可以直接調(diào)用 getUserInfo 獲取頭像昵稱侮穿，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發(fā)送給后臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是網(wǎng)絡(luò)請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if(this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo:null
}
})
頁面文件：
1毁嗦、index.wxml 是頁面的結(jié)構(gòu)文件亲茅。
2、index.js 是頁面的腳本文件狗准，在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)克锣、獲取小程序?qū)嵗暶鞑⑻幚頂?shù)據(jù)腔长，響應(yīng)頁面交互事件等娶耍。
3、index.wxss 是頁面的樣式表饼酿。頁面的樣式表是非必要的榕酒。當(dāng)有頁面樣式表時，頁面的樣式表中的樣式規(guī)則會層疊覆蓋 app.wxss 中的樣式規(guī)則故俐。如果不指定頁面的樣式表想鹰，也可以在頁面的結(jié)構(gòu)文件中直接使用 app.wxss 中指定的樣式規(guī)則。
4药版、index.json是對當(dāng)前頁面的配置文件辑舷，可以配置頁面的標(biāo)題等。頁面的配置文件是非必要的槽片。當(dāng)有頁面的配置文件時何缓，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件还栓，則在該頁面直接使用 app.json 中的默認(rèn)配置碌廓。
//index.js
//獲取應(yīng)用實例
constapp = getApp()
Page({
data: {
motto:'Hello World',
userInfo: {},
hasUserInfo:false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件處理函數(shù)
bindViewTap:function() {
wx.navigateTo({
url:'../logs/logs'
})
},
onLoad:function() {
if(app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo:true
})
}elseif(this.data.canIUse){
// 由于 getUserInfo 是網(wǎng)絡(luò)請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo:true
})
}
}else{
// 在沒有 open-type=getUserInfo 版本的兼容處理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo:true
})
}
})
}
},
getUserInfo:function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo:true
})
}
})
小程序引入weui-wxss樣式：
下載地址：weui.wxss
注意：樣式文件可直接引用dist/style/weui.wxss剩盒，或者單獨(dú)引用dist/style/widget下的組件的wxss谷婆。
2.將style文件夾拷貝到小程序根目錄中，如下圖。
style目錄結(jié)構(gòu)
3.weui.wxss的引入纪挎。
方式一：在app.wxss內(nèi)或者需要的頁面引入style/weui.wxss期贫。
/**app.wxss**/@import'style.weui.wxss';
方式二：在app.wxss內(nèi)或者需要的頁面引入style/widget下的組件的wxss。
/**app.wxss---->引入button的wxss**/@import'style.widget.weui-button.weui-button.wxss';
WeUI使用的例子在目錄dist/example（與dist/style同一級目錄）异袄，這里貼出dist/example/index.wxml代碼
WeUIWeUI 是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫通砍，由微信官方設(shè)計團(tuán)隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計，令用戶的使用感知更加統(tǒng)一烤蜕。{{item.name}}{{page}}
分析以上代碼可以發(fā)現(xiàn)：
根組件使用class="page"
頁頭和主體使用class="page__xx"(注意是兩個下劃線)
其他組件采用weui-xx封孙，例如class = "weui-flex"。
{{item.name}}
組件的子組件樣式玖绿，例如weui-flex還有weui-flex__item信息。
注意：子組件樣式后面使用的兩個下劃線叁巨，"__"斑匪。
