剛剛做了微信的自定義分享伐脖,折騰了好一會(huì)慧脱,完了記個(gè)筆記拍皮。
微信JS-SKD說(shuō)明文檔
本次測(cè)試需要:通過(guò)ICP備案的域名
隧膏、已認(rèn)證的微信公眾號(hào)
配置篇
1.設(shè)置》公眾號(hào)設(shè)置》功能設(shè)置》JS接口安全域名
直接將域名填寫(xiě)進(jìn)入就好奠宜,可以是yeli.studio 包颁,也可以是abc.yeli.studio瞻想。此時(shí)是無(wú)法保存的,需要將MP_verify_XWsldS5dzRvbRcvT.txt
下載下來(lái)拷貝到域名根目錄下面娩嚼,待會(huì)點(diǎn)擊保存的時(shí)候蘑险,微信會(huì)通過(guò)鏈接:abc.yeli.studio/MP_verify_XWsldS5dzRvbRcvT.txt
來(lái)驗(yàn)證是否可以訪問(wèn)。
補(bǔ)充:
test_nginx.conf
server {
# the port your site will be served on
listen 80;
# the domain name it will serve for
server_name abc.yeli.studio; # substitute your machine's IP address or FQDN
charset utf-8;
# max upload size
client_max_body_size 75M; # adjust to taste
# Django media
location /media {
alias /root/application_all/media; # your Django project's media files - amend as required
}
location /static {
alias /root/application_all/static; # your Django project's static files - amend as required
}
# Finally, send all non-media requests to the Django server.
location / {
uwsgi_pass unix:///root/application_all/project/register_site/activity.sock; # for a file socket
include /root/application_all/project/register_site/uwsgi_params; # the uwsgi_params file you installed
}
}
像這樣的nginx配置根目錄是沒(méi)有對(duì)應(yīng)的文件夾的待锈,它直接對(duì)接到了程序應(yīng)用漠其。
此種情況可以在程序應(yīng)用里面增加一個(gè)url路由,我使用Django竿音,那么就是這樣:
1.在urls.py中添加一個(gè)路由
urlpatterns = [
...
url(r'MP_verify_XWsldS5dzRvbRcvT.txt',views.getMP_varify),
...
]
2.在views.py 中返回此文本MP_verify_XWsldS5dzRvbRcvT.txt中的字符串
def getMP_varify(request):
return HttpResponse ("XWsldS5dzRvbRcvT")
點(diǎn)擊保存和屎,成功
2.開(kāi)發(fā)》基本配置
啟用開(kāi)發(fā)者,獲得AppID春瞬、AppSecret兩個(gè)參數(shù)
然后填寫(xiě)IP白名單柴信,也就是你服務(wù)器所在的公網(wǎng)ip
服務(wù)端篇
由前端發(fā)送ajax到服務(wù)端獲取,前端需要抓去當(dāng)前頁(yè)面url提交給服務(wù)端宽气。
服務(wù)端的工作如下:
獲取token:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={appid}&secret={secret}
通過(guò)token獲取ticket:https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token={token}
相關(guān)參數(shù)生成:
利用下面微信提供的sign.py文件随常,傳入ticket和頁(yè)面url即可。
http://demo.open.weixin.qq.com/jssdk/sample.zip
備注:鏈接中包含php萄涯、java绪氛、nodejs以及python的示例代碼供第三方參考,第三方切記要對(duì)獲取的accesstoken以及jsapi_ticket進(jìn)行緩存以確保不會(huì)觸發(fā)頻率限制涝影。
服務(wù)端返回json樣例:
{
appId:"wxb6d7b7803694fc83"
jsapi_ticket:"kgt8ON7yVITDhtdwci0qeSFCSQshWFBoH3E_uwLdKTAex6sBMGa0x7Jk_-09rdTaErwM475Y1ScmIZkNcFeWNQ"
nonceStr:"6WPMJHSpBzWLO0p"
signature:"1fb234358370736216c1f76badb489fa1100e92d"
timestamp:1505206494
url:"http://abc.yeli.studio/"
}
至此枣察,服務(wù)端的工作就完了
前端篇
在需要分享的頁(yè)面中引入兩個(gè)js文件
http://res.wx.qq.com/open/js/jweixin-1.2.0.js
wexin.js,wexin.js內(nèi)容如下:
$.ajax({
url:'http://abc.yeli.studio/get_wexin_params',
type:'post',
data:{
"share_url":window.location.href.split('#')[0],
"csrfmiddlewaretoken":$("input[name='csrfmiddlewaretoken']").val()
},
success:function(_data){
wx.config({
debug: false,
appId: 'wxb6d7b7803694fc83',
timestamp: _data.timestamp,
nonceStr: _data.nonceStr,
signature: _data.signature,
jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQZone","onMenuShareQQ"]
});
wx.ready(function () {
var title='我是標(biāo)題'
var desc='我是描述內(nèi)容'
var link='http://abc.yeli.studio/' // 分享鏈接燃逻,該鏈接必須在公眾號(hào)JS安全域名之下序目,`http://abc.yeli.studio/another_page`也是可以的
var imageUrl='http://abc.yeli.studio/media/QQ20170911-150722copy.png'
//分享到消息
wx.onMenuShareAppMessage({
title: title,
desc: desc,
link: link,
imgUrl: imageUrl,
type: '', // 分享類(lèi)型,music、video或link伯襟,不填默認(rèn)為link
dataUrl: '', // 如果type是music或video猿涨,則要提供數(shù)據(jù)鏈接,默認(rèn)為空
success: function () {
//分享成功
},
cancel: function () {
// 取消分享
}
})
//分享到朋友圈
wx.onMenuShareTimeline({
title: title, // 分享標(biāo)題
link: link, // 分享鏈接姆怪,該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: imageUrl, // 分享圖標(biāo)
success: function () {
// 分享成功
},
cancel: function () {
// 取消分享
}
})
})
}
})
至此叛赚,網(wǎng)頁(yè)的自定義內(nèi)容分享完成。
我的博客 http://blog.xander-ye.com