兼容旧代码，Vue3+TS+Sass微信小程序开发的正确打开方式

前端

2024-01-15 10:43:24

使用 Vue3+TS+Sass 构建高效的微信小程序

简介

随着 Vue3 的发布，越来越多的开发者开始将其用于开发微信小程序。本教程将引导你使用 Vue3、TypeScript 和 Sass 开发高效、可维护的微信小程序，并解决与 Vue2 兼容性的问题。

背景

在最近的一个项目中，我们使用了 uni-app 框架，它支持同时开发 iOS 和 Android 平台的小程序。由于 Vue3 提供了强大的功能和简洁的语法，我们决定采用它。

自定义 Picker

原生微信小程序不支持自定义 picker，但对于实现特殊功能至关重要。因此，我们着手开发自己的自定义 picker。

步骤指南

创建一个 Vue 组件
添加组件模板
添加组件脚本
在组件样式中添加样式
注册组件到全局
在小程序模板中使用组件
在小程序脚本中使用组件

代码示例

组件模板：

<template>
  <view class="picker">
    <view class="picker-header">
      <slot name="header"></slot>
    </view>
    <view class="picker-body">
      <slot name="body"></slot>
    </view>
    <view class="picker-footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

组件脚本：

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'Picker',
  props: {
    title: {
      type: String,
      default: '',
    },
    columns: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    value: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    onChange: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      currentValue: this.value,
    };
  },
  methods: {
    changeValue(value) {
      this.currentValue = value;
      this.$emit('change', value);
    },
  },
});