miniapp-loader

miniprogram-loader

Mini Program single-file component loader for Webpack

Install

npm install miniprogram-loader --save-dev

Usage (e.g wechat)

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.kico$/,
        loader: 'miniprogram-loader',
        options: {
          htmlExt: 'wxml',
          cssExt: 'wxss',
          jsExt: 'js'
        }
      }
    ]
  }
}

single-file component

<template lang="pug">
  view.container
    view.userinfo
      button(wx:if="{{!hasUserInfo}}" open-type="getUserInfo") 获取头像昵称
      block(wx:else)
        text.userinfo-nickname {{userInfo.nickName}}
    view.usermotto
      text.user-motto {{motto}}
</template>

<script>
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
})

</script>
<style lang="scss">
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  h2 {
    background: red;
  }
}
</style>