古詩詞大全網 - 藝術簽名 - 微信朋友圈JSSDK分享自定義圖片文字

微信朋友圈JSSDK分享自定義圖片文字

1、在微信公眾號添加安全域名(制作的H5頁面的主域名);

測試階段,本人是通過修改hosts文件,將對應域名解析為127.0.0.1 ;?然後將電腦和手機連接至同個局域網下。修改手機代理為電腦在局域網內的IP地址;這樣手機就能正常進行測試;

2、引入jssdk script src='/open/js/jweixin-1.0.0.js'

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簽名,調用方法即可實現;具體可看官方文檔;首次接觸的小夥伴不要被嚇到,就是如此簡單;