记一次活动分享,用JSSDK.php,显示指定图片和文本

本文详细介绍了如何在后端配置JSSDK并验证签名,以及在前端使用JS-SDK实现微信分享功能的过程。包括了常见错误排查,如缺少'}

在后端配置好JSSDK.php后,检查验签是否正确

注意:验签信息是否完整和一致

<?php
        $jssdk = new JSSDK();
		$signPackage = $jssdk->GetSignPackage();
		$this->assign('signPackage',$signPackage);

?>

然后在前端的的js中调用

<script type="text/javascript">
wx.config({
    debug: false, // 调试模式
    appId: '{$signPackage["appId"]}', // 必填,公众号的唯一标识
    timestamp: {$signPackage["timestamp"]}, // 必填,生成签名的时间戳
    nonceStr: '{$signPackage["nonceStr"]}', // 必填,生成签名的随机串
    signature: '{$signPackage["signature"]}',// 必填,签名
    jsApiList : [  
        // 所有要调用的 API 都要加到这个列表中  
        'onMenuShareTimeline',       // 分享到朋友圈接口  
        'onMenuShareAppMessage',  //  分享到朋友接口  
    ]  
});

wx.ready(function(){
   // 微信分享的数据  
    var shareData = {  
        "imgUrl" : 'http://域名/weixinapp/public/static/img/sharelogo.jpg',// 分享显示的缩略图地址
        "link" : 'http://域名/weixinapp/public/.....',    // 分享地址
        "desc" : 'ssssss',// 分享描述
        "title" : 'ssssss',   // 分享标题
        success : function () {
               // 分享成功可以做相应的数据处理
              //alert("分享成功"); }   
           }};
       wx.onMenuShareTimeline (shareData);   
       wx.onMenuShareAppMessage (shareData);
});

wx.error(function(res){ 
    alert("好像出错了!!");
});  

</script>

最开始的时候,在微信中进行分享没有出现指定的图片和文字描述和标题

原因:1.js的少了'}',即书写没有规范;

         2.分享地址和分享图片的地址的域名要一致.

        

