微信公衆平臺開發步驟(包括自定義菜單、網頁受權、分享功能)

第一步:填寫服務器配置

第二步:驗證服務器地址的有效性

第三步:依據接口文檔實現業務邏輯

用戶向公衆號發送消息時,公衆號方收到的消息發送者是一個OpenID,是使用用戶微信號加密後的結果,每一個用戶對每一個公衆號有一個惟一的OpenID。此外,因爲開發者常常有需在多個平臺(移動應用、網站、公衆賬號)之間共通用戶賬號,統一賬號體系的需求,微信開放平臺(open.weixin.qq.com)提供了UnionID機制。開發者可經過OpenID來獲取用戶基本信息,而若是開發者擁有多個應用(移動應用、網站應用和公衆賬號,公衆賬號只有在被綁定到微信開放平臺賬號下後,纔會獲取UnionID),可經過獲取用戶基本信息中的UnionID來區分用戶的惟一性,html

1.獲取access_tokenapi

公衆號可使用AppID和AppSecret調用本接口來獲取access_token;服務器

接口調用:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET微信

2.獲知微信服務器的IP地址列表:https://api.weixin.qq.com/cgi-bin/getcallbackip?access_token=ACCESS_TOKENapp

自定義菜單微信公衆平臺

自定義菜單接口可實現多種類型按鈕,以下:異步

 一、click:點擊推事件ide

用戶點擊click類型按鈕後,微信服務器會經過消息接口推送消息類型爲event 的結構給開發者(參考消息接口指南),而且帶上按鈕中開發者填寫的key值,開發者能夠經過自定義的key值與用戶進行交互;

二、view:跳轉URL
函數

用戶點擊view類型按鈕後,微信客戶端將會打開開發者在按鈕中填寫的網頁URL,可與網頁受權獲取用戶基本信息接口結合,得到用戶基本信息。

三、scancode_push:掃碼推事件
工具

四、scancode_waitmsg:掃碼推事件且彈出「消息接收中」提示框

五、pic_sysphoto:彈出系統拍照發圖

六、pic_photo_or_album:彈出拍照或者相冊發圖
七、pic_weixin:彈出微信相冊發圖器

八、location_select:彈出地理位置選擇器

九、media_id:下發消息(除文本消息)

十、view_limited:跳轉圖文消息URL

請注意,3到8的全部事件,僅支持微信iPhone5.4.1以上版本,和Android5.4以上版本的微信用戶,舊版本微信用戶點擊後將沒有迴應,開發者也不能正常接收到事件推送。9和10,是專門給第三方平臺旗下未微信認證(具體而言,是資質認證未經過)的訂閱號準備的事件類型,它們是沒有事件推送的,能力相對受限,其餘類型的公衆號沒必要使用。

 

微信網頁受權
若是用戶在微信客戶端中訪問第三方網頁,公衆號能夠經過微信網頁受權機制,來獲取用戶基本信息,進而實現業務邏輯。
1.到公衆平臺官網中的開發者中心頁配置受權回調域名
snsapi_base 只獲取到用戶的openid
snsapi_userinfo 用來獲取用戶的基本信息

關於網頁受權access_token和普通access_token的區別
一、微信網頁受權是經過OAuth2.0機制實現的,在用戶受權給公衆號後,公衆號能夠獲取到一個網頁受權特有的接口調用憑證(網頁受權access_token),經過網頁受權access_token能夠進行受權後接口調用,如獲取用戶基本信息;
二、其餘微信接口,須要經過基礎支持中的「獲取access_token」接口來獲取到的普通access_token調用。
網頁受權獲取用戶基本信息也遵循UnionID機制,可經過獲取用戶基本信息中的unionid來區分用戶的惟一性
具體而言,網頁受權流程分爲四步:
 
微信網頁受權自我總結:

首先打開OAuth 配置;肯定Scopes是snsapi_base仍是snsapi_userinfo?

 
一、以snsapi_base爲scope發起的網頁受權,是用來獲取進入頁面的用戶的openid的,而且是靜默受權並自動跳轉到回調頁的。用戶感知的就是直接進入了回調頁(每每是業務頁面)
二、以snsapi_userinfo爲scope發起的網頁受權,是用來獲取用戶的基本信息的。但這種受權須要用戶手動贊成,而且因爲用戶贊成過,因此無須關注,就可在受權後獲取該用戶的基本信息。
 

而後可經過

 
$wechat = app('wechat');
$oauth = $wechat->oauth;
$wechat_user = $oauth->user();
實例來獲取用戶信息;從中拿去到對應微信的openid;
亦或者也可經過微信公衆平臺文檔中的接口逐步獲取code,access_token等

若是須要微信受權登陸的狀況下,獲取到用戶的信息以後可繼續邏輯操做。好比:判斷用戶若是有登陸過就直接跳轉到網站首頁或者我的中心;若未登陸需受權登陸方可繼續下一步操做。

微信JS-SDK說明文檔
微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力,同時能夠直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,爲微信用戶提供更優質的網頁體驗。

JSSDK使用步驟

步驟一:綁定域名

步驟二:引入JS文件

步驟三:經過config接口注入權限驗證配置

步驟四:經過ready接口處理成功驗證

全部接口調用都必須在config接口得到結果以後,config是一個客戶端的異步操做,因此若是須要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口,則能夠直接調用,不須要放在ready函數中
 

判斷當前客戶端版本是否支持指定JS接口

wx.checkJsApi({
    jsApiList: ['chooseImage'], // 須要檢測的JS接口列表,全部JS接口列表見附錄2,
    success: function(res) {
        // 以鍵值對的形式返回,可用的api值true,不可用爲false
        // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

獲取「分享給朋友」按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareAppMessage({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享連接
    imgUrl: '', // 分享圖標
    type: '', // 分享類型,music、video或link,不填默認爲link
    dataUrl: '', // 若是type是music或video,則要提供數據連接,默認爲空
    success: function () { 
        // 用戶確認分享後執行的回調函數
    },
    cancel: function () { 
        // 用戶取消分享後執行的回調函數
    }
});

相關例子:

相關文章
相關標籤/搜索