任务六制作文章详情页

组件复用与拓展

组件的复用和拓展是两个紧密相关的概念，它们都是为了提高代码的可复用性和可维护性。组件的复用是指在不同场景下使用同一个组件的能力，而组件的拓展则是指在已有组件的基础上进行修改和扩展，从而创建一个新的组件。

组件复用

组件复用是指在不同场景下使用同一个组件的能力。在实际开发中，通常会将一些通用的组件抽象出来，例如按钮、表单、模态框等，然后在不同的页面中复用这些组件。

组件复用的实现方法可以是通过props传递数据，使用插槽、使用高阶组件或者使用Mixin等。

基本复用示例

假设我们有一个按钮组件Button，它具有以下属性：text、type和size。我们可以在不同的页面中复用这个组件。

Button组件代码如下：

<template>
  <button class="button" :class="typeClass" :style="sizeStyle">{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: String,
    type: String,
    size: String
  },
  computed: {
    typeClass() {
      return `button-${this.type}`
    },
    sizeStyle() {
      return { fontSize: this.size }
    }
  }
}
</script>

在另一个页面中使用这个组件：

<template>
  <div>
    <Button text="Primary Button" type="primary" size="16px" />
    <Button text="Secondary Button" type="secondary" size="14px" />
  </div>
</template>

<script>
import Button from '@/components/Button'

export default {
  components: {
    Button
  }
}
</script>

另外，我们也可以通过mixins实现组件选项的可复用性，比如data、components、props、created、methods等。当一个组件引用mixins时，mixins对象的选项将被混入组件本身的选项。但是这些组件无法修改掉mixins选项中的初始值，各个组件可以拿到这些值进行修改增加等操作，不会影响到其他组件引用的值。

示例

// 根目录下新建mixins文件夹，在这个文件夹下新建一个m.js文件用来存放对象并将其暴露出去
export const myMixins = {
  data() {
    return {
      name: "jack",
      age: 24
    }
  },
  props: {},
  component: {},
  created() {},
  methods: {}
}
  
// 在组件中使用import引入后使用
<script>
import { myMixins } from "@/minxins/m.js";
 
export default {
  name: "lili",
  mixins: [myMixins],
  data() {
    return {}
  },
  created() {
    console.log(this.name); // jack
    console.log(this.age); // 24
  }
}
</script>

组件拓展

组件拓展是指在已有组件的基础上进行修改和扩展，从而创建一个新的组件。通常情况下，组件的拓展可以通过继承或者组合等方式来实现。

在继承方式中，可以通过继承已有组件的方式来创建一个新的组件，并在新的组件中添加新的属性和方法。

在组合方式中，可以将已有组件作为子组件，然后在新的组件中添加新的属性和方法。

假设我们有一个表单组件Form，它包含多个输入框。我们可以在已有的Form基础上创建一个Login Form 组件，用于登录表单。

Form.vue组件代码如下：

<template>
  <form>
    <slot></slot>
  </form>
</template>

<script>
export default {
  name: 'Form'
}
</script>

在Login Form组件中，我们可以继承Form组件，并添加新的属性和方法。

LoginForm.vue组件代码如下：

<template>
  <Form>
    <input type="text" v-model="username" placeholder="Username">
    <input type="password" v-model="password" placeholder="Password">
    <button @click="login">Login</button>
  </Form>
</template>

<script>
import Form from '@/components/Form'

export default {
  name: 'LoginForm',
  extends: Form,
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // do login
    }
  }
}
</script>

在页面中使用Login Form组件：

<template>
  <div>
    <LoginForm />
  </div>
</template>

<script>
import LoginForm from '@/components/LoginForm'

export default {
  components: {
    LoginForm
  }
}
</script>

通过继承Form组件，我们可以在Login Form中复用Form组件的功能，并添加新的属性和方法。由于Login Form继承自Form，因此它具有Form的所有属性和方法，同时还可以添加自己的属性和方法。

