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


第一步:填寫服務器配置

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

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

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

1.獲取access_token

公眾號可以使用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_TOKEN

自定義菜單

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

 1、click:點擊推事件

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

2、view:跳轉URL

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

3、scancode_push:掃碼推事件

4、scancode_waitmsg:掃碼推事件且彈出“消息接收中”提示框

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

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

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

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

10、view_limited:跳轉圖文消息URL

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

 

微信網頁授權
如果用戶在微信客戶端中訪問第三方網頁,公眾號可以通過微信網頁授權機制,來獲取用戶基本信息,進而實現業務邏輯。
1.到公眾平台官網中的開發者中心頁配置授權回調域名
snsapi_base 只獲取到用戶的openid
snsapi_userinfo 用來獲取用戶的基本信息

關於網頁授權access_token和普通access_token的區別
1、微信網頁授權是通過OAuth2.0機制實現的,在用戶授權給公眾號后,公眾號可以獲取到一個網頁授權特有的接口調用憑證(網頁授權access_token),通過網頁授權access_token可以進行授權后接口調用,如獲取用戶基本信息;
2、其他微信接口,需要通過基礎支持中的“獲取access_token”接口來獲取到的普通access_token調用。
網頁授權獲取用戶基本信息也遵循UnionID機制,可通過獲取用戶基本信息中的unionid來區分用戶的唯一性
具體而言,網頁授權流程分為四步:
 
微信網頁授權自我總結:

首先打開OAuth 配置;確定Scopes是snsapi_base還是snsapi_userinfo?

 
        
1、以snsapi_base為scope發起的網頁授權,是用來獲取進入頁面的用戶的openid的,並且是靜默授權並自動跳轉到回調頁的。用戶感知的就是直接進入了回調頁(往往是業務頁面)
2、以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 () { 
        // 用戶取消分享后執行的回調函數
    }
});

相關例子:

 
        
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM