任务四 制作社区首页 #

uni-app组件化 #

什么是组件化开发？ #

组件化开发是一种将软件系统划分为多个独立模块并按照功能组合起来的开发方式。每个模块都可以独立开发、测试、部署，同时也可以被其他模块调用和重用。组件化开发可以提高代码的可复用性和可维护性，同时也能提高开发效率和协作效率。 在uni-app中，组件化开发的思想是将一个页面划分为多个组件，每个组件都有自己的生命周期、数据和方法，同时也可以被其他组件调用和重用。通过将页面拆分为多个组件，达到提高代码复用性、降低耦合度、提高可维护性、提高开发效率和协作效率的目的。

uni-app组件化开发的好处 #

uni-app是一种跨平台的开发框架，它支持将一个组件同时应用于多个平台（如微信小程序、H5、Android、iOS等），这样可以大大提高开发效率和用户体验。使用uni-app进行组件化开发，有以下几个好处：

1. 提高代码复用性：组件化开发可以将代码划分为多个独立的模块，每个模块都可以独立开发、测试、部署，同时也可以被其他模块调用和重用。这样可以避免重复编写相似的代码，提高代码复用性。
2. 提高开发效率：组件化开发可以将代码划分为多个独立的模块，每个模块都可以独立开发、测试、部署，同时也可以被其他模块调用和重用。这样可以大大提高开发效率，减少代码冗余和重复劳动。
3. 提高协作效率：组件化开发可以将代码划分为多个独立的模块，每个模块都可以独立开发、测试、部署，同时也可以被其他模块调用和重用。这样可以提高协作效率，不同开发人员可以同时开发不同的组件，不会相互影响，提高开发效率。
4. 提高用户体验：uni-app支持将一个组件同时应用于多个平台（如微信小程序、H5、Android、iOS等），这样可以大大提高用户体验，用户可以在不同的平台上享受到相似的功能和体验。

组件化开发的应用场景 #

uni-app的组件化开发可以应用于各种类型的应用程序开发，如社交、电商、新闻、音乐、游戏等。以下是一些具体的应用场景：

1. 社交应用：可以将头像、聊天框、消息提醒、分享功能等封装成独立的组件，供其他开发人员调用和重用。
2. 电商应用：可以将商品列表、购物车、订单确认、支付功能等封装成独立的组件，供其他开发人员调用和重用。

组件化应用 #

用一个例子演示下uni-app组件化，例子中包括一个计数器组件和一个页面组件。计数器组件允许用户递增或递减计数器的值，页面组件使用计数器组件并在用户单击按钮时将计数器的值发送到服务器：

Counter计数器组件：

<template>
  <view class="counter">
    <button class="btn" @click="decrement">-</button>
    <view class="value">{{ count }}</view>
    <button class="btn" @click="increment">+</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      increment() {
        this.count++
        this.$emit('change', this.count)
      },
      decrement() {
        this.count--
        this.$emit('change', this.count)
      }
    }
  }
