微信公眾平臺(tái)開(kāi)發(fā)配置及自定義分享

剛剛做了微信的自定義分享伐脖,折騰了好一會(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)擊保存和屎,成功

設(shè)置域名

2.開(kāi)發(fā)》基本配置

啟用開(kāi)發(fā)者,獲得AppID春瞬、AppSecret兩個(gè)參數(shù)
然后填寫(xiě)IP白名單柴信,也就是你服務(wù)器所在的公網(wǎng)ip


啟用開(kāi)發(fā)者/設(shè)置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

微信公眾號(hào)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末稽揭,一起剝皮案震驚了整個(gè)濱河市俺附,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌淀衣,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,525評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件召调,死亡現(xiàn)場(chǎng)離奇詭異膨桥,居然都是意外死亡蛮浑,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)只嚣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)沮稚,“玉大人,你說(shuō)我怎么就攤上這事册舞≡烫停” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,862評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵调鲸,是天一觀的道長(zhǎng)盛杰。 經(jīng)常有香客問(wèn)我,道長(zhǎng)藐石,這世上最難降的妖魔是什么即供? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,728評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮于微,結(jié)果婚禮上逗嫡,老公的妹妹穿的比我還像新娘。我一直安慰自己株依,他們只是感情好驱证,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,743評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著恋腕,像睡著了一般抹锄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上吗坚,一...
    開(kāi)封第一講書(shū)人閱讀 51,590評(píng)論 1 305
  • 那天祈远,我揣著相機(jī)與錄音,去河邊找鬼商源。 笑死车份,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的牡彻。 我是一名探鬼主播扫沼,決...
    沈念sama閱讀 40,330評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼庄吼!你這毒婦竟也來(lái)了缎除?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,244評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤总寻,失蹤者是張志新(化名)和其女友劉穎器罐,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體渐行,經(jīng)...
    沈念sama閱讀 45,693評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡轰坊,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,885評(píng)論 3 336
  • 正文 我和宋清朗相戀三年铸董,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片肴沫。...
    茶點(diǎn)故事閱讀 40,001評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡粟害,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出颤芬,到底是詐尸還是另有隱情悲幅,我是刑警寧澤,帶...
    沈念sama閱讀 35,723評(píng)論 5 346
  • 正文 年R本政府宣布站蝠,位于F島的核電站汰具,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏沉衣。R本人自食惡果不足惜郁副,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,343評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望豌习。 院中可真熱鬧存谎,春花似錦、人聲如沸肥隆。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,919評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)栋艳。三九已至恰聘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間吸占,已是汗流浹背晴叨。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,042評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留矾屯,地道東北人兼蕊。 一個(gè)月前我還...
    沈念sama閱讀 48,191評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像件蚕,于是被迫代替她去往敵國(guó)和親孙技。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,955評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容