uniapp分享同时兼容H5和小程序

### 实现 UniApp 中兼容 H5 和小程序的分享功能 在 UniApp 开发中，为了实现既兼容 H5 又支持小程序的分享功能，可以通过条件编译和 API 差异处理来解决不同平台之间的差异。以下是具体的解决方案： #### 条件编译与平台适配 由于小程序和 H5 的底层机制存在较大差异，在开发过程中需要通过 `#ifdef` 进行条件编译以区分不同的运行环境。 对于 **小程序** 平台，可以利用微信或其他小程序生态提供的原生分享接口；而对于 **H5** 平台，则需依赖浏览器的能力或者第三方 SDK 提供的支持[^1]。 ```javascript // 在页面配置文件或方法中定义 shareOptions export default { onShareAppMessage(res) { // 小程序专属分享事件 return { title: '这是分享标题', path: '/pages/index/index', // 路径参数可自定义 imageUrl: '' // 自定义图片链接 }; }, methods: { handleShare() { #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO // 判断是否为小程序平台 uni.share({ provider: "weixin", // 或其他社交渠道提供商 scene: "WXSceneSession", type: 0, href: window.location.href, // 当前网页地址 title: "这是一个测试分享", summary: "这里是摘要描述", success: function () {}, fail: function (err) {} }); #endif #ifdef H5 // 如果是 H5 环境则调用浏览器能力 const url = encodeURIComponent(window.location.href); const desc = encodeURIComponent('这里是一段描述'); const img_url = encodeURIComponent('https://example.com/image.jpg'); // 图片路径 const title = encodeURIComponent('这是分享标题'); let shareUrl = ''; // 微信内置浏览器检测并跳转到微信分享协议 if (/MicroMessenger/i.test(navigator.userAgent)) { shareUrl = `weixin://sendappmsg?title=${title}&img_url=${img_url}&desc=${desc}&link=${url}`; location.href = shareUrl; } else { alert('当前环境无法完成分享操作，请尝试复制链接手动发送！'); } #endif } } }; ``` 上述代码片段展示了如何针对不同平台设置相应的分享逻辑。其中，`onShareAppMessage` 是专门为小程序设计的分享入口函数[^2]，而 H5 部分则是基于 URL 协议的方式触发分享行为。 #### 存储数据的一致性管理 考虑到跨平台的数据一致性问题，建议统一采用 `uni.setStorageSync()` 和 `uni.getStorageSync()` 替代传统的 `localStorage` 和 `sessionStorage` 方法来进行本地缓存管理。这样能够有效规避因平台间存储方式不一致带来的潜在隐患。 --- ### 注意事项 1. 对于某些特定组件（如 `van-picker`），如果发现其在某平台上表现异常，则应查阅官方文档确认是否存在已知限制，并考虑更换替代方案或调整样式属性名称（例如将 `custom-class` 改为标准 CSS 类名绑定形式）。 2. 测试阶段务必覆盖主流设备型号及其对应操作系统版本号，确保最终效果满足预期需求。 ---