vue实现微信分享链接添加动态参数的方法

 更新时间:2019年04月29日 08:31:01   作者:JJLin  
这篇文章主要介绍了vue微信分享链接添加动态参数的实现方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下

微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下

1.安装引用jssdk

npm install --save weixin-js-sdk
const wx=require('weixin-js-sdk')

2.通过config接口注入配置信息

const jsApiList = ['onMenuShareQQ', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData']

methods中的方法

getUrl () {
 if (window.entryUrl === '') {
 window.entryUrl = location.href.split('#')[0]
 }
 var u = navigator.userAgent
 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
 return isAndroid ? location.href.split('#')[0] : window.entryUrl
},
getConfig () {
 var url = this.getUrl()
 return new Promise((resolve, reject) => {
 this.$axios.get('your requestUrl', {
 params: {
 url: url
 }
 }).then((response) => {
 var data = response.data.data
 var appId = data.appId
 var noncestr = data.nonceStr
 // var jsapi_ticket = res.jsapi_ticket;
 var timestamp = data.timestamp
 var signature = data.signature
 wx.config({
 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
 appId: appId, // 必填,公众号的唯一标识
 timestamp: timestamp, // 必填,生成签名的时间戳
 nonceStr: noncestr, // 必填,生成签名的随机串
 signature: signature, // 必填,签名,见附录1
 jsApiList: jsApiList // 必填,需要使用的JS接口列表,所有JS接口列表 见附录2
 })
 wx.error(function (res) {
 console.log(JSON.stringify(res))
 })
 resolve()
 })
 })
},
shareToFriendsCircle () {
 wx.ready(() => {
 wx.onMenuShareTimeline({
 title: this.title,
 link: this.link,
 imgUrl: this.imgUrl,
 success: function () {
 }
 })
 })
},
shareToFriends () {
 wx.ready(() => {
 wx.onMenuShareAppMessage({
 title: this.title,
 desc: this.desc,
 link: this.link,
 imgUrl: this.imgUrl,
 success: function () {

 }
 })
 })
},

在mounted中调用 getConfig方法

调用分享方法的位置代码大致如下

this.link = location.origin + '/****/index.html#/share?openId=' + this.openId + '&shareId=' + shareId
this.desc = '分享链接添加动态参数'
this.shareToFriends()
this.shareToFriendsCircle()

总结

以上所述是小编给大家介绍的vue实现微信分享链接添加动态参数的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 一文详解Vue中nextTick的原理与作用

    一文详解Vue中nextTick的原理与作用

    Vue的nextTick方法是用于在DOM更新后执行回调的工具函数,它的作用是在当前JavaScript执行环境中延迟执行回调,以确保在下次DOM更新循环之前,可以访问到更新后的DOM,本文就给大家介绍一下Vue nextTick原理与作用,需要的朋友可以参考下
    2023-08-08
  • vueRouter--matcher之动态增减路由方式

    vueRouter--matcher之动态增减路由方式

    这篇文章主要介绍了vueRouter--matcher之动态增减路由方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue3自定义指令的实践示例

    Vue3自定义指令的实践示例

    这篇文章主要为大家详细介绍了Vue3中自定义指令的实践,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解一下
    2023-06-06
  • vue 的 Render 函数

    vue 的 Render 函数

    Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。下面就和小编一起来学习下面文章内容吧
    2021-09-09
  • vue实现验证码按钮倒计时功能

    vue实现验证码按钮倒计时功能

    最近项目结束,空闲时间比较多,今天小编抽时间给大家使用vue写一个小例子,就决定做验证码倒计时功能,具体实例代码大家参考下本文
    2018-04-04
  • Vue中对<style scoped> 中的scoped属性解析

    Vue中对<style scoped> 中的scoped属性解析

    在Vue的单文件组件中,<style scoped> 的 scoped 属性用于实现‌样式作用域隔离‌,下面通过实例代码讲解Vue中对<style scoped>中的scoped属性,感兴趣的朋友一起看看吧
    2025-03-03
  • 基于Vue3和Element Plus实现可扩展的表格组件

    基于Vue3和Element Plus实现可扩展的表格组件

    在开发过程中,我们经常需要创建具有复杂功能的表格组件,本文将介绍如何使用 Vue 3 和 Element Plus 库来构建一个可扩展的表格组件,文中有详细的代码示例供大家参考,需要的朋友可以参考下
    2024-07-07
  • vue3+vite中使用vuex的具体步骤

    vue3+vite中使用vuex的具体步骤

    在vue3+vite创建的项目中使用vuex,要注意的是vite有部分写法和之前的webpack是不同的,这篇文章主要介绍了vue3+vite中使用vuex的具体步骤,需要的朋友可以参考下
    2022-11-11
  • Vue-cli proxyTable 解决开发环境的跨域问题详解

    Vue-cli proxyTable 解决开发环境的跨域问题详解

    本篇文章主要介绍了Vue-cli proxyTable 解决开发环境的跨域问题详解,非常具有实用价值,需要的朋友可以参考下
    2017-05-05
  • vue ssr+koa2构建服务端渲染的示例代码

    vue ssr+koa2构建服务端渲染的示例代码

    这篇文章主要介绍了vue ssr+koa2构建服务端渲染的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03

最新评论