分享場景
在微信公眾號的前端網(wǎng)頁內(nèi), 我們以前經(jīng)常會看到分享到朋友圈或者是關(guān)注微信等按鈕, Click, 之后會彈出一個提示窗讓用戶分享或者是關(guān)注.
那么, 這個需求如何實現(xiàn)呢?
原理探究
- 在索引了大部門資料, 和騰訊最新的SDK -> JSSDK的API后, 我可以負責任的告訴大家, 介個是不可以實現(xiàn)的, 微信期望的是通過微信自身的分享按鈕來實現(xiàn)的分享.
當前分享形式
那么現(xiàn)在通常是怎樣實現(xiàn)的呢? 現(xiàn)行較為主流的方法, 是進入相關(guān)頁面后通過加載一個提示圖片來提示用戶( 具體為一個箭頭指向右上角的分享, 并輔以文字說明), 這是比較常見的做法.(由于并未找到相關(guān)圖片, 所以暫不列出).
微信自有分享的實現(xiàn)步驟
- 接入JSSDK(如果已接入, 可以略去該步驟)
-- 1. 綁定域名 : 公眾號設(shè)置 -> 功能設(shè)置 -> JS接口安全域名
-- 2. 引入JS文件 : 在需要調(diào)用JS接口的頁面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
-- 3. 通過config接口注入權(quán)限驗證配置
所有需要使用JS-SDK的頁面必須先注入配置信息, 否則將無法調(diào)用 !!!
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)拇舀，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填播急，公眾號的唯一標識
timestamp: , // 必填吮螺，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填军援，簽名，見附錄1
jsApiList: [] // 必填称勋，需要使用的JS接口列表胸哥，所有JS接口列表見附錄2
});
-- 4. 通過ready接口處理成功驗證
wx.ready(function(){
// config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后赡鲜，config是一個客戶端的異步操作空厌，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行银酬。對于用戶觸發(fā)時才調(diào)用的接口嘲更，則可以直接調(diào)用，不需要放在ready函數(shù)中揩瞪。
});
-- 5. 通過error接口處理失敗驗證
wx.error(function(res){
// config信息驗證失敗會執(zhí)行error函數(shù)赋朦，如簽名過期導(dǎo)致驗證失敗，具體錯誤信息可以打開config的debug模式查看李破，也可以在返回的res參數(shù)中查看宠哄，對于SPA可以在這里更新簽名。
});
分享接口
- 獲取"分享"到朋友圈按鈕點擊狀態(tài)及自定義分享內(nèi)容接口
wx.onMenuShareTimeline({
title: '', // 分享標題
link: '', // 分享鏈接
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
},
cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
- 獲取“分享給朋友”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口
wx.onMenuShareAppMessage({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享鏈接
imgUrl: '', // 分享圖標
type: '', // 分享類型,music嗤攻、video或link毛嫉，不填默認為link
dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接妇菱，默認為空
success: function () {
// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
},
cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
- 獲取“分享到QQ”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口*
wx.onMenuShareQQ({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享鏈接
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
},
cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
- 獲取“分享到QQ空間”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口
wx.onMenuShareQZone({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享鏈接
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
},
cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
