app文件：
1、app.js文件：在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。
2、app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成（第一個頁面就是默認要加載的頁面），配置小程序的窗口?背景色，配置導航條樣式，配置默認標題、配置tabBar等。注意該文件不可添加任何注釋。
3、app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。
//app.js
App({
onLaunch:function() {
// 展示本地存儲能力
varlogs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登錄
wx.login({
success: res => {
// 發送 res.code 到后臺換取 openId, sessionKey, unionId
}
})
// 獲取用戶信息
wx.getSetting({
success: res => {
if(res.authSetting['scope.userInfo']) {
// 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發送給后臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if(this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo:null
}
})
頁面文件：
1、index.wxml 是頁面的結構文件。
2、index.js 是頁面的腳本文件，在這個文件中我們可以監聽并處理頁面的生命周期函數、獲取小程序實例，聲明并處理數據，響應頁面交互事件等。
3、index.wxss 是頁面的樣式表。頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規則。
4、index.json是對當前頁面的配置文件，可以配置頁面的標題等。頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。
//index.js
//獲取應用實例
constapp = getApp()
Page({
data: {
motto:'Hello World',
userInfo: {},
hasUserInfo:false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
//事件處理函數
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 是網絡請求，可能會在 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，或者單獨引用dist/style/widget下的組件的wxss。
2.將style文件夾拷貝到小程序根目錄中，如下圖。
style目錄結構
3.weui.wxss的引入。
方式一：在app.wxss內或者需要的頁面引入style/weui.wxss。
/**app.wxss**/@import'style.weui.wxss';
方式二：在app.wxss內或者需要的頁面引入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 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。{{item.name}}{{page}}
分析以上代碼可以發現：
根組件使用class="page"
頁頭和主體使用class="page__xx"(注意是兩個下劃線)
其他組件采用weui-xx，例如class = "weui-flex"。
{{item.name}}
組件的子組件樣式，例如weui-flex還有weui-flex__item信息。
注意：子組件樣式后面使用的兩個下劃線，"__"。
