Wxml-layout-loader NPM

wxml-layout-loader

一、简介

微信小程序wxml页面文件母版页支持loader

通过定义一个 $slot$ 占位符来设置body内容

当然可以通过设置loader.options.holder参数自定义占位符

如何附加母版页?

尝试渲染webpack搜索的所有wxml文件进行渲染
根据app.json中配置的pages与subPackages[N].pages来套用options.layout指定的wxml母版页从而过滤掉非页面的wxml文件

二、安装

npm install wxml-layout-loader --save

三、Webpack使用

layout.wxml

  <view class="layout">
      $slot$
  </view>

webpack.config.js

module.exports = {
    module:{
        loaders:[
            {
                test: /\.wxml$/,
                loader: [
                    {
                        loader: 'wxml-layout-loader',
                        options: {
                            //自定义占位符
                            holder:'$custom-body$'
                            //母版页路劲
                            layout:path.resolve('app/layout.wxml')
                            //或者
                            // layout:function(file){
                            //   return path.resolve('app/layout.wxml');
                            // }
                        }
                    }
                ]
            }
        ]
    }
}