axml-loader

针对支付宝小程序 axml 文件的 webpack 加载器，支持SFC（Single File Component）。

Install

    npm i axml-loader --save-dev

推荐安装 multi-entry-plugin 自动配置多个entry

    npm i multi-entry-plugin --save-dev

Config

webpack.config.js

import MultiEntryPlugin from 'multi-entry-plugin';

export default {
  entry: {
    app: './src/app.axml'
  },
  module: {
    rules: [{
      test: /\.axml$/,
      use: [
        {
          loader: 'axml-loader'
        }
      ]
    }]
  },
  output: {
    filename: '[name].js',
    path: resolve(__dirname, '../dist')
  },
  plugins: [
      new MultiEntryPlugin({
        mainEntry: 'app'
      })
  ]
  // ...
}

SFC(单文件组件)

Example

<template>
	<view class="container">
		<view class="item"></view>
	</view>
</template>

<script type="application/json">
	{
		"usingComponents": {
			"component1": "/components1"
		}
	}
</script>

<script>
  const app = getApp();

  Page({
    onLoad() {
      console.log('onLoad')
    },

    onShow() {
      console.log('onShow')
    }
  });
</script>

<style>
	.container{
		font-size: 18px;
	}
	.item{
		width: 200Px;
	}
</style>

单文件组件分为四部分：模板（template）、配置（config）、js和样式（style），对应原生小程序单一模块的 axml 文件、json 文件、js 文件、acss 文件。

template

使用 template 标签。

| 原生写法 | 简化写法 | | ------------------------------------------------------ | ------------------------------ | | a:if="{{isShow}}" | a-if="isShow" | | a:else | a-else | | a:elif="{{isShow}}" | a-else-if="isShow" | | a:for="{{list}}" a:for-item="item" a:for-index="index" | a-for="(item, index) in list" | | a:key="key" | a-key="key" | | attr="{{data}}" | :attr="data" |

原生写法可与简化写法同时使用，不受影响。

<template>
	<view class="container">
		<view class="item" a-if="value > 3">
			>3
		</view>
		<view class="item" a-else-if="value > 2">
			>2
		</view>
		<view class="item" a-else="value > 1">
			>1
		</view>
		<view class="item" a-for="(item, index) in list" a-key="*this">
			{{index}} -> {{item}}
		</view>
	</view>
</template>

config

使用带 type="application/json" 属性的 script 标签，或使用 config 标签。

<config>
	{
		"usingComponents": {
			"component1": "/components1"
		}
	}
</config>

js

使用 script 标签，支持使用 src 属性引入文件，此时会忽略标签中的 js 代码。

<script src="./index.js">
  const app = getApp();

  Page({
    onLoad() {
      console.log('onLoad')
    },

    onShow() {
      console.log('onShow')
    }
  });
</script>

style

使用 style 标签，支持使用 sass 和 less 等语法，需要手动安装对应语法的 loader。支持使用 src 属性引入文件。

<style lang='sass'>
	.container{
		font-size: 18px;
    .item{
      width: 200Px;
    }
	}
</style>

<style lang='sass' src="./style.scss"></style>