xp-mnui

基于wepy的微信小程序UI组件库，wepy组件解决方案

安装

npm i -g xp-mnui

使用

xp-mnui安装完毕后，会生成mnui命令

mnui

查看mnui命令行支持功能

mnui ls

查看mnui现有的组件列表

mnui add 组件名

安装对应的组件，支持xp-mnui组件和第三方组件，以顶部提示为例：mnui add toptips

wepy组件使用（以toptips为例）

• 引入组件

<template>
  <toptips></toptips>
</template>

<script>
import wepy from 'wepy'
import toptips from 'xp-mnui-toptips'

export default class Index extends wepy.page {
  components = {
    toptips，
  }
}
</script>

• 调用组件

this.$invoke('toptips', 'show', { // 参数
  text: '调用成功',
})
.then((res) => {
  console.log('done')
})
.catch((err) => {
  console.log('error')
})

• 参数
  • text （显示的文字）
  • duration （持续时间，默认1500毫秒）

第三方组件（欢迎PR）

• PR步骤
  1. 将你的组件发布到npm
  2. 编辑 components.json ，添加一条记录：key为你的npm包名字，value为你的npm包的描述
• 注意：xp-mnui的组件必须是在wepy的小程序框架下的，所以必须满足以下条件：
  1. package.json 中的 main 字段必须是 .wpy 结尾。
  2. <template></template> <script></script> <style></style> 标签中不要import相对路径的文件；避免使用 lang 属性，举个例子：<style lang="scss"> 在使用less编译器的小程序的项目会报错。