<template> <div class="container"> <div id="wps-office" class="wps-office-container" /> </div> </template> <script> import WebOfficeSDK from '../../utils/wps/web-office-sdk-solution-v2.0.7.es.js' import { getToken } from '@/utils/auth' export default { name: 'WpsEditor', props: { width: { type: String, default: '40%' } }, data() { return { jssdk: null, id: 0, fileId: null } }, async mounted() { }, methods: { // 初始化WPS SDK async initWpsSdk() { try { const token = getToken() this.jssdk = WebOfficeSDK.init({ officeType: WebOfficeSDK.OfficeType.Writer, appId: 'SX20250815LPFZDB', fileId: this.fileId, token: `Bearer ${token}`, customArgs: { url: 'http://599f5bc1.r9.cpolar.top/file/' }, mode: 'nomal', commonOptions: { isBrowserViewFullscreen: true, isIframeViewFullscreen: true, acceptVisualViewportResizeEvent: true } }) // 监听iframe加载完成 const iframe = document.querySelector('.web-office-iframe') if (iframe) { iframe.onload = () => { iframe.style.width = '100%' iframe.style.height = '100%' } } // 强制修改容器样式 const container = document.querySelector('.web-office-default-container') if (container) { container.style.width = this.width || '40%' } await this.jssdk.ready() console.log('WPS SDK初始化成功') } catch (error) { console.error('WPS SDK初始化失败:', error) this.$message.error('文档编辑器初始化失败') } }, // 打开 async openDialog(fileId) { this.fileId = fileId await this.initWpsSdk() await this.extractTableOfContents() }, // 定位原文 async locateOriginalText(paragraphIndex) { try { const revision = this.revisions.find(item => item.id === paragraphIndex) if (!revision) return await this.jssdk.ready() const app = this.jssdk.Application const docRange = await app.ActiveDocument.GetDocumentRange() if (this.id !== 0) { const oldRevision = this.revisions.find(item => item.id === this.id) const oldParagraph = await docRange.Paragraphs.Item(oldRevision.index) const oldParagraphRange = await oldParagraph.Range oldParagraphRange.HighlightColorIndex = 8 } this.id = paragraphIndex const paragraph = await docRange.Paragraphs.Item(revision.index) const paragraphRange = await paragraph.Range // 高亮并滚动到指定段落 paragraphRange.HighlightColorIndex = 7 const range = await app.ActiveDocument.Range(paragraphRange.Start, paragraphRange.End) await app.ActiveDocument.ActiveWindow.ScrollIntoView(range) this.$message.success(`已定位到第${revision.index}段`) } catch (error) { console.error('定位失败:', error) this.$message.error('定位失败') } }, // 替换内容 async replaceContent(paragraphIndex, content) { try { const revision = this.revisions.find(item => item.id === paragraphIndex) if (!revision) return await this.jssdk.ready() const app = this.jssdk.Application const docRange = await app.ActiveDocument.GetDocumentRange() const paragraph = await docRange.Paragraphs.Item(revision.index) const paragraphRange = await paragraph.Range const range = await app.ActiveDocument.Range(paragraphRange.Start, paragraphRange.End) range.Text = content } catch (error) { console.error('替换内容失败:', error) this.$message.error('替换内容失败') } }, // 清除所有高亮 async clearAllHighlights() { try { await this.jssdk.ready() const app = this.jssdk.Application const fullRange = await app.ActiveDocument.GetDocumentRange() fullRange.HighlightColorIndex = 8 this.$message.success('已清除所有高亮') } catch (error) { console.error('清除高亮失败:', error) this.$message.error('清除高亮失败') } }, // 文档操作相关方法 async textSplit() { try { const list = [] // 用于存储段落数据的数组 await this.jssdk.ready() const app = this.jssdk.Application const docRange = await app.ActiveDocument.GetDocumentRange() const paragraphCount = await docRange.Paragraphs.Count const paragraphs = await docRange.Paragraphs for (let i = 1; i <= paragraphCount; i++) { try { const paragraph = await paragraphs.Item(i) const paragraphRange = await paragraph.Range // 仅使用纯文本获取方式 let text = '' try { text = await paragraphRange.Text || '' } catch (error) { console.warn(`获取段落 ${i} 文本失败:`, error) text = `[段落 ${i} 内容获取失败]` } const paragraphObj = { fileId: this.fileId, paragraphIndex: i, content: text.trim() } list.push(paragraphObj) } catch (error) { list.push({ fileId: this.fileId, paragraphIndex: i, content: `[段落处理出错]` }) console.error(`处理段落 ${i} 时出错:`, error) throw error // 抛出错误供父组件捕获 } } return list } catch (error) { console.error('文档拆条失败:', error) this.$message.error('文档拆条失败: ' + error.message) } } // 其他功能方法 /* async extractTableOfContents() { try { const app = this.jssdk.Application const doc = await app.ActiveDocument // 1. 检查是否存在目录 const tocs = await doc.TablesOfContents const tocCount = await tocs.Count if (tocCount === 0) { console.warn('⚠️ 文档中没有目录。') return [] } // 2. 获取第一个目录对象 const toc = await tocs.Item(1) // 3. 更新目录(确保内容最新) await toc.Update() // 强制刷新目录 // 4. 获取目录所在的 Range const tocRange = await toc.Range // ✅ 这是关键!比 field.Result 更可靠 const tocText = await tocRange.Text // ✅ 读取文本 if (tocText && tocText.trim()) { console.log('✅ 成功提取目录内容:', tocText) // 按行分割 const lines = tocText .split('\n') .map(line => line.trim()) .filter(line => line.length > 0) return lines } else { console.warn('⚠️ 目录内容为空。') return [] } } catch (err) { console.error('提取目录失败:', err) return [] } }*/ } } </script> <style scoped> .container { display: flex; height: 100%; width: 100%; } /* 全局样式确保 body html 正确填充 */ html, body { margin: 0; padding: 0; height: 100%; } </style> 这个怎么改
08-21
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值