我来为你详细讲解“mpvue 单文件页面配置详解”的完整攻略。

mpvue 单文件页面配置详解

1. 简介

mpvue 是一款使用 Vue.js 开发小程序的前端框架，可在小程序原生 API 基础上，结合 Vue.js 语法规范进行开发。

在 mpvue 中，我们可以通过单文件组件（SFC）的形式，实现对小程序页面的开发和配置。通过配置 SFC 的 template、script 和 style 部分，即可快速构建小程序页面。

2. 页面配置

mpvue 单文件页面的完整配置结构如下：

<template>
  <!-- 小程序页面展示内容 -->
</template>

<script>
  // 小程序页面逻辑处理
  export default {
    // 生命周期
    created () {},
    mounted () {},
    destroyed () {},
    // 数据
    data () {},
    computed: {},
    // 方法
    methods: {},
    // 组件/插件引用
    components: {},
    plugins: {},
  }
</script>

<style lang="scss" scoped>
  /* 样式配置 */
</style>

2.1 template 配置

template 部分是小程序页面的展示内容，支持使用 Vue.js 的模板语法和小程序自有的组件标签进行开发。

以下是一个示例：

<template>
  <div>
    {{ message }}
    <button @tap="onClick">按钮</button>
    <image :src="imageUrl" mode="aspectFit" />
  </div>
</template>

2.2 script 配置

script 部分是小程序页面的逻辑处理部分，通过 export default 函数，向外暴露组件的生命周期、数据、计算属性、方法和组件/插件引用等内容。

以下是一个示例：

<script>
export default {
  // 生命周期
  created () {},
  mounted () {},
  destroyed () {},
  // 数据
  data () {
    return {
      message: 'Hello, mpvue!',
      imageUrl: 'http://mpvue.com/assets/logo.png'
    }
  },
  computed: {},
  // 方法
  methods: {
    onClick () {
      console.log('按钮点击事件')
    }
  },
  // 组件/插件引用
  components: {},
  plugins: {},
}
</script>

2.3 style 配置

style 部分支持使用预处理器 Sass/less，使用 scoped 属性可以实现样式隔离的效果。

以下是一个示例：

<style lang="scss" scoped>
  .title {
    font-size: 24px;
    font-weight: bold;
  }
  .image {
    width: 100%;
    height: 200px;
  }
</style>

3. 示例说明

以下是两个使用 mpvue 单文件页面配置的示例：

3.1 示例一

template：

<template>
  <div>
    <p class="title">{{ message }}</p>
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <span>{{ index + 1 }}</span>
        <span>{{ item.title }}</span>
        <span>{{ item.content }}</span>
        <button @tap="onDelete(index)">删除</button>
      </li>
    </ul>
    <button @tap="onAdd">添加</button>
  </div>
</template>

script：

<script>
export default {
  data () {
    return {
      message: 'Todo List',
      list: [
        { id: 1, title: '任务一', content: '完成 mpvue 单文件页面配置' },
        { id: 2, title: '任务二', content: '了解 mpvue 的生命周期和数据处理' },
        { id: 3, title: '任务三', content: '掌握小程序 API 的使用' },
      ]
    }
  },
  methods: {
    onAdd () {
      const title = `任务 ${this.list.length + 1}`
      const content = '新建任务'
      const id = this.list.length + 1
      this.list.push({ id, title, content })
    },
    onDelete (index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

style：

<style lang="scss" scoped>
  .title {
    font-size: 24px;
    font-weight: bold;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #eee;
    }
  }
  button {
    background-color: #409EFF;
    color: #FFF;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
  }
</style>

3.2 示例二

template：

<template>
  <div>
    <image class="photo" :src="photoUrl" mode="aspectFill" />
    <p v-if="!userInfo">{{ loadingText }}</p>
    <div v-else>
      <p class="nickname">{{ userInfo.nickName }}</p>
      <p class="gender" :class="userInfo.gender === 1 ? 'male' : 'female'">
        {{ userInfo.gender === 1 ? '男' : '女' }}
      </p>
      <p class="city">{{ userInfo.city }} {{ userInfo.country }}</p>
    </div>
  </div>
</template>

script：

<script>
export default {
  data () {
    return {
      loadingText: '正在加载...',
      photoUrl: 'https://mpvue.com/assets/logo.png',
      userInfo: null,
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      wx.getUserInfo({
        success: (res) => {
          console.log(res.userInfo)
          this.userInfo = res.userInfo
        },
        fail: () => {
          console.log('获取用户信息失败')
        }
      })
    }
  }
}
</script>

style：

<style lang="scss" scoped>
  .photo {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    margin: 20px auto;
  }
  .nickname {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0;
  }
  .gender {
    font-size: 18px;
    margin: 10px 0;
    &.male {
      color: #009999;
    }
    &.female {
      color: #FF69B4;
    }
  }
  .city {
    font-size: 18px;
    margin: 10px 0;
  }
</style>

以上就是使用 mpvue 单文件页面配置实现小程序开发的基本攻略和示例说明。