</script>
<style scoped>
  .counter {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn {
    padding: 10px;
    font-size: 16px;
    color: #fff;
    background-color: #007aff;
    border: none;
    border-radius: 5px;
    margin: 0 10px;
  }
  .value {
    font-size: 24px;
    font-weight: bold;
  }
</style>

MyPage页面组件：

<template>
  <view class="page">
    <counter  @change="updateCounter"></counter>
    <button class="submit-btn" @click="sendData">发送</button>
  </view>
</template>
<script>
  import Counter from '@/components/Counter.vue'

  export default {
    components: {
      Counter
    },
    data() {
      return {
        counterValue: 0
      }
    },
    methods: {
      updateCounter(value) {
        this.counterValue = value
      },
      sendData() {
        // 向服务器发送数据
        console.log(this.counterValue)
      }
    }
  }
</script>
<style scoped>
  .page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .submit-btn {
    padding: 10px;
    font-size: 16px;
    color: #fff;
    background-color: #007aff;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
  }
</style>

在Counter计数器组件中，<template>部分包括一个视图容器，其中包括递增和递减按钮以及计数器的值。按钮使用@click指令将increment和decrement方法绑定到单击事件上。计数器的值使用模板语法显示，其中count是组件的数据属性。计数器的值的变化使用$emit方法触发change事件，并将计数器的值作为参数传递给父组件。

在MyPage页面组件中，<template>部分包括一个计数器组件和一个提交按钮。计数器组件使用:count属性绑定到counterValue。

easycom组件自动注册方式 #

传统vue中的组件需要安装、引用、注册，三个步骤后才能使用。通过上述例子也可以看出，组件要在哪个页面中使用需要先对组件进行引入，然后将组件的名称注册到components中。

而easycom是uni-app中的一种组件注册方式，它可以让你在使用组件时不需要显式地导入和注册组件，而是通过easycom自动化机制，自动完成组件的注册。这样做可以让开发者更加专注于业务逻辑的实现，减少组件注册的工作量。

使用easycom需要两个步骤：

1. 在pages.json或components.json中声明组件的名称和路径，以便系统能够在编译时正确地解析组件。例如：

{
  "easycom": {
    "^my-": "/components/my/"
  }
}

这里声明了一个以my-开头的组件，它们的路径是/components/my/。

2. 在组件的vue文件中，将name属性设置为/组件名，例如：

<template>
  <view class="my-component">
    <!-- 组件内容 -->
  </view>
</template>
<script>
export default {
  name: '/my-component',
  // 组件逻辑
}
</script>
<style scoped>
/* 组件样式 */
</style>

在组件vue文件中，将组件的name属性设置为/组件名，这样系统就可以自动识别组件并进行注册。在应用程序中使用该组件时，只需在模板中使用组件名称即可，无需显式导入和注册组件。

总的来说，easycom可以简化uni-app中组件的注册流程，提高开发效率。但是，如果组件数量过多，easycom会增加应用程序的启动时间，因此，如果组件数量较少，手动注册组件仍然是一个较好的选择。

uni-app uni-easyinput输入框组件 #

uni-easyinput组件是基于uni-app框架开发的一款输入框组件，其目的是为开发者提供一个更加易用、灵活、高效的输入框组件。相比于原生的输入框组件，uni-easyinput组件提供了更加丰富的功能，同时也具有更高的可定制性。

uni-easyinput组件主要包括以下功能：

1. 输入内容校验：支持设置输入内容的校验规则，如手机号码、身份证号码、邮箱地址等。
2. 输入内容清除：支持一键清除输入内容，方便用户操作。
3. 密码可见性切换：支持密码可见性切换，用户可以方便地查看或隐藏输入框中的密码内容。
4. 输入框焦点控制：支持获取或失去输入框焦点，方便控制输入框的聚焦状态。
5. 高度自适应：支持根据输入内容的高度自适应输入框的高度，提升用户的输入体验。
6. 支持v-model双向绑定：支持使用v-model进行双向数据绑定，方便实现输入框内容的读写操作。

下面通过uni-easyinput组件演示一些实际的用法：

1. 输入框带左右图标

设置prefixIcon属性来显示输入框的头部图标，设置suffixIcon属性来显示输入框的尾部图标。

注意图标当前只支持uni-icons内置的图标，当配置suffixIcon属性后，会覆盖:clearable="true"和type="password" 时的原有图标。

绑定@iconClick事件可以触发图标的点击 ，返回prefix表示点击左侧图标，返回suffix表示点击右侧图标。

<!-- 输入框头部图标 -->
<uni-easyinput prefixIcon="search" v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>

<!-- 展示输入框尾部图标 -->
<uni-easyinput suffixIcon="search"  v-model="value" placeholder="请输入内容" @iconClick="onClick"></uni-easyinput>

2. 输入框禁用

设置disable属性可以禁用输入框，此时输入框不可编辑。

<uni-easyinput disabled  v-model="value" placeholder="请输入内容"></uni-easyinput>

3. 密码框

设置 type="password" 时，输入框内容将会不可见，由实心点代替，同时输入框尾部会显示眼睛图标，点击可切换内容显示状态。

<uni-easyinput type="password" v-model="password" placeholder="请输入密码"></uni-easyinput>

4. 输入框聚焦

设置focus属性可以使输入框聚焦，如果页面存在多个设置focus属性的输入框，只有最后一个输入框的focus属性会生效。

<uni-easyinput focus v-model="password" placeholder="请输入内容"></uni-easyinput>

5. 多行文本

设置type="textarea"时可输入多行文本。

<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>

6. 多行文本自动高度

设置type="textarea"时且设置autoHeight属性，可使用多行文本的自动高度，会跟随内容调整输入框的显示高度。

<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"></uni-easyinput>

7. 取消边框

设置:inputBorder="false"时可取消输入框的边框显示，同时搭配uni-forms的:border="true"有较好的效果。

<uni-forms border>
    <uni-forms-item label="姓名">
    	<uni-easyinput :inputBorder="false" placeholder="请输入姓名"></uni-easyinput>
    </uni-forms-item>
    <uni-forms-item label="年龄">
    	<uni-easyinput :inputBorder="false" placeholder="请输入年龄"></uni-easyinput>
    </uni-forms-item>
</uni-forms>

Vue深度作用选择器 #

深度作用选择器是Vue中的一种CSS选择器，用于在组件内部样式中作用于深度嵌套的子组件。

在Vue中，组件的样式通常是通过<style scoped>标签内定义的。这样可以保证样式仅在当前组件内部生效，不会影响其他组件或全局样式。然而，有时候我们需要在组件内部样式中作用于嵌套子组件内部的DOM元素，此时普通的CSS选择器无法实现。

举个例子，在下面的代码中，我们定义了一个parent-component组件，它包含一个child-component子组件。我们想要在parent-component的样式中修改child-component内部的某个元素的样式，该如何实现呢？

<template>
  <div class="parent">
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from '@/components/ChildComponent'

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
}
</script>
<style scoped>
/* 如何在这里修改 child-component 中某个元素的样式？ */
</style>

