h5端，app端，微信三端-实现三端互相分享，互相跳转

F2E_zeke

于 2025-03-14 22:55:32 发布

阅读量1.1k

点赞数 29

分类专栏： Uniapp 文章标签：微信小程序 uni-app

本文链接：https://blog.csdn.net/RD_Xiaobai/article/details/145833763

版权

Uniapp 专栏收录该内容

13 篇文章

订阅专栏

概要

这里主要讲：h5端，app端，微信客户端。之间如何进行互相分享；三端之间如何进行分享跳转。
以及如何使用技术代码去实现效果，又要注意哪些要点，避免入坑

一、h5端—>打开app端

使用微信开放标签wx-open-launch-app打开app端
所需参数：
1、appid：移动应用的AppID (必须参数)
2、extinfo：跳转所需额外信息
需要注意的是：

1. 样式设置的局限性

禁用 position 属性：在标签内部的 <template> 中，无法使用 position 属性（如 fixed 或 absolute），否则会导致样式失效。
百分比单位限制：内部元素的宽度和高度不能使用百分比单位（如 100%），需通过父容器设置具体像素值，或通过动态计算传入真实高度。
样式隔离：<template> 内的样式与外部样式隔离，无法通过外部 CSS 直接影响内部元素。需将样式直接写入 <template> 的 <style> 标签中。

2. 系统及微信版本兼容性

最低版本要求：微信需 7.0.12 及以上版本才支持 wx-open-launch-app，低版本需降级处理（例如通过外层 DIV 包裹并判断版本）。
iOS 固定定位问题：在 iOS 13 以下系统，若标签使用 position: fixed 固定在屏幕底部，滑动页面后可能出现点击无响应的问题，需改用其他定位方式或避免固定定位。
鸿蒙系统兼容性：部分鸿蒙系统（如纯血鸿蒙 Next）可能因微信 SDK 未完全适配，导致标签无法唤起 App，需关注微信 SDK 的更新。

3. 开发框架与第三方库冲突

与其他 JS-SDK 冲突：若页面同时引入其他 SDK（如字节跳动 SDK），可能导致标签不显示，需移除冲突的 SDK 或调整加载顺序。
React/Vue 适配问题：在动态渲染标签时，需确保通过 dangerouslySetInnerHTML 或类似方法正确插入 HTML 结构，并注意样式隔离问题。

4. 调试与真机适配

真机调试要求：微信开发者工具无法完全模拟开放标签行为，需在真机 HTTPS 环境下调试，建议使用 eruda.js 辅助手机端日志输出。
iOS 白名单配置：需在 iOS 应用的 Info.plist 中添加 LSApplicationQueriesSchemes 字段，声明允许跳转的 URL Scheme，否则可能无法触发跳转。

5. 样式兼容性解决方案

外层容器设置：通过外层容器设置 position: relative，并对 wx-open-launch-app 标签应用 position: absolute，覆盖在目标元素上以实现点击区域适配。
动态高度适配：若需要自适应高度，可通过 JavaScript 动态计算父容器高度，并将值转换为具体像素后传入标签内部样式。

二、h5端—>分享微信

H5端微信分享使用JS-SDK
详情请查看JS-SDK说明文档

1. 基础准备

绑定安全域名
- 登录微信公众平台，进入“公众号设置”→“功能设置”→“JS接口安全域名”，填写已备案的域名（如 example.com）。需将下载的验证文件 MP_verify_xxxx.txt 上传至域名根目录，确保可访问。
- 注意：域名需通过ICP备案，且一个月内最多修改3次。
引入微信JS-SDK文件

2. 自定义分享内容

所有参数必须为绝对URL。
分享链接需与JS安全域名一致。

3. 调试

开启 debug: true 模式查看详细错误信息。
使用微信开发者工具或真机测试（需HTTPS环境）。

4. 常见问题与解决方案

签名失败
- 检查URL是否包含#参数或动态变化（如SPA应用需在路由变化时重新签名）。
- 确认 noncestr、timestamp 与后端生成的一致。
图片不显示
- 使用HTTPS协议且图片尺寸建议为 300x300 像素。

5. 实现思路

实现思路请看我本人实践记录文章。里面包含踩坑记录以及代码实现

三、安卓端app—>分享微信

1. 前期准备

注册微信开放平台账号
前往微信开放平台注册应用，获取 AppID 和 AppSecret。
配置应用信息
- 包名（必须与 UniApp 项目的 manifest.json 中一致）
- 应用签名（使用微信提供的签名工具获取）
下载微信 SDK
下载最新的 微信 SDK，获取 libammsdk.jar 文件。

2. UniApp 项目配置

配置 manifest.json
appid 微信开放平台申请的应用appid

3. 代码实现

分享到微信好友（会话）

