三、WePY 文件介绍

• 三、WePY 文件介绍
  • 001 - 介绍.wpy文件的组成部分
  • 002 - .wpy 文件的使用说明
  • 003 - 小程序入口 app.wpy
  • 004 - app.wpy 全局配置小程序外观
  • 005 - 页面 .wpy 文件中 script 标签组成结构

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>

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'
}

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等，以及其它自定义的方法与属性