chore(deps): upgrade

Author: sonofmagic

apps/vite-native-ts-skyline/miniprogram/app.ts

@@ -1,18 +1,18 @@
-// app.ts
-App<IAppOption>({
+import { createApp, onLaunch } from 'wevu'
+
+createApp({
   globalData: {},
-  onLaunch() {
-    // 展示本地存储能力
-    const logs = wx.getStorageSync('logs') || []
-    logs.unshift(Date.now())
-    wx.setStorageSync('logs', logs)
+  setup() {
+    onLaunch(() => {
+      const logs: number[] = wx.getStorageSync('logs') || []
+      logs.unshift(Date.now())
+      wx.setStorageSync('logs', logs)
 
-    // 登录
-    wx.login({
-      success: (res) => {
-        console.log(res.code)
-        // 发送 res.code 到后台换取 openId, sessionKey, unionId
-      },
+      wx.login({
+        success: (res) => {
+          console.log(res.code)
+        },
+      })
     })
   },
 })

apps/vite-native-ts-skyline/miniprogram/components/skyline-navbar/index.ts

@@ -1,8 +1,6 @@
-type TrendPoint = number
+import { defineComponent, onMounted, onUnmounted, ref, watch } from 'wevu'
 
-interface SkylineNavbarInstance extends WechatMiniprogram.Component.TrivialInstance {
-  __timer?: number
-}
+type TrendPoint = number
 
 const defaultTrend: TrendPoint[] = [42, 68, 54, 92, 78, 118, 88]
 
@@ -13,7 +11,7 @@ function formatTime() {
   return `${hours}:${minutes}`
 }
 
-Component({
+export default defineComponent({
   options: {
     addGlobalClass: true,
   },
@@ -35,61 +33,59 @@ Component({
       value: defaultTrend,
     },
   },
-  data: {
-    currentTime: formatTime(),
-    trendBars: [] as Array<{ height: number, label: string }>,
-  },
-  lifetimes: {
-    attached() {
-      this.updateTime()
-      this.updateTrend(this.properties.trend as TrendPoint[])
-      ;(this as SkylineNavbarInstance).__timer = setInterval(() => {
-        this.updateTime()
-      }, 60000) as unknown as number
-    },
-    detached() {
-      const instance = this as SkylineNavbarInstance
-      if (typeof instance.__timer === 'number') {
-        clearInterval(instance.__timer)
-        delete instance.__timer
-      }
-    },
-  },
-  observers: {
-    trend(value: TrendPoint[]) {
-      this.updateTrend(value)
-    },
-  },
-  methods: {
-    updateTime() {
-      this.setData({
-        currentTime: formatTime(),
-      })
-    },
-    updateTrend(trend: TrendPoint[]) {
+  setup(props, ctx) {
+    const currentTime = ref(formatTime())
+    const trendBars = ref<Array<{ height: number, label: string }>>([])
+
+    let timer: number | undefined
+
+    function updateTime() {
+      currentTime.value = formatTime()
+    }
+
+    function updateTrend(trend: TrendPoint[]) {
       if (!Array.isArray(trend) || trend.length === 0) {
-        this.setData({ trendBars: [] })
+        trendBars.value = []
         return
       }
 
       const max = Math.max(...trend)
       const min = Math.min(...trend)
       const range = Math.max(max - min, 1)
 
-      const normalized = trend.map((value, index) => {
+      trendBars.value = trend.map((value, index) => {
         const height = Math.round(((value - min) / range) * 55 + 45)
         return {
           height,
           label: `T${index + 1}`,
         }
       })
+    }
 
-      this.setData({
-        trendBars: normalized,
-      })
-    },
-    handlePrimaryTap() {
-      this.triggerEvent('primarytap')
-    },
+    watch(
+      () => props.trend as TrendPoint[],
+      (value) => updateTrend(value),
+      { immediate: true, deep: true },
+    )
+
+    onMounted(() => {
+      updateTime()
+      timer = setInterval(updateTime, 60000)
+    })
+
+    onUnmounted(() => {
+      if (timer != null) clearInterval(timer)
+      timer = undefined
+    })
+
+    function handlePrimaryTap() {
+      ctx.emit('primarytap')
+    }
+
+    return {
+      currentTime,
+      trendBars,
+      handlePrimaryTap,
+    }
   },
 })

apps/vite-native-ts-skyline/miniprogram/pages/index/index.ts

@@ -1,63 +1,85 @@
-// index.ts
-// 获取应用实例
+import { defineComponent, reactive, ref } from 'wevu'
 
-Component({
-  data: {
-    motto: 'Hello World',
-    userInfo: {
+const defaultAvatarUrl =
+  'https://mmbiz.qpic.cn/mmbiz/vi_32/Q0j4TwGTfTJLTpJ5dD6Y3vR0pu2Lx5D3w1lUwLrZ7NCyKz1q8I4xA86c1k3apwFVB9C7bPBCn2iYg4JibL0z0icA/0'
+
+interface UserInfo {
+  nickName: string
+  avatarUrl: string
+}
+
+export default defineComponent({
+  setup() {
+    const motto = ref('Hello World')
+    const userInfo = reactive<UserInfo>({
       nickName: '',
-    },
-    hasUserInfo: false,
-    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
-    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
-    skylineNav: {
+      avatarUrl: defaultAvatarUrl,
+    })
+    const hasUserInfo = ref(false)
+    const canIUseGetUserProfile = wx.canIUse('getUserProfile')
+    const canIUseNicknameComp = wx.canIUse('input.type.nickname')
+    const skylineNav = reactive({
       title: 'Skyline Market',
       location: '深圳 · 夜景塔群',
       weather: '晴 · 26°C',
-      trend: [48, 76, 58, 102, 96, 132, 118],
-    },
-  },
-  methods: {
-    // 事件处理函数
-    bindViewTap() {
+      trend: [48, 76, 58, 102, 96, 132, 118] as number[],
+    })
+
+    function syncHasUserInfo() {
+      hasUserInfo.value = Boolean(
+        userInfo.nickName
+          && userInfo.avatarUrl
+          && userInfo.avatarUrl !== defaultAvatarUrl,
+      )
+    }
+
+    function bindViewTap() {
       wx.navigateTo({
         url: '../logs/logs',
       })
-    },
-    onChooseAvatar(e: any) {
+    }
+
+    function onChooseAvatar(e: any) {
       const { avatarUrl } = e.detail
-      const { nickName } = this.data.userInfo
-      this.setData({
-        'userInfo.avatarUrl': avatarUrl,
-        'hasUserInfo': nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
-      })
-    },
-    onInputChange(e: any) {
-      const nickName = e.detail.value
-      const { avatarUrl } = this.data.userInfo
-      this.setData({
-        'userInfo.nickName': nickName,
-        'hasUserInfo': nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
-      })
-    },
-    handleNavAction() {
+      userInfo.avatarUrl = avatarUrl
+      syncHasUserInfo()
+    }
+
+    function onInputChange(e: any) {
+      userInfo.nickName = e.detail.value
+      syncHasUserInfo()
+    }
+
+    function handleNavAction() {
       wx.showToast({
         title: '更多趋势即将上线',
         icon: 'none',
       })
-    },
-    getUserProfile() {
-      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
+    }
+
+    function getUserProfile() {
       wx.getUserProfile({
-        desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+        desc: '展示用户信息',
         success: (res) => {
           console.log(res)
-          this.setData({
-            userInfo: res.userInfo,
-            hasUserInfo: true,
-          })
+          Object.assign(userInfo, res.userInfo)
+          syncHasUserInfo()
         },
       })
-    },
+    }
+
+    return {
+      motto,
+      userInfo,
+      hasUserInfo,
+      canIUseGetUserProfile,
+      canIUseNicknameComp,
+      skylineNav,
+      bindViewTap,
+      onChooseAvatar,
+      onInputChange,
+      handleNavAction,
+      getUserProfile,
+    }
   },
 })

apps/vite-native-ts-skyline/package.json

@@ -23,6 +23,9 @@
     "build-npm": "weapp-vite build-npm",
     "postinstall": "weapp-tw patch"
   },
+  "dependencies": {
+    "wevu": "^1.0.1"
+  },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.0",
     "@iconify-json/mdi": "^1.2.3",