uni.share({
  provider: 'weixin',
  scene: 'WXSceneSession', // 微信好友场景
  type: 0, // 0-文字 1-图片 2-链接
  title: '分享标题',
  summary: '分享描述',
  href: 'https://example.com',
  imageUrl: '/static/logo.png',
  success: () => {
    console.log('分享成功');
  },
  fail: (err) => {
    console.log('分享失败:', err);
  }
});
uni.share({
  provider: 'weixin',
  scene: 'WXSceneTimeline', // 朋友圈场景
  type: 2, // 必须为链接类型
  title: '朋友圈标题',
  summary: '朋友圈描述',
  href: 'https://example.com',
  imageUrl: '/static/logo.png',
  success: () => {
    console.log('朋友圈分享成功');
  }
});

4. 注意事项（避坑指南）

缩略图大小限制
图片大小需 ≤32KB，建议使用 tinypng 压缩图片。
本地路径示例：/static/logo.png，网络图片需先下载到本地。

微信未安装处理

uni.share({
  // ...其他参数
  fail: (err) => {
    if (err.code === -100) {
      uni.showToast({ title: '未安装微信', icon: 'none' });
    }
  }
});

5. 常见问题

分享不显示图标：检查图片路径和大小，确保使用本地路径。
“未验证应用”提示：在微信开放平台完成“应用审核”。

三、IOS端app—>分享微信

1. 核心技术与流程

技术栈
- UniApp 原生插件： uni-share 。
- 微信 SDK：通过 Universal Link 实现深度链接。
- DCloud 前端托管：托管 apple-app-site-association 文件。
流程概述
配置微信开放平台 Universal Link → 托管验证文件 → UniApp 集成 → 分享功能实现 → 回调处理。

2. 详细步骤与代码

微信开放平台配置
- 设置 Universal Link
  格式：https://你的域名/路径/，需通过微信验证。
- 关联 DCloud 托管服务
  在 DCloud 托管的根目录下创建 apple-app-site-association 文件（无后缀），内容：
```
{
  "applinks": {
    "details": [
      {
        "appid": '',
        "paths": ["/uni-app/*"] // 路径需匹配 Universal Link
      }
    ]
  }
}
```
  验证：直接访问 https://你的域名/apple-app-site-association 应返回文件，且 Content-Type 为 application/json。
配置 Apple Developer
- 在 Apple Developer 中启用 Associated Domains：
- 添加 applinks:yourdomain.com（与微信配置的 Universal Link 域名一致）。

3. UniApp 项目配置

修改 manifest.json

"share": {
  "weixin": {
    "appid": "",
    "universalLink": "xxxxxxxxxxx" // DCloud 托管路径
  }
}

4. 代码实现

分享微信

uni.share({
  provider: 'weixin',
  scene: 'WXSceneSession',
  type: 2, // 必须为链接类型
  title: '分享标题',
  summary: '分享描述',
  href: 'https://example.com', // 跳转链接
  imageUrl: '/static/logo.png', // 本地图片路径
  success: () => { console.log('分享成功'); },
  fail: (err) => {
    if (err.code === -100) {
      uni.showToast({ title: '未安装微信', icon: 'none' });
    }
  }
});

监听微信回调（App.vue）

onLaunch: function() {
  uni.onAppShow((res) => {
    if (res.referrerInfo?.appId === 'wx1234567890') {
      console.log('从微信返回', res);
      // 处理回调逻辑，如跳转页面
    }
  });
}

5. 关键注意事项（避坑指南）

Universal Link 配置
- DCloud 托管路径
  - 确保 apple-app-site-association 文件在域名根目录，且路径大小写敏感。
  - 通过浏览器直接访问文件，确认返回 Content-Type: application/json，不可有重定向。
- 微信校验工具
  使用微信校验工具验证 Universal Link 是否生效。
图片处理
- 本地路径优先：iOS 要求 imageUrl 为本地路径（如 /static/logo.png）。
- 网络图片下载：必须通过 uni.downloadFile 下载到临时目录，否则分享失败。
- 格式与大小：建议 PNG/JPG，压缩至 100KB 内，避免透明底。
常见错误处理
- -100 错误：微信未安装或 Universal Link 配置错误。
- -202 错误：图片格式或大小不符，建议使用工具压缩。
- 回调不触发：检查 App.vue 中的全局监听逻辑，或尝试重启 App。
真机调试
- 必须使用真机：Universal Link 在模拟器中无法正常工作。
- 清除微信缓存：修改配置后，卸载重装微信或清除 App 数据。
- 抓包验证：用 Charles 检查 Universal Link 请求是否成功（应返回 200 状态码）。

四、DCloud 托管服务适配

HTTPS 强制要求
DCloud 默认托管服务支持 HTTPS，无需额外配置。
文件路径映射
若 Universal Link 为 https://static.dcloud.net.cn/uni-app/，需确保该路径下能访问到 apple-app-site-association 文件。
跨域问题
微信和 iOS 会严格校验文件，确保托管服务未设置跨域拦截（如 CORS 头）。