webapp項目vue框架點擊按鈕實現微信好友分享,朋友圈分享


當時做這個這個效果真把人給*了,網上能搜到的基本是微信頁面的分享,特征是方法是wx.**開頭,不適用於app內。思路都是一樣的,先調取服務(這里使用plus的內置方法),再發送分享請求

<template>

    <div class="" id="share" v-for="(items,index) in strands" :key="index" @click="wxShare(index)">   //使用循環,渲染出點擊分享朋友圈和好友的按鈕,方便獲取index。一切從這開始的
             <img v-if="index==0" src="../assets/img/gg/wChart.png" alt="">
             <img v-if="index==1" src="../assets/img/gg/circle.png" alt="">
        <span>{{items.flag}}</span>  
    </div>
</template>
data(){
        return{
            strands:[{flag:'微信好友'},{flag:'朋友圈'}]
        }
    },
methods:{
  wxShare(index){
            let msg = {}
                msg.type='web'                                                             //這個要加,至於為什么咱也不敢問
                msg.title='XX軟件名'
                msg.content='這里填一些分享信息,是在好友還未點進去看到的信息'
                msg.thumbs=['../assets/img/alert/logo.png']                 //打包進app的本地applogo
                msg.href=' https://www.baidu.com/'                              //好友點進去需要跳轉的連接
            if(index==0){
                msg.extra={scene:"WXSceneSession"}                      //好友分享
            }else if(index==1){
                msg.extra={scene:"WXSceneTimeline"}                     //朋友圈分享
            }
           plus.share.getServices(function(e) {                            //移動端獲取服務,這里的plus方法只能在移動端有效,在pc端運行會報plus錯誤,下一步就該打包檢驗
              this.shareData = e                               //這個回調函數的參數 e 就包含了所有對象的數組
              for(var i in e){        
                  if('weixin' == e[i].id){
                      this.sharewx = e[i]  
                  }
              }
          })
           // 使用send發起分享
            this.sharewx.send(msg,function(){
     alert('分享成功')                              //這里有個問題就是這個方法是異步的,一旦app內需要在分享成功或失敗后發起請求的話需要解決異步問題
          },function(error) {
               alert('分享失敗')
       })

 

 注:如果失敗應該是未獲取授權,請先實現微信登錄

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM