自己YY,写了一个微信小程序hooks

168 阅读1分钟

用过uni-app开发小程序的好处,一套开发多端统一,不好呢,就是包相比挺大,由于是微信小程序限定2MB,怎么解决这个问题?uni-app、taro都是对代码通过babel转换得到原始小程序,随着代码内容越多转换的成本也相比越多。能否逻辑成本(JS)采用hooks写法

查看效果

2023-07-18 11.24.35.gif

一个简单响应式数据、计算属性,和常量展示

查看代码

// index.ts
import { Page, computed, ref } from "../../utils/vue3";

function useClick() {
  const count = ref(0);
  const handleClick = () => {
    count.value++;
  };

  return { count, handleClick };
}

Page(() => {
  const { count, handleClick } = useClick();
  const b = computed(() => count.value + 1)
  const c = 123;

  return {
    count,
    b,
    c,
    handleClick,
  };
});
<!--index.wxml-->
<view class="container">
  <view bind:tap="handleClick">count: {{count}}</view>
  <view>coumputed: {{b}}</view>
  <view>coust: {{c}}</view>
</view>

查看包大小

image.png