单文件说明

任意一个 .wxa.wxp.wxc 文件可分为三大部分,各自对应于一个标签:

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

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

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

style 支持 lang 属性,lang 决定了其代码编译过程,对应的lang值是 lesspcss

.wxa文件说明

wxa 是 weixin app 的缩写,.wxa 是微信小程序app实例的文件后缀名

<template>
  <view>
    <view>Header</view>
    <page></page>
    <view>Footer</view>
  </view>
</template>

<script>
  export default {
    config: { ... },
    properties: { ... },
    data: { ... }
  }
</script>

<style>
</style>

.wxp文件说明

wxp 是 weixin page 的缩写,.wxp 是微信小程序page页面的文件后缀名

<template>
  <view class="page"></view>
</template>

<script>
  export default {
    config: { ... },
    properties: { ... },
    data: { ... }
  }
</script>

<style>
  .page { }
</style>

.wxc文件说明

wxc 是 weixin component 的缩写,.wxc 是微信小程序自定义组件的文件后缀名。

<template>
  <view class="toast"></view>
</template>

<script>
  export default {
    config: { ... },
    properties: { ... },
    data: { ... }
  }
</script>

<style>
  .toast { }
</style>