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
; entry: app: './src/app.axml' module: rules: test: /\.axml$/ use: loader: 'axml-loader' output: filename: '[name].js' path: plugins: mainEntry: 'app' // ...
SFC(单文件组件)
Example
单文件组件分为四部分:模板(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" |
原生写法可与简化写法同时使用,不受影响。
>3 >2 >1 {{index}} -> {{item}}
config
使用带 type="application/json" 属性的 script 标签,或使用 config 标签。
{ "usingComponents": { "component1": "/components1" } }
js
使用 script 标签,支持使用 src 属性引入文件,此时会忽略标签中的 js 代码。
style
使用 style 标签,支持使用 sass 和 less 等语法,需要手动安装对应语法的 loader。支持使用 src 属性引入文件。