最近入職的公司主要做微信端的h5,所以在所難免要引用sdk。雖然官方文檔寫的還算清楚,但是還是有坑。
1.在index.html中 引入微信sdk 2.在assets/js 下新建文件 wx.jsexport default { wxShowMenu: function (that,sign="") { let url = window.location.href.split("#")[0] that.$http.post("/xxx", //請求你們公司后臺的接口 獲取相關的配置 that.$getSingQuery({ appKey: "xxx", url })) .then(res => { var getMsg = res.data.data; // console.log("微信配置----------") // console.log(res.data) wx.config({ debug: false, //生產環境需要關閉debug模式 測試環境下可以設置為true 可以在開發者工具中查看問題 appId: getMsg.appid, //appId通過微信服務號后臺查看 timestamp: getMsg.timestamp, //生成簽名的時間戳 nonceStr: getMsg.noncestr, //生成簽名的隨機字符串 signature: getMsg.sign, //簽名 jsApiList: [ //需要調用的JS接口列表 "updateAppMessageShareData", //自定義“分享給朋友”及“分享到QQ”按鈕的分享內容(1.4.0) 新接口 "updateTimelineShareData", //自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內容(1.4.0) 老接口 "onMenuShareTimeline", //分享到朋友圈 老接口 "onMenuShareAppMessage",//分享給盆友 老接口 "getLocation" //獲取定位 ] }); wx.error(function (res) { // alert(JSON.stringify(res)) console.log(res) // config信息驗證失敗會執行error函數,如簽名過期導致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數中查看,對于SPA可以在這里更新簽名。 }); wx.ready(function () { if(sign=="location"){ //由于 獲取定位往往是頁面一加載 就提示獲取地理位置 所以可以直接在寫在 wx.ready wx.getLocation({ type: "wgs84", // 默認為wgs84的gps坐標,如果要返回直接給openLocation用的火星坐標,可傳入"gcj02" success: function (res) { var latitude = res.latitude; // 緯度,浮點數,范圍為90 ~ -90 var longitude = res.longitude; // 經度,浮點數,范圍為180 ~ -180。 var speed = res.speed; // 速度,以米/每秒計 var accuracy = res.accuracy; // 位置精度 that.latitude=res.latitude; that.longitude=res.longitude; that.geocodeRegeo()//逆地理編碼 調用你vue實例里的方法 do something... } }); } }); }) .catch(error => { alert(error) console.log(error) }) } }3.在main.js 將WXConfig綁在vue原型上 這樣哪個頁面需要初始化 直接通過原型就可以拿到
import WXConfig from "./assets/js/wx" //微信分享 Vue.prototype.WXConfig = WXConfig4.在需要的頁面 進行初始化
微信JS-SDK說明文檔:同一個url僅需調用一次,對于變化url的SPA的web app可在每次url變化時進行調用。
所以 我們在你需要的頁面 mounted 時, this.WXConfig.wxShowMenu(this);調用就可以。
我這里將this傳入 只是為了能直接在wx.js 調用vue上的一些方法。比如axios
mounted: function () { this.WXConfig.wxShare(this); },
通過按鈕自定義觸發
html5.新老接口的區別分享給朋友分享到朋友圈js shareFriendCircle () { let that = this wx.onMenuShareTimeline({ title: this.dataCode.title, // 分享標題 desc: this.dataCode.desc, //分享描述 link: this.dataCode.link,// 分享鏈接 imgUrl: this.dataCode.imgUrl, // 分享圖標 success () { console.log("分享給朋友圈 舊") } }); }, // 分享給朋友 舊 shareFriend () { let that = this wx.onMenuShareAppMessage({ title: this.dataCode.title, // 分享標題 desc: this.dataCode.desc, //分享描述 link: this.dataCode.link,// 分享鏈接 imgUrl: this.dataCode.imgUrl, // 分享圖標 success () { console.log("分享給朋友 舊") } }); },
新接口 "updateAppMessageShareData" //自定義“分享給朋友”及“分享到QQ”按鈕的分享內容(1.4.0) "updateTimelineShareData",//自定義“分享到朋友圈”及“分享到QQ空間”按鈕的分享內容(1.4.0) 老接口 "onMenuShareTimeline", //分享到朋友圈 "onMenuShareAppMessage",//分享給盆友
注意
新接口中的success 回調函數 指的是 你的那些title desc...自定義設置成功了的回調函數,而不是用戶主動點擊微信右上角的三個點,點擊分享給朋友或者朋友圈,分享成功的回調函數。
老接口 success 回調函數 是指 用戶成功分享給朋友或者朋友圈的回調函數
經測試 使用新接口 在ios下表現正常 ,在部分安卓機下失效了
建議使用老接口 無此問題
6.補充還有一點, link: this.dataCode.link,// 分享鏈接
該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
分享鏈接請不要出現奇怪的字符,或者URL編碼一下 比如:|,會導致 鏈接域名與js安全域名一致 但依然報安全域名的錯誤
7.掃一掃 往期文章數據結構與算法-LeetCode 格雷編碼(No.89)
數據結構與算法-LeetCode 種花問題(No.605)
LeetCode-電話號碼的字母組合(No.17) 遞歸+hash
JavaScript 數據結構與算法 這題你會嗎?
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105317.html
摘要:最近開發微信公眾號內嵌頁面,使用搭建的項目,由于業務需求,需要實現微信自定義分享功能,所以項目中集成微信。 最近開發微信公眾號內嵌H5頁面,使用vue搭建的項目,由于業務需求,需要實現微信自定義分享功能,所以項目中集成微信JS-SDK。微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包。通過使用微信JS-SDK,網頁開發者可借助微信高效地使用拍照、選圖、語音、...
摘要:進過下面的步驟,一步一步的配置,就可以讓你正確的在項目中引入微信的。在進行了正確的微信文件引入后看上面在頁面中調用如下代碼就可以注入權限驗證配置。可以通過微信提供的兩個接口來進行事件回調。到這為止,微信的接入就完成了。 微信JS-SDK的功能 如果你點進來,那么我相信你應該知道微信的JS-SDK可以用來做什么了。微信的官方文檔描述如下。 微信JS-SDK是微信公眾平臺面向網頁開發者提供...
摘要:微信分享大家見怪不怪了就是再點擊分享,然后喚起微信,分享當前頁面到朋友圈或者分享給朋友。點擊配置,進去找到分享,填寫和和在哪弄這是需要前往微信開放平臺申請的進去注冊一個帳號,登錄,創建移動應用。 微信分享大家見怪不怪了!就是再APP點擊分享,然后喚起微信,分享當前頁面到朋友圈或者分享給朋友。 所以,我開發了這樣的一個工具。 showImg(https://segmentfault.co...
閱讀 1402·2021-11-22 09:34
閱讀 1378·2021-09-22 14:57
閱讀 3400·2021-09-10 10:50
閱讀 1371·2019-08-30 15:54
閱讀 3690·2019-08-29 17:02
閱讀 3472·2019-08-29 12:54
閱讀 2611·2019-08-27 10:57
閱讀 3316·2019-08-26 12:24