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