1. 程式人生 > >vue 封裝微信分享

vue 封裝微信分享

/*----------------------------share.js----------------------------*/

import wx from 'weixin-js-sdk'
import qs from 'qs'
import {Toast} from 'mint-ui'
import axios from "axios";
axios.defaults.headers.common["Content-Type"] ="application/json; charset=UTF-8";
axios.defaults.headers.common["clientType"] = "H5";
axios.defaults.withCredentials = false;

/**
 *分享
 * @param _this 當前域
 * @param shareTitle 標題
 * @param shareUrl 連結
 * @param shareImg 圖片
 * @param shareDesc 描述
 */
export const  commonShare = (_this, shareTitle, shareUrl, shareImg, shareDesc) => {
    let url = location.href.split('#')[0];
    let params = qs.stringify({
        shareUrl: url     //shareUrl是根據你的後臺需要的引數名
    });
    axios.post("後臺介面",params).then(data=>{
            wx.config({
                debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來,若要檢視傳入的引數,可以在pc端開啟,引數資訊會通過log打出,僅在pc端時才會列印。
                appId: data.data.appId, // 必填,公眾號的唯一標識
                timestamp: data.data.timestamp, // 必填,生成簽名的時間戳
                nonceStr: data.data.noncestr, //注意:服務端簽名和前端引數名大小寫不一致
                signature: data.data.signature, // 必填,簽名,見附錄1
                jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填,需要使用的JS介面列表,所有JS介面列表見附錄2
            });
            wx.ready(function () {
                wx.onMenuShareTimeline({
                title: shareTitle, // 分享標題
                link: shareUrl, // 分享連結,該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                imgUrl: shareImg, // 分享圖示
                success: function () {
                    // 使用者確認分享後執行的回撥函式
                    Toast('分享成功!!!');
                },
                cancel: function () {
                    // 使用者取消分享後執行的回撥函式
                    Toast('取消分享!!!');
                }
                });
                wx.onMenuShareAppMessage({
                title: shareTitle, // 分享標題
                desc: shareDesc, // 分享描述
                link: shareUrl, // 分享連結,該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                imgUrl: shareImg, // 分享圖示
                type: "", // 分享型別,music、video或link,不填預設為link
                dataUrl: "", // 如果type是music或video,則要提供資料鏈接,預設為空
                success: function () {
                    // 使用者確認分享後執行的回撥函式
                    Toast('分享成功!!!');
                },
                cancel: function () {
                    // 使用者取消分享後執行的回撥函式
                    Toast('取消分享!!!');
                }
                });
            });
        }).catch(err=>{
            console.log("自定義分享失敗"+err);
        })
    
};

/*----------------------------main.js----------------------------*/

//設定為全域性
import {commonShare} from './components/utils/share'
Vue.prototype.commonShare = commonShare;

相關推薦

vue 封裝分享

/*----------------------------share.js----------------------------*/ import wx from 'weixin-js-sdk' import qs from 'qs' import {Toast} fr

Vue實現分享

1、安裝 npm install weixin-js-sdk 2、 import wx from 'weixin-js-sdk'; **初始化的時候就獲取簽名** 程式碼 let url = process.env.baseShortUrl+'/ins_w

vue製作分享的單頁面應用