综上所述，组件复用和拓展都是为了提高代码的可复用性和可维护性。在实际开发中，需要根据具体情况选择合适的方式来实现组件的复用和拓展。同时，在组件的设计和开发过程中需要考虑到组件的复用和拓展，从而提高组件的可扩展性和可复用性。

uni-app 跨端兼容

虽然uni-app具有跨平台的优势，但是不同平台之间还是存在一些兼容性问题，需要开发者注意。

以下是一些可能出现的跨端兼容问题及其解决方法：

样式兼容性问题：不同平台的样式支持度不同，需要开发者针对不同平台进行样式调整。可以使用平台判断工具，例如uni.getSystemInfoSync()来获取当前平台信息，并根据平台信息动态修改样式。
组件兼容性问题：不同平台支持的组件和属性不同，需要开发者注意对应组件和属性的支持情况。可以使用条件渲染或者slot来动态加载不同平台的组件。
API兼容性问题：不同平台支持的API不同，需要开发者使用条件编译来针对不同平台编写不同的API调用代码。
生命周期兼容性问题：不同平台的生命周期可能存在差异，需要开发者注意不同平台的生命周期差异并进行针对性调整。
性能兼容性问题：不同平台的性能表现不同，需要开发者注意调整性能瓶颈。

举两个常见跨端兼容问题的例子：

IOS橡皮筋回弹

使用uni-app开发页面，背景色都是统一的颜色，安卓是没有问题的，但是在IOS中上拉下拉页面时会出现橡皮筋回弹效果，问题是回弹的背景色是不一样的，比如在一个灰色的主背景下，而下拉呈现白色的背景肯定是不行的

正常情况下，如果页面的内容不多不会造成页面滑动，可以直接在pages.json里面加"disableScroll": true，这样可以直接把页面的滚动取消。如果页面内容较多不建议采用此方法，可以通过对页面添加scroll-view标签来解决。

<scroll-view scroll-y="true" class="content" :enhanced="true" :bounces="false" :show-scrollbar="false"></scroll-view>

IOS时间兼容性问题

在小程序中IOS和安卓的时间日期格式兼容也会出现问题，IOS不支持日期对象，在实例时会变成NAN。比如日期格式用“-”做分割，在小程序IOS端无法识别，导致显示异常。

let time = 2022-11-22 
//安卓可以使用
new Date(time) 
//IOS需要转换为2022/11/22
new Date(time.replace(/-/g,'/'))

总之，在进行跨平台开发时，需要开发者注意不同平台之间的兼容性问题，并采取相应的措施进行解决。同时，可以使用uni-app提供的条件编译、平台判断等功能来简化跨平台开发过程。

DOM更新回调

$nextTick() 是 Vue 提供的一个异步方法，它的作用是在 DOM 更新之后执行回调函数。在 Vue 更新 DOM 后，可能会需要访问更新后的 DOM 或者执行一些需要在 DOM 更新后才能执行的操作，这时可以使用 $nextTick() 方法来保证在 DOM 更新完成后再执行这些操作。

$nextTick() 的使用非常简单，只需要在需要在 DOM 更新后执行的回调函数中调用即可：

Vue.nextTick(function () {
  // DOM 更新后执行的回调函数
})

也可以使用 Promise 的形式来使用 $nextTick()：

Vue.nextTick().then(function () {
  // DOM 更新后执行的回调函数
})

需要注意的是，$nextTick() 方法返回的是一个 Promise 对象，如果在回调函数中使用了箭头函数，则需要使用 return 关键字返回 Promise 对象。

$nextTick() 方法的常见用途包括：

在修改数据后立即访问更新后的 DOM。
在使用 $refs 访问子组件时，保证子组件已经创建完成。
在使用第三方 UI 库时，保证 UI 库中的组件已经正确渲染。

总之，$nextTick() 是 Vue 提供的一个非常实用的方法，可以保证在 Vue 更新 DOM 后执行回调函数，解决一些在 DOM 更新后才能执行的问题。

任务六 制作文章详情页 #

组件复用与拓展 #

组件复用 #

组件拓展 #

uni-app 跨端兼容 #

DOM更新回调 #