这时，深度作用选择器就可以派上用场了。在样式选择器前加上>>>或/deep/，就可以作用于嵌套子组件内部的DOM元素了。例如，我们想要修改child-component内部的h1元素的样式，可以这样写：

<style scoped>
.parent >>> child-component h1 {
  color: red;
}
</style>

需要注意的是，深度作用选择器是一种非常特殊的选择器，它的使用应该尽量避免，只有在必要的情况下才使用。因为深度作用选择器会增加样式的复杂度，增加样式覆盖和维护的难度。如果需要作用于子组件内部的DOM元素，可以考虑使用props、event等组件通信方式，或者在子组件中通过class、style等属性传递样式信息。

uni-app页面转发 #

在uni-app中，实现页面转发功能的方式有两种：一种是使用uni.share方法，另一种是使用onShareAppMessage生命周期函数。

使用uni.share方法实现页面转发 #

uni.share方法用于唤起系统原生的分享面板，用户可以选择将当前页面分享给朋友、群组或社交媒体平台。该方法需要传入一个配置对象，包含了分享的标题、内容、链接等信息。

示例

uni.share({
  provider: 'weixin',
  type: 0,
  title: '分享标题',
  summary: '分享描述',
  href: 'https://www.example.com/share',
  imageUrl: 'https://www.example.com/share-image.jpg',
  success: function () {
    console.log('分享成功')
  },
  fail: function (err) {
    console.log('分享失败', err)
  }
})

在上面的代码中，provider指定了分享的平台，这里选择了微信；type指定了分享的类型，0表示分享网页；title和summary分别是分享的标题和描述；href是分享的链接；imageUrl是分享的封面图片。success和fail分别是分享成功和失败时的回调函数。

需要注意的是，uni.share方法只能在微信小程序中使用，其他平台需要使用平台提供的分享API实现。此外，在某些平台中，分享功能可能需要进行授权，需要在代码中添加相应的授权逻辑。

使用onShareAppMessage生命周期函数实现页面转发 #

onShareAppMessage生命周期函数会在用户点击右上角转发按钮后被调用，可以在函数内部返回一个分享信息对象，系统会将该对象作为分享的内容传递给系统原生的分享面板。

示例

export default {
  name: 'MyPage',
  onShareAppMessage: function () {
    return {
      title: '分享标题',
      path: '/pages/index/index',
      imageUrl: 'https://www.example.com/share-image.jpg'
    }
  }
}

在上面的代码中，我们在MyPage组件中定义了onShareAppMessage生命周期函数。该函数返回了一个分享信息对象，包含了分享的标题、页面路径和封面图片。

需要注意的是，onShareAppMessage生命周期函数只能在微信小程序中使用，其他平台需要使用平台提供的分享API实现。此外，在某些平台中，分享功能可能需要进行授权，需要在代码中添加相应的授权逻辑。

uni-app图片处理 #

在uni-app中，除了使用 canvas 组件进行图片处理外，还可以使用 uni.getImageInfo、uni.chooseImage、uni.previewImage、uni.saveImageToPhotosAlbum等API对图片进行处理和展示。

获取图片信息 #

使用uni.getImageInfo可以获取到图片的信息，包括图片的宽度、高度、大小等，同时也可以获取到图片的本地路径，方便在 canvas 组件中绘制该图片。

示例

uni.getImageInfo({
  src: 'https://img.yzcdn.cn/vant/cat.jpeg',
  success: (res) => {
    console.log(res.width); // 输出图片宽度
    console.log(res.height); // 输出图片高度
    console.log(res.path); // 输出图片本地路径
  },
});

