javascript实现修改微信分享的标题内容等

奉上代码:

  复制代码 代码如下:

  <script>

  //微信分享

  var wimg = "分享图片网址123";

  var wurl = "分享网址123";

  var wdesc = '分享内容123';

  var wtit = '分享标题123';

  var wappid = '';

  function shareMsg() {//<span style="font-family: Arial, Helvetica, sans-serif;">发送给好友</span><span style="font-family: Arial, Helvetica, sans-serif;">标题和内容默认都显示</span>

  WeixinJSBridge.invoke('sendAppMessage',{

  "appid": wappid,

  "img_url": wimg,

  "img_width": "200",

  "img_height": "200",

  "link": wurl,

  "desc": wdesc,

  "title": wtit,

  })

  }

  function shareQuan() { //<span style="font-family: Arial, Helvetica, sans-serif;">分享到朋友圈只有标题显示</span>

  WeixinJSBridge.invoke('shareTimeline',{

  "img_url": wimg,

  "img_width": "200",

  "img_height": "200",

  "link": wurl,

  "desc": wdesc,

  "title": wtit

  });

  }

  function shareWeibo() { <span style="font-family: Arial, Helvetica, sans-serif;">//</span><span style="font-family: Arial, Helvetica, sans-serif;">分享到微博只有内容显示</span>

  WeixinJSBridge.invoke('shareWeibo',{

  "content": wdesc,

  "url": wurl,

  });

  }

  // 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。

  document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {

  // 发送给好友

  WeixinJSBridge.on('menu:share:appmessage', function(argv){

  shareMsg();

  });

  // 分享到朋友圈

  WeixinJSBridge.on('menu:share:timeline', function(argv){

  shareQuan();

  });

  // 分享到微博

  WeixinJSBridge.on('menu:share:weibo', function(argv){

  shareWeibo();

  });

  }, false);

  </script>
修改微信、QQ等社交媒体分享的图文样式,需要通过修改HTML和CSS来实现。在uniapp中,可以在分享页面的vue组件中,使用```<template>```、```<style>```和```<script>```标签来分别编写HTML、CSS和JavaScript代码,以实现自定义样式的效果。 具体步骤如下: 1. 在分享页面的vue组件中,编写HTML代码,包括标题、描述、图片等内容,可以使用```<div>```、```<p>```、```<img>```等标签来实现。 ```html <template> <div class="share-container"> <img class="share-img" src="https://example.com/img.jpg"> <p class="share-title">这是分享标题</p> <p class="share-desc">这是分享的描述</p> </div> </template> ``` 2. 在```<style>```标签中编写CSS代码,修改标题、描述、图片等元素的样式,如字体大小、颜色、对齐方式、间距等。 ```css <style scoped> .share-container { width: 80%; margin: 0 auto; text-align: center; } .share-img { width: 100%; } .share-title { font-size: 18px; color: #333; margin-top: 20px; } .share-desc { font-size: 16px; color: #666; margin-top: 10px; } </style> ``` 3. 在```<script>```标签中编写JavaScript代码,设置分享内容和链接等信息,如下所示。 ```javascript <script> export default { onShareAppMessage() { return { title: '这是分享标题', desc: '这是分享的描述', imageUrl: 'https://example.com/img.jpg', path: '/pages/index/index' } } } </script> ``` 4. 最后,可以在微信、QQ等社交媒体中进行分享测试,查看自定义样式的效果是否符合要求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值