uniapp vue3 全局分享 传参

### 如何在 UniApp 和 Vue3 中实现全局分享功能并传递参数 #### 创建全局分享的 JS 文件 为了实现在 UniApp 和 Vue3 中的全局分享功能，可以创建一个专门用于处理分享逻辑的 JavaScript 文件。以下是具体实现方式： ```javascript // ./utils/shareWx.js export default { shareConfig: { title: '默认分享标题', // 默认分享标题 path: '/pages/index/index?query=example', // 默认分享路径，带查询参数 imageUrl: '', // 分享图片链接 desc: '这是默认描述' // 默认描述 }, setShareData(data) { this.shareConfig = { ...this.shareConfig, ...data }; } }; ``` 此模块提供了 `shareConfig` 对象作为全局配置，并允许通过调用 `setShareData` 方法动态修改分享数据[^1]。 --- #### 配置全局分享方法 在 UniApp 的应用入口文件（通常是 `main.js` 或类似的初始化脚本）中引入上述模块，并设置全局分享行为： ```javascript import Share from './utils/shareWx'; const app = createSSRApp({ onLaunch() { uni.addInterceptor('shareAppMessage', (options) => { const res = options && options.res; return { title: Share.shareConfig.title, path: `${Share.shareConfig.path}${res ? `&${JSON.stringify(res).replace(/"/g, '')}` : ''}`, imageUrl: Share.shareConfig.imageUrl || '', summary: Share.shareConfig.desc }; }); } }); ``` 在此代码片段中，利用了 `uni.addInterceptor` 来拦截所有的分享事件，并返回自定义的分享内容。注意，在拼接路径时可以通过附加参数来支持更复杂的场景需求。 --- #### 页面级动态调整分享内容 如果某些页面需要特定的分享内容，则可以在对应页面生命周期函数中更新全局分享配置： ```javascript <template> <view>这是一个示例页面</view> </template> <script setup> import { onMounted } from 'vue'; import Share from '../../utils/shareWx'; onMounted(() => { Share.setShareData({ title: '来自某个特殊页面的分享', path: `/pages/specialPage/specialPage?id=${new Date().getTime()}` }); }); </script> ``` 在这个例子中，当进入某页面时会自动更新当前页面的分享内容，从而覆盖默认值。 --- #### 使用 Vue Router 进行路由跳转与参数解析 对于接收端来说，通常会在目标页面加载时读取 URL 参数以便展示相关内容。假设我们有一个详情页组件如下所示： ```javascript <template> <view>{{ queryParam }}</view> </template> <script setup> import { ref, onShow } from 'vue'; import { onLoad } from '@dcloudio/uni-app'; const queryParam = ref(''); onLoad((options) => { console.log(options); // 输出形如 {"id":"timestamp"} queryParam.value = JSON.stringify(options); }); </script> ``` 这里展示了如何捕获由分享带来的查询字符串参数，并将其显示出来[^2]。 --- #### 结合最新语法优化体验 由于采用了 Vue 3 技术栈，因此还可以充分利用 Composition API 提供的新特性简化业务逻辑编写过程。例如上面提到的 `onMounted`, `ref` 等均属于此类范畴[^3]。 ---