1. mpvue框架中引入iView Weapp
mpvue是一个基于Vue.js的前端框架，主要用于开发微信小程序。在使用mpvue框架开发小程序时，需要引入iView Weapp UI库，以提高小程序的开发效率和用户体验。
引入iView Weapp的步骤如下：
1.1 安装iView Weapp
在命令行中输入以下命令进行安装：
npm install iview-weapp --save安装完成后，在项目的node_modules目录中可以找到iView Weapp的源码。
1.2 配置iView Weapp
在mpvue项目中，需要在main.js文件中引入iView Weapp并注册为全局组件。具体代码如下：
import Vue from 'vue'
import App from './App'
import 'iview-weapp/dist/weapp.css'
import iview from 'iview-weapp'
Vue.config.productionTip = false
App.mpType = 'app'
Vue.use(iview)
const app = new Vue(App)
app.$mount()
在以上代码中，首先引入了iview-weapp的样式文件和组件库，然后注册了全局组件iview，最后将App实例挂载到页面上。
2. iView Weapp组件的使用
使用iView Weapp组件的方法和使用Vue.js组件的方法基本一致。下面将介绍一些常用的组件：
2.1 Button按钮
Button组件用于生成按钮，具体代码如下：
<template>
<view>
<button type="primary" @click="onClick">Primary</button>
<button type="default">Default</button>
<button type="ghost">Ghost</button>
<button type="warn">Warn</button>
</view>
</template>
<script>
export default {
methods: {
onClick() {
console.log('click')
}
}
}
</script>
在以上代码中，使用了iView Weapp的Button组件生成了四个按钮，分别使用了不同的样式类型。点击按钮时，会触发onClick方法，控制台会输出click。
2.2 Badge标记
Badge组件用于在元素右上角添加标记，用于提示用户有新消息或新动态。具体代码如下：
<template>
<view>
<iv-badge :count="3" type="primary">
<view class="demo-badge">批量操作</view>
</iv-badge>
</view>
</template>
在以上代码中，使用了iView Weapp的Badge组件，在“批量操作”文本右上角添加了一个颜色为primary、显示数字为3的标记。
2.3 Toast提示窗口
Toast组件用于在页面弹出提示窗口，用于提示用户操作的结果。具体代码如下：
<template>
<view>
<button type="primary" @click="showToast">Show Toast</button>
</view>
</template>
<script>
export default {
methods: {
showToast() {
iview.showToast({
title: '成功',
icon: 'success',
duration: 1500
})
}
}
}
</script>
在以上代码中，使用了iView Weapp的Toast组件，点击“Show Toast”按钮时会弹出一个提示窗口，显示“成功”并附带一个绿色的勾勾icon，持续1.5秒后自动消失。
2.4 ActionSheet动作面板
ActionSheet组件用于在页面底部弹出一组动作面板，用于提供多个操作选项。具体代码如下：
<template>
<view>
<button type="default" @click="showActionSheet">Show ActionSheet</bu>ton>
</view>
</template>
<script>
export default {
methods: {
showActionSheet() {
iview.showActionSheet({
itemList: ['选项一', '选项二', '选项三'],
success: (res) => {
console.log(res.tapIndex)
}
})
}
}
}
</script>
在以上代码中，使用了iView Weapp的ActionSheet组件，点击“Show ActionSheet”按钮时会弹出一个动作面板，包含三个选项，“选项一”、“选项二”、“选项三”。当用户点击其中一个选项时，会调用success回调函数，并传入该选项的索引值。
2.5 Panel面板
Panel组件用于生成一个面板，用于展示一些信息或图片。具体代码如下：
<template>
<view>
<iv-panel>
<view slot="title">面板标题</view>
<view slot="content">
<image src="../../static/img.jpg" />
</view>
</iv-panel>
</view>
</template>
在以上代码中，使用了iView Weapp的Panel组件生成一个面板，面板的标题为“面板标题”，面板的内容为一张图片。
3. iView Weapp的样式修改
iView Weapp中的样式可以通过修改CSS文件或者覆盖组件的默认样式来进行修改。下面将介绍两种修改样式的方法：
3.1 修改CSS文件
在使用iView Weapp时，可以直接修改iView Weapp源码中的CSS文件来自定义样式。修改后的样式会应用于所有使用iView Weapp组件的地方。
在项目中找到iView Weapp的CSS文件（默认在node_modules/iview-weapp/dist/weapp.css），然后修改相应的样式即可。例如，要修改Button组件的字体大小和背景颜色，可以添加以下样式：
button.primary-button {
font-size: 16px!important;
background-color: #555!important;
}
在以上代码中，为Button组件的样式添加了一个primary-button的class，该class会覆盖组件默认的样式，从而实现自定义样式效果。
3.2 覆盖默认样式
除了修改CSS文件外，还可以在页面中对组件的默认样式进行覆盖，实现自定义样式。具体方法为在组件上添加class或style属性来修改样式。
以Button组件为例，要修改Button组件的字体大小和背景颜色，可以添加以下代码：
<iv-button class="my-button" style="background-color: #555;font-size: 16px;">自定义按钮</iv-button>在以上代码中，将Button组件的class修改为my-button，并在样式中添加了改变背景颜色和字体大小的代码。
4. 总结
本文介绍了在mpvue框架中如何引入和使用iView Weapp UI库，并详细介绍了Button按钮、Badge标记、Toast提示窗口、ActionSheet动作面板和Panel面板等常用组件的用法，同时还介绍了两种修改iView Weapp样式的方法，希望本文能够帮助到大家。