选择图片 #

使用uni.chooseImage可以打开系统相册，供用户选择需要上传的图片。可以通过count参数指定最多可以选择多少张图片，也可以通过sizeType参数指定选择图片的大小类型，包括原图、压缩图等。

示例

uni.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  success: (res) => {
    console.log(res.tempFilePaths[0]); // 输出选择的图片路径
  },
});

预览图片 #

使用uni.previewImage可以预览一张或多张图片，支持手势缩放、双击放大等功能。可以通过current参数指定当前预览的图片的索引，也可以通过urls参数指定需要预览的图片数组。

示例

uni.previewImage({
  current: 0,
  urls: ['https://img.yzcdn.cn/vant/cat.jpeg'],
  success: () => {
    console.log('预览成功');
  },
});

保存图片到相册 #

使用uni.saveImageToPhotosAlbum可以将一张图片保存到手机相册中，用户可以在相册中查看保存的图片。需要注意的是，调用该API需要用户授权，需要在manifest.json文件中配置权限。

示例

uni.downloadFile({
  url: 'https://img.yzcdn.cn/vant/cat.jpeg',
  success: (res) => {
    uni.saveImageToPhotosAlbum({
      filePath: res.tempFilePath,
      success: () => {
        console.log('保存成功');
      },
      fail: () => {
        console.log('保存失败');
      },
    });
  },
});

除了上述 API 外，uni-app还提供了很多其他的图片相关API，如uni.compressImage、uni.getImageInfoSync、uni.chooseMessageFile等，可以根据实际需求进行选择。

图片上传 #

示例

<template>
  <view>
    <image :src="imageUrl" mode="aspectFit"></image>
    <button @tap="chooseImage">选择图片</button>
    <button @tap="uploadImage" :disabled="!imageUrl">上传图片</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      tempFilePath: ''
    }
  },
  methods: {
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.imageUrl = res.tempFilePaths[0]
          this.tempFilePath = res.tempFilePaths[0]
        }
      })
    },
    // 上传图片
    uploadImage() {
      uni.uploadFile({
        url: 'https://example.com/upload',
        filePath: this.tempFilePath,
        name: 'image',
        formData: {
          user: 'test'
        },
        success: (res) => {
          uni.showToast({
            title: '上传成功'
          })
        },
        fail: (res) => {
          uni.showToast({
            title: '上传失败'
          })
        }
      })
    }
  }
}
</script>

上述示例中，我们定义了一个imageUrl变量来存储用户选择的图片的路径，以及一个tempFilePath变量来存储实际上传的文件路径。在chooseImage方法中，我们使用uni.chooseImage API选择用户上传的图片，并将图片路径保存到imageUrl和tempFilePath中。

在uploadImage方法中，我们使用uni.uploadFile API将图片上传到服务器。我们需要指定url、filePath、name和formData等参数。其中，url参数表示上传的目标URL，filePath参数表示上传的文件路径，name参数表示上传文件对应的名称，formData参数表示附带的其他表单数据。

在上传成功或失败时，我们使用uni.showToast API来提示用户。这里我们只是简单地弹出一个提示框，实际应用中可以根据实际需求做出相应的处理。

uni-app moveable-area可拖动区域组件 #

moveable-area是小程序中的一个组件，可以创建一个可移动的视口，用于移动和缩放其他组件。以下是一些moveable-area组件的详细信息和示例。

属性

• scale-area：布尔型，指定是否启用缩放功能。

示例

以下是一个简单的moveable-area组件示例：

<moveable-area scale-area="true">
  <view style="width: 1000rpx; height: 1000rpx; background-color: #eee;">
    <view style="width: 200rpx; height: 200rpx; background-color: #f00;"></view>
    <view style="width: 200rpx; height: 200rpx; background-color: #0f0; margin-left: 800rpx;"></view>
    <view style="width: 200rpx; height: 200rpx; background-color: #00f; margin-top: 800rpx;"></view>
    <view style="width: 200rpx; height: 200rpx; background-color: #fff; margin-left: 800rpx; margin-top: 800rpx;"></view>
  </view>
</moveable-area>

这个示例中，我们在一个1000rpx*1000rpx的可移动区域内放置了4个颜色方块。我们启用了缩放功能，这将影响缩放操作的平滑度。用户可以通过拖动和缩放可移动区域来移动和缩放这些方块。

注意，moveable-area组件必须包含一个子组件，它将作为可移动区域的内容。在这个示例中，我们使用了一个view组件作为可移动区域的内容，并在其中放置了四个view组件作为方块。