WePY .wpy文件的组成部分

一个.wpy文件可分为三大部分,各自对应于一个标签:

脚本部分,即<script></script>标签中的内容,又可分为两个部分:

             逻辑部分,除了config对象之外的部分,对应于原生的.js文件;

    配置部分,即config对象,对应于原生的.json文件。

结构部分,即<template></template>模板部分,对应于原生的.wxml文件。

样式部分,即<style></style>样式部分,对应于原生的.wxss文件。

其中,小程序入口文件app.wpy不需要template,所以编译时会被忽略。

.wpy文件中的script、template、style这三个标签都支持langsrc属性,lang决定了其代码编译过程,src决定是否外联代码,存在src属性且有效时,会忽略内联代码。

WePY .wpy文件的编译过程过下:

例如: index.wpy
style->编译器编译注入依赖->index.wxss
template->编译器编译遍历插件注入依赖变量替换->index.wxml
Script->拆解->编译器编译->index.js和index.json
最后通过插件处理(plugins)->对应生成(index.wxss、index.wxml、index.js、index.json)小程序文件

.wpy文件的代码缩写如下:

<style lang="less">
  ......省略
</style>
<template>
  ......省略
</template>

<script>
  import wepy from '@wepy/core'
  import eventHub from '../common/eventHub';
  import { mapState } from '@wepy/x';
  import store from '../store';
  import testMixin from '../mixins/test'
......省略
</script>
<config>
{
    navigationBarTitleText: 'WePY 2.0 Feature Demo',
    usingComponents: {
      panel: '~@/components/panel',
      counter: '~counter',
      list: '../components/list',
      group: '../components/group',
      "slide-view": "module:miniprogram-slide-view",
    }
}
</config>

lang 和src属性

.wpy文件中的script、template、style这三个标签都支持lang和src属性,lang决定了其代码编译过程,src决定是否外联代码,存在src属性且有效时,会忽略内联代码。

各标签对应的 lang值如下表所示:

标签 lang默认值 lang支持值
style css css、less、scss、stylus、postcss
template wxml wxml、xml、pug(原jade)
script babel babel、TypeScript