前端 - vue框架後端 - node框架node負責呼叫微信的介面獲取accesstoken 然後換取ticket去儲存 request('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_cr

vue分享出來的連結點開是首頁”問題解決

最近工作上遇到了這樣一個Bug。 公司網站有PC端和移動端,兩個版本。其中如果手機訪問PC端,則自動跳轉到移動端。(這是常規操作,沒啥稀奇點。) 可神奇的問題來了。 在移動端中有微信分享功能,如果手機直接訪問手機端的地址進入子頁面分享,點開分享的連結進入的是子頁面。但是

簡單封裝分享外掛

http://luckykun.com/work/2016-05-14/weixin-share.html 最近要慢慢開始做移動端的一些頁面了,並且大多數都是活動頁面,需要在微信裡面分享、傳播。 如果只是單單傳播一下頁面,擴散一些資訊還好,那就跟pc差不多,一刀一刀切

vue 分享至朋友圈&&分享至朋友程式碼封裝

1.新建share.js檔案 import {shareSDK} from "../api/common";//分享api import wx from 'weixin-js-sdk' export

Vue 項目實現分享的自定義分享鏈接問題解決

情況 錯誤 目的 是個 找問題 自定義分享 當前頁 不用 appid 前言:   前兩天在做微信公眾號裏的項目的時候有一個需求是在 vue 項目中實現微信分享,然後在自定義分享鏈接的時候出了一些問題,分享出去的自定義鏈接(鏈接中攜帶參數)總是會直接跳到項目首頁,而且是玄學跳

vue 調用分享 遇到的問題

success 分享圖片 標題 inf export deb signature g模式 rop 關於微信分享網上有一堆的教程,就不詳細說了,大致如下: 1.安裝 cnpm install weixin-js-sdk --save-dev 2.新建一個shar

vue專案之分享

1. npm install weixin-js-sdk --save  2. mian.js 引入 import wx from 'weixin-js-sdk' Vue.prototype.wx = wx 3.wxapi.js 封裝的公共js import

關於Vue單頁面實現分享的Bug

// 問題描述在微信中分享到朋友圈或好友時,分享出去的路由被破壞,開啟分享的連結,路由中的“#”會被去掉並追加?from= & Timeline= 之類的字尾引數,這就造成了分享出去的連結只能進入首頁,無法正常跳轉到其他路由。 //該問題產生的原因可能是由於vue的hash模式,微信瀏覽器只記錄了第

React / Vue 前後端分離專案實現分享教程

小編推薦:Fundebug專注於JavaScript、微信小程式、微信小遊戲,Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務,眾多大佬公司都在使用。 網上非常多的微信分享例子和教程,但是都不全面,甚至不少錯誤。自己根據微信官方文件踩了好幾個坑才擼成功。痛

簡單粗暴教你在VUE中引入微SDK 呼叫分享、朋友圈分享、QQ分享......

寫在前面: 剛做了一個微信端的網頁,用到了微信分享,在網上看了好多的資料,發現好多文件都寫得雲裡霧裡,讓人看的頭疼。通過對很多大佬文章的綜合整理,才完成了微信分享的部分。所以我想著自己寫一篇文章,能讓看到我這篇文章的親們能夠清楚的明白在vue上怎麼使用微信分享SDK,能夠按照

vue 分享設定踩坑

一、引入JS 在index.html頁面引入微信開發需要的js 二、eslint編譯報錯,wx undefined 在js程式碼裡直接用wx來寫程式碼,會報undefined錯誤,eslint編譯通不過。 這個的解決方法有兩種, 一種是禁止eslint檢測  在js

vue移動H5端 -- 分享詳情頁面,結果link為首頁

前言 在安卓分享詳情沒這問題,但是ios這邊出現分享到首頁,猜測是vue-router出的問題,然後,去基佬網(github)逛一圈,發現問題所在, 連結 (一)原因 IOS:微信IOS版,微信安卓版,每次切換路由,SPA的url是不會變的,發起簽名

vue單頁應用history模式下的分享(深坑)

之前的專案到我接手時微信分享這個問題已經被處理過了,所以也就偷懶沒有研究了。目前公司專案用的是vue,然後在微信分享這塊也是被坑的很慘了。主要問題在我自己,但我!甩鍋超級厲害!!!技術認輸,甩鍋絕不認輸(滑稽 今天我就要把整個問題的過程記錄一哈,第一次寫部落格

vue公眾號分享,支付

在前段時間做了一個微信公眾號,因為我又是新手,沒什麼經驗,拿起vue就開始,導致一坑再坑,簡直闊怕!!! 對於此次專案,我主要用到的是vue的整框架和必要的外掛,但是我沒用vuex,用vuex的話會方便很多很多 1.首先從認證獲取openid說起; 因為我

vue 專案如何引入微sdk,使用分享介面

寫在前面: 做微信的網頁基本上都要接入微信的sdk,我在做的時候,也頗費了一番功夫,然後就想記錄一下,供自己日後翻閱,以及讓有需要的朋友可以做一下參考,如果喜歡的可以點波贊,或者關注一下,希望可以幫到大家。 安裝sdk npm instal

封裝博QQ分享lib快速使用

上次封裝了分享圖片資源的處理趁著有空 把分享功能進行了整合封裝 ShareLib 整合微信微博QQ分享功能 1.接入工程 在主工程的build.gradle 中新增maven倉庫地址 maven { url "https://dl.bintra

vue history模式下分享爬坑記錄

專案分享需求:詳情頁面分享當前標題+簡介+圖片+當前路徑,其餘頁面分享固定標題+簡介+圖片+當前路徑 微信H5專案,後臺介面返回簽名。 安裝及引用使用說明 安裝 npm i

分享等一系列sdk功能封裝

首先安裝sdk, npm install –save weixin-js-sdk import api from '../../api/api' // 分享api import wx from 'weixin-js-sdk' export const