Vue中动态生成微信分享链接和分享文字

最新推荐文章于 2024-08-23 10:41:37 发布

唐宋xy

最新推荐文章于 2024-08-23 10:41:37 发布

阅读量3.2k

点赞数 3

分类专栏：前端文章标签： vue微信分享 vue微信动态分享信息不同页面分享不同信息微信分享不同信息

本文链接：https://blog.csdn.net/weixin_42054155/article/details/102809729

版权

在Vue开发微信网页时，为实现每个页面分享的链接、标题和描述都能动态变化，可通过导航守卫结合微信jssdk来实现。首先在main.js中引入并配置微信jssdk，然后封装方法动态生成分享信息。接着，在路由导航守卫中，根据路由变化动态更新分享内容，确保每个页面的分享信息独特。

摘要由CSDN通过智能技术生成

在微信网页开发中，如果需要在不同的页面，每次分享出去的信息都是动态的不同的，就是动态的链接或者标题、描述、图片等信息，可以通过vue的导航守卫来实现

一、在vue中需要引入微信jssdk

配置安全域名（参考官方文档）
引入微信的js文件，vue中可以直接npm安装也可以
npm install weixin-js-sdk --save
并在main.js中引入js：
import wx from 'weixin-js-sdk'
并且将wx绑定到vue原型上，那么其他的所有组件都可以使用：
Vue.prototype.$wx = wx

通过config接口注入权限验证配置
在main.js中配置微信分享的权限接口

wx.config({
     
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    // 必填，需要使用的JS接口列表，所有JS接口列表见官方js接口
    // 这里配置获取地理位置所需要的接口权限
    jsApiList: [
    	'checkJsApi',
    	'onMenuShareWeibo',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ'   
    ]
});

wx.ready(function(){
     
 
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。<