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信息。
注意：子组件样式后面使用的两个下划线，"__"。
