app文件：

1.app。js文件：在这个文件中，侦听和处理小程序的生命周期函数，并声明全局变量。

2.app。json是整个applet的全局配置。在这个文件中，我们可以配置小程序由哪些页面组成（第一页是要加载的默认页面）、小程序窗口的背景色、导航栏样式、默认标题和选项卡栏。请注意，此文件中不能添加任何注释。

3.app。wxss是整个applet的通用样式表。我们可以直接使用app中声明的样式规则。页面组件的class属性上的wxss。

//app.js

app({

onLaunch:函数（）{

//演示本地存储功能

varlogs=wx。getStorageSync（“日志”）||[]

logs.unshift（日期.now（））

wx。setStorageSync（“日志”，日志）

//登录

wx.登录({

成功：res=>{

//将res.code发送到后台以交换openId、sessionKey、unionId

}

})

//获取用户信息

wx.get设置({

成功：res=>{

if（res.authSetting['scope.userInfo']）{

//它已获得授权。你可以直接调用getUserInfo获取头像的昵称，框架不会弹出

wx.获取用户信息({

成功：res=>{

//您可以向后台发送res以解码unionId

this.global数据。userInfo=资源用户信息

//因为getUserInfo是一个网络请求，它可能会在Page.onLoad之后返回

//所以在这里添加回调以防止这种情况

if（this.userInfoReadyCallback）{

this.userInfoReadyCallback（res）

}

}

})

}

}

})

},

全局数据：{

用户信息：空

}

})

页面文件：

1.指数。wxml是页面的结构文件。

2.索引。js是页面的脚本文件。在这个文件中，我们可以侦听和处理页面的生命周期函数，获取小程序实例，声明和处理数据，以及响应页面交互事件。

3.索引。wxss是页面的样式表。页面的样式表是不必要的。当存在页面样式表时，页面样式表中的样式规则将覆盖app.wxss中的样式。如果不指定页面的样式表，也可以直接使用app中指定的样式规则。页面结构文件中的wxss。

4.索引。json是当前页面的配置文件。您可以配置页面标题等。页面的配置文件是不必要的。当页面有配置文件时，该页面中的配置项将覆盖app.json窗口中的相同配置项。如果没有指定的页面配置文件，则app中的默认配置。json将直接用于此页面。

//索引.js

//获取app实例

constapp=获取app（）

第页({

数据：{

座右铭：“Hello World”，

用户信息：｛｝，

hasUserInfo:false，

canIUse:wx.canIUse（'按钮.open-type.getUserInfo'）

},

//事件处理功能

bindViewTap:函数（）{

wx.导航到({

url:“../logs/logs”

})

},

onLoad:函数（）{

if（app.globalData.userInfo）{

this.set数据({

用户信息：app.globalData.userInfo，

hasUserInfo:真

})

}elseif（this.data.canIUse）{

//因为getUserInfo是一个网络请求，它可能会在Page.onLoad之后返回

//所以在这里添加回调以防止这种情况

app。userInfoReadyCallback=res=>{

this.set数据({

用户信息：res.userInfo，

hasUserInfo:真

})

}

}其他{

//打开类型=getUserInfo版本没有兼容的处理

wx.获取用户信息({

成功：res=>{

app全局数据。userInfo=资源用户信息

this.set数据({

用户信息：res.userInfo，

hasUserInfo:真

})

}

})

}

},

getUserInfo:函数（e）{

控制台.log（e）

app全局数据。userInfo=e.detail.userInfo

this.set数据({

用户信息：e.detail.userInfo，

hasUserInfo:真

})

}

})

小程序引入了weui-wxss样式：

下载地址：

注意：样式文件可以直接引用dist/style/weui。wxs，或者单独引用dist/style/widget下组件的wxs。

2.将样式文件夹复制到小程序的根目录，如下所示。

样式目录结构

3.weui.wxss的介绍。

方法1：介绍style/weui。app中的wxss。wxss或所需页面。

/**app.wxss**/@import'style.weui.wxss'；

方法2：在app中的style/widget下导入组件的wxs。wxss或所需页面。

/**app。wxss--->wxss**/@import'样式。小装置。weui按钮。weui按钮。wxss'；

WeUI使用的示例位于目录dist/example（与dist/style级别相同）中，其中dist/exmple/index。wxml代码已发布

WeUIWeUI是一套符合微信原生视觉体验的基本样式库，由微信官方设计团队为微信内部页面和微信小程序设计，以使用户的使用感知更加统一。｛｛item.name｝｝｛{page｝｝

通过分析上述代码，我们可以发现：

根组件使用class=“page”

Class=“page__xx”用于标题和正文（注意有两个下划线）

其他组件采用weui-xx，如class=“weui-flex”。

｛｛item.name｝｝

组件的子组件样式，如weui flex和weui flex_Item信息。

注：后面使用了两个下划线“__”