本文目錄一覽：
微信朋友圈JSSDK分享自定義圖片文字
1、在微信公眾號添加安全域名（製作的H5頁面的主域名）；
測試階段，本人是通過修改hosts文件，將對應域名解析為127.0.0.1 ； 然後將電腦和手機連接至同個區域網下。修改手機代理為電腦在區域網內的IP地址；這樣手機就能正常進行測試；
2、引入jssdk script src=”
3、配置jssdk，成功後方可使用相關功能，方式如下
wx.config({
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。
appId: ‘XX’, // 必填，公眾號的唯一標識
timestamp: XX, // 必填，生成簽名的時間戳
nonceStr: xx, // 必填，生成簽名的隨機串
signature: xx, // 必填，簽名，見附錄1
jsApiList: [‘onMenuShareTimeline’,’onMenuShareAppMessage’] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
});
第一次接觸時看到網上的文章在此對signature沒有過多的說明，這裡我自己大概說一下，此參數是通過獲取公眾號的id及secret獲取 access _token,然後通過 access _token獲取jsapi_ticket，然後通過時間戳，隨機串，當前頁面url，通過sha1加密生成；（這裡做下說明，此步驟由後台處理後返回給前端即可）；
剛接觸的時候領導認為純前端可實現，這。。。確實可以實現，這裡就不做過多說明了；至於要後端處理的原因大致為兩點1、公眾號id和secret在前端實現不安全 2、 access _token和jsapi_ticket每日有請求次數的限制，過期時間兩小時，所以需要後台在伺服器緩存，每兩小時獲取一次；
4、wx.config配置正確即可通過wx.ready來調用相應功能
wx.ready(function() {
wx.onMenuShareTimeline({ //分享朋友圈
title: ‘X’, // 分享標題
link: window.location.href, // 分享鏈接
imgUrl: url, // 分享圖標
success: function() {
// 用戶確認分享後執行的回調函數
console.log(‘分享成功了喲喲喲’)
},
cancel: function() {
// 用戶取消分享後執行的回調函數
}
});
wx.onMenuShareAppMessage({ // 好友分享
title: ”, // 分享標題
desc: ”, // 分享描述
link: window.location.href, // 分享鏈接
imgUrl: ”, // 分享圖標
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
});
總結：其實對於前端要處理的很少，只要從後台獲取signature簽名，調用方法即可實現；具體可看官方文檔；首次接觸的小夥伴不要被嚇到，就是如此簡單；
微信公眾號開發之如何使用JSSDK
微信開發交流群：148540125
歡迎留言、轉發、打賞
系列文章參考地址 極速開發微信公眾號
項目源碼參考地址 點我點我–歡迎Start
服務號、訂閱號可以通過登錄 微信公眾平台 查看 開發介面許可權
使用JSSDK主要包括
1、判斷當前客戶端版本是否支持指定JS介面、
2、分享介面（微信認證）
3、圖像介面
4、音頻介面
5、智能介面（識別語音並返回結果）
6、設備信息（獲取網路狀態）
7、地理位置
8、界面操作
9、微信掃一掃
10、微信小店（服務號必須通過微信認證）
11、微信卡券 （微信認證）
12、微信支付（服務號必須通過微信認證）
官方參考文檔
步驟一：綁定域名
先登錄微信公眾平台進入 公眾號設置 的 功能設置 里填寫 JS介面安全域名 。
步驟二：引入JS文件
在需要調用JS介面的頁面引入如下JS文件，（支持https）：
如需使用搖一搖周邊功能，請引入
備註：支持使用 AMD/CMD 標準模塊載入方法載入
步驟三：通過config介面注入許可權驗證配置
簽名演算法生成規則
請 官方參考文檔
下面具體來講講 開源項目 weixin_guide 中的封裝。
使用的時候只要在Controller方法上添加一個攔截器 JSSDKInterceptor 來實現簽名驗證再將 wx.config 需要的參數設置對應的屬性在頁面上進行獲取。
攔截器實現如下：
在Controller中使用
JSP頁面上面使用
測試結果
在AppConfig 中添加路由 me.add(“/jssdk”, JSSDKController.class,”/view”); 手機中訪問 http://域名[/項目名稱]/jssdk ,如果設置了 debug= true 成功了就會彈出
如果出現 {“errorMsg”:”config:invalid url domian”} 請檢查 步驟一：綁定域名 與你訪問的域名是否在安全域名列表當中
步驟四：通過ready介面處理成功驗證
步驟五：通過error介面處理失敗驗證
步驟六：介面調用
攔截器具體實現 參考地址 點這裡
js 介面調用參考地址 點這裡
以上就是JSSDK使用的介紹。
歡迎留言、轉發、打賞項目
源碼參考地址 點我點我–歡迎Start
【求幫助】 微信JSSDK 分享介面，調用沒反應
你在wx.config時，打開調試模式，自己測試測試，在調試模式下，都會alert信息出來，看看alert出來的是什麼信息。
具體解決步驟如下：
1、登錄你的微信平台，點擊「公眾號設置」。
2、點擊「功能設置」，然後點擊「設置」。
3、設置JS介面安全域名。這裡填寫的是一級域名，不帶www和http。最多可以設置三個域名。設置完後點擊確定。
4、在開發者中心中獲取你的AppID和AppSecret，接下來在獲取令牌時，需要這兩個信息。
5、獲取令牌。
6、獲取jsapi的ticket。
7、簽名，將jsapi_ticket、noncestr、timestamp、分享的url按字母順序連接起來，進行sha1簽名。
uniapp中調用微信jssdk
1、安裝
“`
npm install jweixin-module –save
“`
2、創建文件share.wx.js
“`
// 引入微信jssdk
const jweixin = require(‘jweixin-module’)
const install = (Vue, vm) = {
// shareInfo: {
// title: ‘標題’,
// desc: ‘描述’,
// link: location.origin,
// imgUrl: ”
// }
const init = (shareInfo = {}) = {
// 獲取微信jssdk，用於分享
vm.$u.api.getWxjssdk({
url: location.href
}).then(res = {
res = res.data
vm.$u.vuex(‘vuex_wxjssdk’, res)
console.log(res)
jweixin.config({
debug: res.debug, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。
appId: res.appId, // 必填，公眾號的唯一標識
timestamp: res.timestamp, // 必填，生成簽名的時間戳
nonceStr: res.nonceStr, // 必填，生成簽名的隨機串
signature: res.signature, // 必填，簽名
jsApiList: res.jsApiList // 必填，需要使用的JS介面列表
});
jweixin.ready(() = {
console.log(shareInfo.title)
// 分享給朋友
jweixin.updateAppMessageShareData({
title: shareInfo.title,
desc: shareInfo.desc,
link: shareInfo.link,
imgUrl: shareInfo.imgUrl,
success: () = {
// 設置成功
}
})
// 分享到朋友圈
jweixin.updateTimelineShareData({
title: shareInfo.title,
link: shareInfo.link,
imgUrl: shareInfo.imgUrl,
success: () = {
// 設置成功
}
})
// 分享到朋友圈
jweixin.onMenuShareTimeline({
title: shareInfo.title,
link: shareInfo.link,
imgUrl: shareInfo.imgUrl,
success: () = {
}
})
// 分享給朋友
jweixin.onMenuShareAppMessage({
title: shareInfo.title,
desc: shareInfo.desc,
link: shareInfo.link,
imgUrl: shareInfo.imgUrl,
success: () = {
}
})
});
jweixin.error(function(res) {
// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這裡更新簽名。
console.log(res)
});
})
};
// 將各個定義的介面名稱，統一放進對象掛載到vm.$u.api(因為vm就是this，也即this.$u.api)下
vm.$u.share = {
init
};
}
export default {
install
}
“`
3、main.js app.$mount() 上面加入
“`
// 微信jssdk初始化
import wxshare from ‘@/common/share.wx.js’
Vue.use(wxshare, app)
“`
4、調用
“`
this.$u.share.init({
title: ‘標題’,
desc: ‘描述’,
link: location.origin,
imgUrl: ‘分享圖片地址’
})
“`
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/291931.html
微信掃一掃 
支付寶掃一掃 