uniapp微信H5分享踩坑记录

原创 已于 2024-07-06 11:16:10 修改 · 753 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #uniapp

于 2024-07-06 11:07:54 首次发布

辣鸡微信文档

兑换access_token ：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

兑换ticket:

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

找了好几天的报错，这个type搞错了。离谱。确保type=jsapi。

npm install weixin-js-sdk

前端代码：

import weixin from 'weixin-js-sdk'

wechatShare(shareData) { 
        const sign_url = location.href.split('#')[0];
        
      //这是后端写的接口，需要用后端返回内容配置微信分享的参数
      http(api,{url:sign_url}).then((res)=>{ 
          console.log('res:',res)
          let info = res.data;
         const jsApiList=[
 

最低0.47元/天 解锁文章
linkcoco
关注
uniapp - 详细实现H5网页分享给好友和朋友圈，uniApp微信分享详解分享到微信朋友圈和微信好友功能，将当前网页分享页面转发给微信朋友或转发到朋友圈（h5网页或微信公众号接入全流程及示例源码）
🏆 前端领域优质创作者
04-11 1万+
uniapp，vue2，vue3，h5平台，H5网页端，uniapp h5 微信分享，uniapp微信公众号h5的分享好友和分享朋友圈，UniApp中实现微信分享功能：步骤详解与最佳实践，H5在微信浏览器中分享好友和朋友圈，分享链接到微信好友，显示标题和缩略图，uni-app H5分享到微信，uni-app：分享页面到微信好友和朋友圈，uniapp微信公众号h5端分享，自定义分享卡片，分享报错，分享按钮失效，如何将网页URL链接分享至微信，IOS端微信分享失效的踩坑及解决方案，H5微信分享报错，微信H5微信
Vite+Vue3+UniApp 微信分享踩坑指南 (一)
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
03-21 503
如果你用，官方文档里的配置方式是无效的，正确的做法是直接用和进行注册，避免踩坑。
uniapp 微信H5分享 下载就能用
12-15
针对uniapp 微信H5分享，我已经封装好，非常方便好用，有需要的朋友可以去下载，更多详细使用内容可以看我的博客https://blog.youkuaiyun.com/nihao123456789222/article/details/121954495
uniapp微信公众号h5端分享
章小鱼的博客
06-06 8974
uniapp微信公众号分享 好友 、朋友圈
Uniapp打包H5端实现微信分享好友、微信朋友圈
itTalmud的博客
02-12 3871
Uniapp打包H5端实现微信分享好友、微信朋友圈的需求实现重点在于细节，希望能给初次接触该需求的同学节省时间，若有疑问，欢迎留言。
weixin4j开发微信分享案例
I7show的博客
04-20 1606
微信官方文档 步骤一：绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注：登录后可在“开发者中心”查看对应的接口权限。 步骤二：引入JS文件 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js <script src="ht...
uniapp微信公众号H5分享
清音的博客
02-21 2031
如果项目文件node_modules中没有weixin-js-sdk文件，则直接使用本文章提供的；如果不生效，则在template.h5.html中引入。首先引入weixin-js-sdk。
基于IOS端微信分享失效的踩坑及解决方法
08-28
下面小编就为大家分享一篇基于IOS端微信分享失效的踩坑及解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
uniapp同步开发h5+小程序双平台踩坑记录
近10年前端开发工作经验，为你分享日常经验所得
04-23 2840
记录使用uniapp同步开发h5和小程序的坑
【uniappH5-分享】
weixin_47416539的博客
12-18 538
【代码】【uniappH5-分享】
uniapp开发微信公众号(H5)分享功能
巴博尔的学习博客
03-25 2141
【代码】uniapp开发微信公众号(H5)分享功能。
使用uni app实现H5微信分享功能
热门推荐
xy1073028328的博客
01-05 1万+
一、描述 要实现自定义微信分享功能，需要使用到微信官方提供的 js-sdk，微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包，通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。 二、准备工作 下载 HBuilderX 并安装 j...
uniapp微信公众号h5的分享好友和分享朋友圈
记录本人工作中遇到的问题、经验总结以及分享。
07-24 5334
【代码】uniapp微信公众号h5的分享好友和分享朋友圈。
uniapp h5 微信分享
HYQ_java的博客
05-31 9159
h5的分享可以区分于运行的环境，如果是在手机浏览器，则可以使用浏览器自带的分享功能。还有一种就是运行在微信端，在此我们描述的是微信端的分享。 微信jssdk开发文档 概述 | 微信开放文档 步骤一：绑定域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 备注：登录后可在“开发者中心”查看对应的接口权限。 配置的规则： ......
uniapp H5（微信公众号）分享
hang_cui的博客
03-12 879
使用updateAppMessageShareData并不会直接调起分享好友的弹层，只是相当于生成一个预分享的文案，可以在成功后提示通过右上角三个点进行分享。3.点击分享的时候需要先截取到url传给后端获取所需要的参数。首先需要用到微信JS-SDK。1.可以直接使用npm下载。2.在需要用到的页面引入。
uniapp - APP分享到微信，通过h5页面跳转至对应的app页面
Jocelyn_书
08-02 7150
从app分享到微信再到微信网页跳转至app对应页面，其中需要注意的是在微信开放平台和微信公众平台的相关配置，看配置是否成功可以在微信开发者工具里测试，把debug模式打开，就可以看到对应的日志反应是否是配置成功了的。还有各个环节的传递参数，记得存取好。uni-app中使用wx-open-launch-app-优快云博客。
uni-app开发APP和H5，分享功能
阿金的博客
01-14 686
uni-app开发APP和H5，分享功能
uniapp转H5微信、微博分享
qq_45333148的博客
05-05 1002
uniapp转H5后的微信分享、微博分享
uniapp h5微信分享
weixin_49295874的博客
09-23 367
安装微信sdk npm install jweixin-module --save var jweixin = require('jweixin-module'); var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { // console.log("微信环境") //this.getactivitys(); // 首页数据 le
uniapp webview 内嵌h5 分享到朋友圈
最新发布
06-05
<think>我们正在解决如何在UniApp中使用WebView内嵌H5页面，并实现分享到朋友圈的功能。根据引用内容，我们知道微信小程序的web-view组件本身不支持分享朋友圈（引用[1]提到“webview不支持分享朋友圈”），因此我们需要寻找替代方案。引用[1]提到利用web-view嵌入H5页面并实现右上角分享功能（但明确不支持朋友圈）。引用[3]和[4]则提到在H5页面中通过微信JS-SDK的wx.miniProgram.postMessage发送参数，小程序通过web-view的bindmessage接收参数，从而实现动态参数传递。但是，这些引用都是关于分享给朋友，而不是分享到朋友圈。然而，我们的需求是分享到朋友圈。由于微信小程序本身对分享到朋友圈有严格限制（目前只有小程序自身可以通过设置`onShareTimeline`方法实现分享到朋友圈，而web-view没有提供直接的方法），因此我们需要考虑其他思路。当前微信小程序分享到朋友圈的规则：1.只有小程序页面可以分享到朋友圈，通过Page定义中的onShareTimeline方法。2.web-view组件作为一个组件，它所在的页面也可以设置onShareTimeline，但是这个分享是分享整个小程序页面（包括web-view），而不是单独分享H5页面。如果用户需要分享的是H5页面的内容（比如标题、链接、图片等）到朋友圈，那么直接通过web-view所在页面的分享朋友圈功能是无法传递H5页面具体内容的。因此，我们需要H5页面和小程序通信，将分享所需的信息（标题、图片等）传递给小程序，然后小程序根据这些信息设置onShareTimeline的返回内容。步骤：1.在web-view嵌入的H5页面中，通过uni-app提供的UniAppJSBridge（或者微信JS-SDK的wx.miniProgram.postMessage）向小程序发送消息，消息中包含分享到朋友圈需要的参数（标题、链接、图片等）。注意：发送消息的时机可以是点击H5页面内的一个按钮，或者是页面加载完成时（根据需求）。2.在web-view组件所在的页面中，监听bindmessage事件（在uni-app中可能是通过@message），获取H5页面发送的消息。3.在web-view所在的小程序页面中，设置onShareTimeline生命周期函数，根据收到的消息动态设置分享参数。但是，这里有一个关键点：微信分享到朋友圈的链接只能是当前小程序的路径，不能跳转到H5页面。所以，我们分享出去的实际上是小程序的一个页面，这个页面需要能够还原H5页面的内容。因此，我们需要在分享的小程序页面路径上携带参数，使得当用户通过朋友圈卡片进入小程序时，能够打开对应参数的页面，并加载相应的H5链接。具体实现步骤：1.在uni-app中，web-view组件的使用：```html<web-viewsrc="https://www.example.com/h5page"@message="handleMessage"></web-view>```2.在H5页面中，通过uni-app的SDK（或微信JS-SDK）发送消息：```javascript//假设我们使用uni-app的SDK（需要引入uni-app的web-viewSDK，通常在uni-app项目中会自动注入）uni.postMessage({data:{type:'shareTimeline',title:'分享标题',path:'/pages/webview/webview?url=https%3A%2F%2Fwww.example.com%2Fh5page',//注意，这里需要是分享后用户点击进入的小程序页面，并携带参数使得能重新加载这个H5页面imageUrl:'https://www.example.com/share.jpg'}});//或者使用微信的JS-SDK（需要引入微信的jssdk）wx.miniProgram.postMessage({data:{type:'shareTimeline',title:'分享标题',path:'/pages/webview/webview?url=https%3A%2F%2Fwww.example.com%2Fh5page',imageUrl:'https://www.example.com/share.jpg'}});```注意：发送的消息中，path参数是我们希望用户从朋友圈点击进来时打开的小程序页面路径。这里需要是一个能够加载web-view的页面，并且通过url参数传递H5页面的地址。3.在小程序页面的handleMessage方法中，接收消息并存储分享参数：```javascriptdata(){return{shareInfo:{}//存储分享信息}},methods:{handleMessage(e){constdata=e.detail.data[0];//注意：可能需要根据实际数据结构调整if(data&&data.type==='shareTimeline'){//存储分享信息this.shareInfo={title:data.title,path:data.path,//这里通常是当前页面的路径并携带参数，用于用户点击后进入imageUrl:data.imageUrl};}}}```4.然后，在同一个页面中，我们需要设置onShareTimeline生命周期函数（注意：这是微信小程序的自定义分享朋友圈接口，在uni-app中需要写在页面中）：```javascript//在页面的js部分（如methods同级），添加以下生命周期函数onShareTimeline(){return{title:this.shareInfo.title,path:this.shareInfo.path,//这个path就是用户点击进入的页面路径imageUrl:this.shareInfo.imageUrl};}```5.还有一个问题：用户通过朋友圈分享的卡片进入小程序后，我们需要打开web-view页面并加载对应的H5链接。因此，我们分享的path应该是一个能够接收url参数的页面，并且该页面使用web-view加载url参数指定的页面。例如，我们的web-view页面路径为：`/pages/webview/webview`，它接收一个query参数`url`，然后：```html<template><web-view:src="h5Url"></web-view></template><script>exportdefault{data(){return{h5Url:''};},onLoad(options){if(options.url){this.h5Url=decodeURIComponent(options.url);}}};</script>```6.然而，在步骤2的H5页面中发送的消息中，path参数正是这个页面的路径，并且带上了url参数（即当前H5页面的URL）。所以，当用户点击朋友圈的卡片时，就会打开这个页面并重新加载该H5页面。7.注意：由于微信分享到朋友圈的链接不能是外部链接，只能是当前小程序页面，所以我们分享的path是一个小程序路径，它通过url参数间接指定了H5页面。8.另外，由于微信分享朋友圈的图片有大小限制（不能超过128K），所以图片需要是网络图片，且不能太大。可能遇到的坑：-web-view的@message事件在H5使用uni.postMessage或wx.miniProgram.postMessage发送消息后触发，注意发送消息的方法需要与uni-app或微信小程序兼容。-微信JS-SDK在H5页面中引入时，需要配置安全域名等，但因为我们是在小程序web-view中，所以引入的JSSDK应该是微信小程序专用的版本（1.3.2以上），并且不需要配置安全域名（因为是在小程序内部）。-注意H5页面中发送消息的格式，以及小程序端接收消息的格式（e.detail.data[0]是uni-app中的格式？实际可能需要根据打印的e来调整）。-分享朋友圈的title和imageUrl需要确保合法，否则分享可能失败。总结：我们通过H5页面将分享参数传递给小程序页面，然后利用小程序页面的onShareTimeline接口设置分享朋友圈的参数，从而实现分享到朋友圈。需要注意的是，分享出去的卡片点开进入的是小程序中承载该H5页面的页面，通过参数加载同样的H5页面。但是，这里有一个限制：分享到朋友圈的卡片只能打开小程序页面，不能直接跳转H5页面（需要通过web-view加载）。所以，用户朋友圈看到的卡片是小程序的，不是H5的。因此，实现步骤总结如下：1.创建承载web-view的小程序页面（如pages/webview/webview），它接收url参数，并在web-view中加载。2.在H5页面中，通过微信小程序JS-SDK或uni-app的SDK发送消息，告诉小程序分享所需的信息（包括分享后的小程序路径，该路径要携带url参数指向当前H5页面）。3.在web-view所在的小程序页面中，监听消息事件，将收到的分享信息存储到data中。4.在同一个页面中实现onShareTimeline生命周期函数，返回存储的分享信息。5.注意用户从朋友圈打开时，我们的小程序页面（pages/webview/webview）需要能够根据url参数重新加载H5页面。最后，需要提醒：目前微信对小程序分享到朋友圈有一定的限制（例如不能分享内容给未使用过该小程序的用户？），所以请确保符合微信的规则。关于引用：-引用[3]和[4]提到使用wx.miniProgram.postMessage和bindmessage传递参数，我们这里也使用了同样的技术。由于引用中没有直接提供分享朋友圈的方法，我们根据小程序现有的分享朋友圈接口（onShareTimeline）结合H5和小程序的通信来实现。注意：以上方法在uni-app中是否可行，还需要根据uni-app对小程序onShareTimeline的支持情况（uni-app可能对分享朋友圈有封装，也可能没有，具体看版本）。在uni-app中，我们可以使用uni.shareTimeline方法吗？目前查看uni-app官方文档，分享朋友圈的API仅支持小程序平台，且需要在小程序页面中定义onShareTimeline。所以上述方法中直接在页面中定义onShareTimeline是可行的。因此，按照上述步骤实现即可。如果遇到问题，可以检查：-H5页面是否引入了正确的SDK（微信JS-SDK），建议使用https://res.wx.qq.com/open/js/jweixin-1.3.2.js-小程序基础库版本是否支持onShareTimeline（微信基础库2.11.3以上）-在H5页面发送消息时，必须在用户交互（如点击按钮）后触发？否则可能无法发送消息（微信安全限制）代码示例：H5页面中的代码（片段）：```html<scriptsrc="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script><script>//当页面加载完成后，或者点击分享按钮时调用functionsendShareMessage(){wx.miniProgram.postMessage({data:{type:'shareTimeline',title:'我在H5页面分享到朋友圈',path:'/pages/webview/webview?url='+encodeURIComponent(location.href),imageUrl:'https://example.com/share.png'}});}//假设我们有一个分享按钮document.getElementById('shareBtn').addEventListener('click',sendShareMessage);</script>```在uni-app的web-view页面中：```html<template><web-view:src="h5Url"@message="handleMessage"></web-view></template><script>exportdefault{data(){return{h5Url:'https://www.example.com/h5page',shareInfo:{}};},methods:{handleMessage(e){//uni-app中，web-view的message事件，参数是e.detail.data（数组）constdata=e.detail.data[0];if(data&&data.type==='shareTimeline'){this.shareInfo={title:data.title,path:data.path,//这里就是用户进入的路径，已经由H5传过来了imageUrl:data.imageUrl};}}},onLoad(options){//如果是从其他页面跳转过来，比如通过分享进来的，则解析url参数if(options.url){this.h5Url=decodeURIComponent(options.url);}},onShareTimeline(){if(this.shareInfo.title&&this.shareInfo.path&&this.shareInfo.imageUrl){return{title:this.shareInfo.title,path:this.shareInfo.path,imageUrl:this.shareInfo.imageUrl};}else{//默认分享return{title:'默认标题',path:'/pages/webview/webview?url='+encodeURIComponent(this.h5Url),imageUrl:'https://example.com/default.png'};}}};</script>```注意事项：-实际使用中，发送消息的时机可能需要根据产品需求调整（比如页面加载完就发送，还是用户点击按钮再发送）。如果页面加载就发送，那么每次刷新都会发送，但用户可能并不需要分享。所以通常是用户点击分享按钮时才发送。-由于分享朋友圈的配置信息可能会变，所以需要每次用户点击分享按钮时都发送最新的分享信息。这样，我们就实现了在uni-app中通过web-view内嵌H5页面，并实现分享到朋友圈的功能。</think> 根据引用内容及微信小程序的限制，UniApp中实现WebView内嵌H5页面分享到朋友圈的功能需要采用特殊方案，具体步骤如下： ### 解决方案：通过小程序页面中转分享 由于微信小程序**WebView组件本身不支持直接分享到朋友圈**（引用[1]明确提到该限制），需要通过H5→小程序通信→中转页面实现： 1. **H5页面发送分享参数** ```javascript // 在H5页面引入微信JS-SDK 1.3.2+ wx.miniProgram.postMessage({ data: { type: 'shareTimeline', title: '分享标题', path: '/pages/share?url=' + encodeURIComponent(location.href), imageUrl: 'https://example.com/cover.jpg' } }); // [^4] ``` 2. **WebView组件监听消息** ```html <web-view src="https://your-h5-page.com" @message="handleH5Message" /> ``` 3. **小程序中转页面逻辑** ```javascript // pages/share/share.vue export default { onLoad(query) { uni.reLaunch({ url: query.url }) // 跳转回原H5页面 }, onShareTimeline() { // 朋友圈分享钩子 return { title: this.shareData.title, path: this.shareData.path, imageUrl: this.shareData.imageUrl } }, methods: { handleH5Message(e) { if(e.detail.data[0]?.type === 'shareTimeline'){ this.shareData = e.detail.data[0] uni.navigateTo({ url: '/pages/share?url=...' }) // 跳转中转页 } } } } // [^3][^4] ``` ### 关键实现原理 1. **通信机制**： - H5使用`wx.miniProgram.postMessage`发送参数 - WebView通过`@message`接收数据 - 数据传输采用`JSON.stringify`格式（引用[4]） 2. **分享流程**： ```mermaid graph TD A[H5页面点击分享] --> B[发送分享参数] B --> C[WebView捕获参数] C --> D[跳转中转页面] D --> E[触发onShareTimeline] E --> F[生成朋友圈分享卡片] ``` 3. **参数传递限制**： - 分享路径(path)必须是当前小程序页面 - 图片URL必须为网络资源（CDN地址） - 标题长度不超过40字符（微信限制） ### 注意事项 1. **域名白名单**： - H5域名需配置在`小程序后台→开发设置→业务域名` - 需下载校验文件部署到H5服务器（引用[2]） 2. **版本兼容**： - 基础库需≥2.11.3（支持`onShareTimeline`） - 使用JSSDK 1.3.2+（引用[4]） 3. **跳转限制**： - 中转页面需使用`reLaunch`重置导航栈 - URL参数需`encodeURIComponent`处理特殊字符 > **踩坑预警**：iOS设备可能需在WebView页面额外配置`onShareAppMessage`，否则分享菜单不显示（微信底层限制）。分享图片尺寸建议800×800px，文件小于128KB。 此方案通过参数转发+页面跳转规避了WebView的限制，最终实现效果是朋友圈卡片显示小程序页面信息，点击后重新加载原H5页面。 ### 相关问题 1. UniApp中如何处理WebView内的微信登录授权？ 2. WebView加载的H5页面如何调用小程序原生API？ 3. 如何避免WebView页面跳转时的白屏问题？ [^1]: 引用自WebView基础限制说明 [^2]: 微信官方文档的接口规范 [^3]: 引用自参数传递实现案例 [^4]: JSSDK通信实现原理
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值