# 三、WePY 文件介绍
# 001 - 介绍.wpy文件的组成部分
- 一个 .wpy 文件可分为三大部分，各自对应于一个标签：
- 脚本部分，即
<script></script>标签中的内容，又可分为两个部分：- 逻辑部分，除了
config对象之外的部分，对应于原生的.js文件 - 配置部分，即
config对象，对应于原生的.json文件
- 逻辑部分，除了
- 结构部分，即
<template></template>模板部分，对应于原生的.wxml文件。 - 样式部分，即
<style></style>样式部分，对应于原生的.wxss文件。
- 脚本部分，即
- 其中，小程序入口文件
app.wpy不需要template，所以编译时会被忽略。
# 002 - .wpy 文件的使用说明
.wpy文件中的script、template、style这三个标签都支持lang和src属性，lang决定了其代码编译过程，src决定是否外联代码，存在src属性且有效时，会忽略内联代码。
- 语法属性
| 标签 | lang默认值 | lang支持值 |
|---|---|---|
| style | css | css、less、scss、stylus、postcss |
| template | wxml | wxml、xml、pug(原jade) |
| script | babel | babel、TypeScript |
- 案例代码
<style lang="less" src="page1.less"></style>
<template lang="wxml" src="page1.wxml"></template>
<script>
// some code
</script>
1
2
3
4
5
2
3
4
5
# 003 - 小程序入口 app.wpy
入口文件
app.wpy中所声明的小程序实例继承自wepy.app类，包含一个config属性和其它全局属性、方法、事件。
config属性会被编译为小程序的app.json全局配置文件；config属性之外的其它节点，会被编译为小程序的app.js文件；- style 标签会被编译为小程序的
app.wxss全局样式；
# 004 - app.wpy 全局配置小程序外观
在小程序的入口文件中找到 window 节点：
app.wpy->script标签 ->config->window即可全局配置小程序的外观
window: {
backgroundTextStyle: 'dark',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: '小程序电商项目',
navigationBarTextStyle: 'black'
}
1
2
3
4
5
6
2
3
4
5
6
# 005 - 页面 .wpy 文件中 script 标签组成结构
页面文件
page.wpy中所声明的页面实例继承自wepy.page类
| 属性 | 说明 |
|---|---|
| config | 页面配置对象，对应于原生的page.json文件，类似于app.wpy中的config |
| components | 页面组件列表对象，声明页面所引入的组件列表 |
| data | 页面渲染数据对象，存放可用于页面模板绑定的渲染数据 |
| methods | wxml事件处理函数对象，存放响应wxml中所捕获到的事件的函数，如bindtap、bindchange |
| events | WePY组件事件处理函数对象，存放响应组件之间通过$broadcast、$emit、$invoke所传递的事件的函数 |
| 其它 | 小程序页面生命周期函数，如onLoad、onReady等，以及其它自定义的方法与属性 |