feat(useupdatemanager): improve iconfont, add useUpdateManager hook

Author: innocces

packages/app/src/app.config.ts

@@ -8,6 +8,7 @@ export default {
     'pages/useArrayBufferToBase64/index',
     'pages/useSystemInfo/index',
     'pages/useEvent/index',
+    'pages/useUpdateManager/index',
   ],
   window: {
     backgroundTextStyle: 'light',

packages/app/src/assets/font/iconfont.ttf

@@ -0,0 +1,26 @@
+@font-face {
+  font-family: 'iconfont';
+  src: url('../font/iconfont.ttf') format('truetype'),
+    url('../font/iconfont.woff') format('woff'),
+    url('../font/iconfont.woff2') format('woff2');
+}
+
+.iconfont {
+  font-family: 'iconfont' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.iconfont-basic:before {
+  content: '\e86e';
+}
+
+.iconfont-environment:before {
+  content: '\e60e';
+}
+
+.iconfont-wechat:before {
+  content: '\e609';
+}

packages/app/src/assets/font/iconfont.woff

@@ -1 +1,2 @@
 @import '../../app.less';
+@import '../../assets/style/icon.less';

packages/app/src/assets/font/iconfont.woff2

@@ -12,13 +12,19 @@ export const List: APIList = [
     id: 'Basic',
     title: '基础Hooks',
     content: '包含事件、调试等',
-    icon: 'filter',
+    icon: 'basic',
   },
   {
     id: 'Environment',
     title: '环境Hooks',
     content: '包含环境判断等',
-    icon: 'equalizer',
+    icon: 'environment',
+  },
+  {
+    id: 'Wechat',
+    title: '小程序Hooks',
+    content: '包含管理器、API等',
+    icon: 'wechat',
   },
 ];
 
@@ -30,14 +36,11 @@ export interface APIChildrenItem {
 export enum APIChildrenName {
   basic = 'basic',
   environment = 'environment',
+  wechat = 'wechat',
 }
 
 export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
   [APIChildrenName.basic]: [
-    {
-      id: 'useAPICheck',
-      name: 'useAPICheck 判断是否可用',
-    },
     {
       id: 'useEvent',
       name: 'useEvent 事件中心',
@@ -61,4 +64,14 @@ export const ChildrenList: { [_: string]: APIChildrenItem[] } = {
       name: 'useEnv 获取当前环境值',
     },
   ],
+  [APIChildrenName.wechat]: [
+    {
+      id: 'useAPICheck',
+      name: 'useAPICheck 判断是否可用',
+    },
+    {
+      id: 'useUpdateManager',
+      name: 'useUpdateManager 更新',
+    },
+  ],
 };

packages/app/src/assets/style/icon.less

@@ -1,4 +1,5 @@
 @import '../../app.less';
+@import '../../assets/style/icon.less';
 
 .page-index {
   padding-top: 60px;

packages/app/src/components/DocPage/index.less

@@ -49,7 +49,11 @@ const Index = () => {
             data-name={item.title}
             onClick={() => handleLocation(item.id)}
           >
-            <AtIcon value={item.icon} className="module-list__icon" />
+            <AtIcon
+              prefixClass="iconfont"
+              value={item.icon}
+              className="module-list__icon"
+            />
             <View className="module-list__info">
               <View className="title">{item.title}</View>
               <View className="content">{item.content}</View>

packages/app/src/constant/index.ts

@@ -1,5 +1,6 @@
 @import url(../../style/mixins.less);
 @import '../../app.less';
+@import '../../assets/style/icon.less';
 
 /**
  * 分类页样式

packages/app/src/pages/index/index.less

@@ -40,7 +40,11 @@ const Panel = ({}: IPanelProps) => {
   return (
     <View className="page">
       <View className="panel-header">
-        <AtIcon value={panelInfo.icon} className="panel-header__icon" />
+        <AtIcon
+          prefixClass="iconfont"
+          value={panelInfo.icon}
+          className="panel-header__icon"
+        />
         <View className="panel-header__title">{panelInfo.title}</View>
       </View>
       <View className="panel-body">

packages/app/src/pages/index/index.tsx

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useUpdateManager',
+};

packages/app/src/pages/panel/index.less

@@ -0,0 +1,49 @@
+import React, { useCallback } from 'react';
+import { AtMessage, AtNoticebar } from 'taro-ui';
+import { View } from '@tarojs/components';
+import DocPage from '../../components/DocPage';
+
+import { useEnv, useUpdateManager } from 'taro-hooks';
+import Taro, { ENV_TYPE } from '@tarojs/taro';
+
+import 'taro-ui/dist/style/components/icon.scss';
+
+export default () => {
+  const env = useEnv();
+
+  const onCheckForUpdate = useCallback((res) => {
+    Taro.atMessage({
+      message: res.hasUpdate ? '有新版本' : '无新版本',
+    });
+  }, []);
+
+  const onUpdateReady = useCallback(() => {
+    Taro.atMessage({
+      message: '检查更新成功',
+    });
+  }, []);
+
+  const onUpdateFailed = useCallback(() => {
+    Taro.atMessage({
+      message: '检查更新失败',
+    });
+  }, []);
+
+  const updateManager = useUpdateManager({
+    onCheckForUpdate,
+    onUpdateReady,
+    onUpdateFailed,
+  });
+
+  return (
+    <>
+      {env !== ENV_TYPE.WEAPP && (
+        <AtNoticebar>useUpdateManager 仅可以在小程序环境中使用</AtNoticebar>
+      )}
+      <AtMessage />
+      <DocPage title="useUpdateManager 更新" panelTitle="useUpdateManager">
+        <View>检查更新中....</View>
+      </DocPage>
+    </>
+  );
+};

packages/app/src/pages/panel/index.tsx

@@ -5,8 +5,8 @@ nav:
   path: /hooks
   order: 2
 group:
-  title: 基础
-  path: /basic
+  title: 小程序
+  path: /wechat
 ---
 
 # useAPICheck

packages/app/src/pages/useUpdateManager/index.config.ts

@@ -5,36 +5,50 @@ nav:
   path: /hooks
   order: 2
 group:
-  title: 基础
-  path: /basic
+  title: 小程序
+  path: /wechat
 ---
 
 # useUpdateManager
 
-获取当前环境值
+获取全局唯一版本更新管理器
 
 ## 何时使用
 
-当需要获取当前环境值做一些判断时
+管理小程序更新机制。
 
 ## API
 
 ```jsx | pure
-() => Taro.ENV_TYPE;
+const updateManager = useUpdateManager({
+  onCheckForUpdate,
+  onUpdateReady,
+  onUpdateFailed,
+});
+```
+
+## 入参说明
+
+```tsx | pure
+function onCheckForUpdate(res) {}
+
+function onUpdateReady() {}
+
+function onUpdateFailed() {}
 ```
 
 ## 返回值说明
 
-| 返回值 | 说明       | 类型       |
-| ------ | ---------- | ---------- |
-| env    | 当前环境值 | `ENV_TYPE` |
+| 返回值        | 说明           | 类型            |
+| ------------- | -------------- | --------------- |
+| updateManager | 更新管理器实例 | `UpdateManager` |
 
 ## 代码演示
 
-<code src="@pages/useEnv" />
+<code src="@pages/useUpdateManager" />
 
 ## Hook 支持度
 
 | 微信小程序 | H5  | ReactNative |
 | :--------: | :-: | :---------: |
-|     ✔️     | ✔️  |     ✔️      |
+|     ✔️     |     |             |

packages/app/src/pages/useUpdateManager/index.tsx

@@ -1,15 +1,10 @@
 import { ENV_TYPE, getUpdateManager, UpdateManager } from '@tarojs/taro';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import useEnv from '../useEnv';
 
-export interface Options {
-  applyUpdate: () => void;
-}
-
 export type Result = UpdateManager | {};
 
 function useUpdateManager({
-  applyUpdate,
   onCheckForUpdate,
   onUpdateReady,
   onUpdateFailed,
@@ -21,15 +16,14 @@ function useUpdateManager({
     if (env === ENV_TYPE.WEAPP) {
       const updateManagerInstance = getUpdateManager();
       addEventListener(updateManagerInstance);
-      updateManager.current = getUpdateManager();
+      updateManager.current = updateManagerInstance;
     }
-  }, []);
+  }, [env]);
 
   const addEventListener = useCallback((updateManagerInstance) => {
-    updateManagerInstance.applyUpdate = applyUpdate;
-    updateManagerInstance.onCheckForUpdate = onCheckForUpdate;
-    updateManagerInstance.onUpdateReady = onUpdateReady;
-    updateManagerInstance.onUpdateFailed = onUpdateFailed;
+    updateManagerInstance.onCheckForUpdate(onCheckForUpdate);
+    updateManagerInstance.onUpdateReady(onUpdateReady);
+    updateManagerInstance.onUpdateFailed(onUpdateFailed);
   }, []);
 
   return updateManager;