当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue微信分享链接添加动态参数

vue微信分享链接添加动态参数

2019年04月29日  | 移动技术网IT编程  | 我要评论

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

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 + '/****/#/share?openid=' + this.openid + '&shareid=' + shareid
this.desc = '分享链接添加动态参数'
this.sharetofriends()
this.sharetofriendscircle()




 






                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，
                        点击进行留言回复！！
                    

                

                 
                

                    
相关文章:

                    
                

               
                 
                 

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网