Taro v4框架开发微信小程序（入口app.ts）

每一个 Taro 应用都需要一个入口组件（React 组件）用来注册应用。入口文件默认是 src 目录下的 app.ts。

在入口组件中我们可以设置全局状态或访问小程序入口实例的生命周期。

javascript 复制代码

import {PropsWithChildren, useEffect} from 'react'
import {useLaunch, useDidShow, useDidHide} from '@tarojs/taro'
import '@/app.scss'

function App({children}: PropsWithChildren<any>) {

  // 小程序初始化完成时的回调
  useLaunch(({path, scene, query, shareTicket, referrerInfo, forwardMaterials, chatType, apiCategory}) => {
    console.log(path, scene, query, shareTicket, referrerInfo, forwardMaterials, chatType, apiCategory)
    console.log('App launched.')
  })

  // 可以使用所有的 React Hooks
  useEffect(() => {
  })

  // 页面展示时的回调，对应小程序的 onShow
  useDidShow(() => {
  })

  // 页面隐藏时的回调，对应小程序的 onHide
  useDidHide(() => {
  })

  // children 是将要会渲染的页面
  return children
}

export default App

启动项目，查看效果

useLaunch

在入口组件中，我们重点关注useLaunch。

useLaunch 是 Taro框架提供的一个钩子函数（hook），主要用于监听小程序的启动。它只会在小程序初始化完成时执行一次，此时，你可以获取小程序启动时的各种参数，用于逻辑处理或统计分析。通常，你会在需要根据启动参数执行某些特定逻辑时使用 useLaunch 钩子。

这个钩子函数是小程序初始化完成时执行，它的参数是一个回调函数，在回调函数里接受8个参数，分别是：

path：启动小程序的路径
scene：启动小程序的场景值
query：启动小程序的 query 参数
shareTicket：shareTicket，详见获取更多转发信息
referrerInfo：来源信息。从另一个小程序、公众号或 App 进入小程序时返回。否则返回 {}。
- appId: string 来源小程序、公众号或 App 的 appId
- extraData: TaroGeneral.IAnyObject 来源小程序传过来的数据，scene=1037或1038时支持
forwardMaterials：打开的文件信息数组，只有从聊天素材场景打开（scene为1173）才会携带该参数
- type: string 文件的mimetype类型
- name: string 文件名
- path: string 文件路径（如果是webview则是url）
- size: number 文件大小
chatType：从微信群聊/单聊打开小程序时，chatType 表示具体微信群聊/单聊类型
- 1 微信联系人单聊
- 2 企业微信联系人单聊
- 3 普通微信群聊
- 4 企业微信互通群聊
apiCategory：API 类别
- default 默认类别
- nativeFunctionalized 原生功能化，视频号直播商品、商品橱窗等场景打开的小程序
- browseOnly 仅浏览，朋友圈快照页等场景打开的小程序
- embedded 内嵌，通过打开半屏小程序能力打开的小程序

下面是一些使用 useLaunch 的常见示例：

分析启动来源 ：小程序可能被不同的渠道或场景触发启动。使用 useLaunch 可以获取 scene 参数，用于分析用户是如何找到并打开小程序的，从而对推广渠道进行评估。
处理启动参数 ：如果你的小程序支持外部链接跳转，并且可以通过URL参数传递信息，你可以使用 useLaunch 钩子获取 query 参数，并根据参数内容定制用户的初始体验或导航到特定页面。
分享信息处理 ：当用户通过分享链接打开小程序时，可以使用 useLaunch 获取 shareTicket，进而获取更多分享信息，例如分享深度等。
小程序间跳转数据处理 ：如果用户是从另一个小程序、公众号或App跳转过来的，可以通过 referrerInfo 获取跳转来源的 appId 和携带的 extraData 数据，用以实现联动效果或提供特定服务。
场景特定数据处理 ：例如从聊天素材打开小程序时（scene 为 1173），可以通过 forwardMaterials 获取打开的文件信息。

下面是 useLaunch 钩子的使用示例：

jsx 复制代码

// App.tsx
import { useLaunch } from '@tarojs/taro';

function App() {
  useLaunch((launchOptions) => {
    // 启动参数解构
    const { path, scene, query, shareTicket, referrerInfo, forwardMaterials, chatType, apiCategory } = launchOptions;

    // 分析启动场景值
    if (scene === 1011) {
      // 来自扫码场景
    }

    // 处理分享数据
    if (shareTicket) {
      // 获取更多转发信息
    }

    // 来自其他小程序的数据处理
    if (referrerInfo && referrerInfo.appId) {
      // 根据来源小程序的 appId 做逻辑处理
    }

    // 文件信息处理
    if (scene === 1173 && forwardMaterials) {
      // 处理聊天素材场景下的文件信息
    }

    // 编写其他你需要在启动时执行的逻辑
  });

  // ...
}

最后注意，我们要学会使用 Ctrl+鼠标左键 点击的方式查看TypeScript类型声明文件，可以提高开发效率，节省查阅文档所消耗的时间。