微信公眾號學習筆記（下）

• 簡介

本文主要記錄微信公眾號的學習筆記（下），包含以下內容：

1. 客服管理
2. 素材管理
3. 統計分析
4. 微信前段開發技術
5. 微信門店管理
6. 微信支付

 

1. 客服管理

公眾號可以通過客服與粉絲進行溝通。一個公眾號可以有多個客服，每個客服都有自己的頭像和昵稱。

1)   客服賬號管理

可以在應用程序中對微信客服賬號進行管理，包括獲取客服賬號列表信息、添加客服賬號、設置客服賬號屬性、刪除客服賬號等。

1. 開通客服賬號

客服功能需要在微信公眾平台開通后才可以使用。登錄微信公眾平台，選擇左側“菜單欄” -> 功能 -> 添加功能插件 -> 客服功能 -> 申請開通。

注：開通客服功能錢，必須開通微信認證。

 

1. 獲取客服賬號的列表信息

GET 方式請求：https://api.weixin.qq.com/cgi-bin/customservice/getkflist?access_token=

 

1. 添加客服賬號

POST 方式請求：https://api.weixin.qq.com/customservice/kfaccount/add?access_token=

 

1. 刪除客服賬號

POST 提交請求：https://api.weixin.qq.com/customservice/kfaccount/del?access_token=

 

1. 上傳客服頭像

POST 提交請求：https://api.weixin.qq.com/customservice/kfaccount/uploadheadimg?access_token=

 

l  參考文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1458044813

 

2)   通過客服接口發送消息

公眾號可以通過客服接口向自己的粉絲用戶發送消息，客服消息包括文本、圖片、語言、視頻、音樂、圖文消息等。發送客服消息的接口如下：

https://api.weixin.qq.com/cgi-bin/message/custom/send?access_token=

注：將不同的消息類型數據庫推送至該接口，將發送不同的類型的消息。

l  參考文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140547

 

1. 素材管理

微信公眾號可以對素材進行管理，包括圖文消息、圖片、語音、視頻等。通過接口可以是實現對素材的新增、刪除、獲取等操作。素材分為臨時素材和永久素材，但是它們的操作方法並不相同。

1)   臨時素材管理

每個臨時素材都有一個 media_id，可以用於獲取臨時素材，但臨時素材只保留三天，三天后自動刪除。

1. 新增臨時素材

POST 方式請求：http://file.api.weixin.qq.com/cgi-bin/media/upload?access_token={0}&type={1}

 

1. 獲取臨時素材

GET 方式請求：https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID

 

l  參考文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1444738726

 

2)   永久素材管理

永久素材顧名思義是可以永久保存在微信服務器上的，但是素材的數量是有上限的，圖文消息和圖片素材上限為5000，其他類型的上限為1000.

1. 新增其他類型永久素材

POST 方式請求：http://api.weixin.qq.com/cgi-bin/material/add_material?access_token={0}

 

1. 新增永久圖文素材

POST 方式請求：https://api.weixin.qq.com/cgi-bin/media/uploadnews?access_token=

 

1. 新增圖文消息內的圖片獲取URL

POST 方式請求：http://file.api.weixin.qq.com/cgi-bin/media/uploadimg?access_token=

 

1. 獲取永久素材

POST 方式請求：https://api.weixin.qq.com/cgi-bin/material/get_material?access_token=

 

1. 修改永久圖文素材

POST 方式請求：https://api.weixin.qq.com/cgi-bin/material/update_news?access_token=

 

1. 獲取素材總數

GET 方式請求：https://api.weixin.qq.com/cgi-bin/material/get_materialcount?access_token=

 

1. 獲取素材列表

POST 方式請求：https://api.weixin.qq.com/cgi-bin/material/batchget_material?access_token=

 

1. 刪除永久素材

POST 方式請求：https://api.weixin.qq.com/cgi-bin/material/del_material?access_token=

 

l  參考文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1444738729

 

1. 統計分析

微信公眾平台提供了豐富的數據統計接口。

目前，微信公眾平台提供了用戶增減數據和用戶累計數據2個數據統計接口。

1)   獲取用戶增減數據

POST 方式請求：https://api.weixin.qq.com/datacube/getusersummary?access_token=

參考文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141082

 

2)   獲取累計用戶數據

POST 方式請求：https://api.weixin.qq.com/datacube/getusercumulate?access_token=

 

3)   獲取圖文群發每日數據

POST 方式請求：https://api.weixin.qq.com/datacube/getarticlesummary?access_token=

 

4)   獲取圖文群發總數據

POST 方式請求：https://api.weixin.qq.com/datacube/getarticletotal?access_token=

 

5)   獲取圖文統計數據

POST 方式請求：https://api.weixin.qq.com/datacube/getuserread?access_token=

 

6)   獲取圖文統計分時數據

POST 方式請求：https://api.weixin.qq.com/datacube/getuserreadhour?access_token=

 

7)   獲取圖文分享轉發數據

POST 方式請求：https://api.weixin.qq.com/datacube/getusershare?access_token=

 

8)   獲取圖文分享轉發分時數據

POST 方式請求：https://api.weixin.qq.com/datacube/getusersharehour?access_token=

 

9)   獲取消息發送概況數據

POST 方式請求：https://api.weixin.qq.com/datacube/getupstreammsg?access_token=

 

10)  獲取消息發送月數據

POST 方式請求：https://api.weixin.qq.com/datacube/getupstreammsgmonth?access_token=

 

11)  獲取消息發送周數據

POST 方式請求：https://api.weixin.qq.com/datacube/getupstreammsgweek?access_token=

 

12)  獲取消息發送分時數據

POST 方式請求：https://api.weixin.qq.com/datacube/getupstreammsghour?access_token=

 

13)  獲取消息發送分布數據

POST 方式請求：https://api.weixin.qq.com/datacube/getupstreammsgdist?access_token=

 

14)  獲取消息發送分布月數據

POST 方式請求：https://api.weixin.qq.com/datacube/getupstreammsgdistmonth?access_token=

 

15)  獲取消息發送分布周數據

POST 方式請求：https://api.weixin.qq.com/datacube/getupstreammsgdistweek?access_token=

 

1. 微信前段開發技術

微信提供了一個與微信原生視覺體驗一致的基礎樣式庫WeUI、一個基於微信內的網頁開發工具包 JS-SDK 和微信瀏覽器私有接口 WeixinJSBridge。利用它們可以開發出與微信緊密結合的、獨特的手機網頁。

1)   開發手機網頁的基礎

手機網頁是指可以自適應手機屏幕寬度的網頁，而微信網頁就是手機網頁的體現。手機網頁是不專業的叫法，而 H5 則是比較專業的叫法，H5 是實現手機網頁所用的技術。

 

2)   是用 jQuery Mobile 開發手機網頁

jQuery Mobile 是基於 jQuery 的針對屏幕智能手機與平板電腦的 Web 開發框架，是兼容所有主流移動設備平台的、支持HTML5的用戶界面設計系統。

 

3)   開發自適應的H5網頁

借助 jQuery Mobile 開發手機網頁固然很方便，但也有一定限制，一般都需要選擇固定主題，設計自定義樣式的網頁不是很方便。

其實，自己開發自適應的 H5 網頁也很容易，只要在網頁代碼的頭部加入下面的代碼即可：

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

屬性解釋如下：

width=device-width	表示網頁寬度默認等於屏幕寬度
initial-scale=1	原始縮放比例為1.0，即網頁初始大小占屏幕面積的100%
user-scalable=no	表示用戶不能手動縮放

 

 

4)   微信網頁開發樣式庫

1. CSS基礎

 

1. 微信網頁開發樣式庫 WeUI

WeUI 是與微信原生視覺體驗一致的基礎樣式庫，使用它可以設計出與微信客戶端一致的網頁視覺效果。WeUI 目前包含 button、cell、dialog、progress、toast、Msg Page、atricle、icon 等個元素。

首先，在頁面中引入 weui.css，例如：/dist/style/weui.css

 

1. 按鈕

WeUI 中定義的按鈕 class：

可選值	描述
weui_btn	WeUI 按鈕，寬度為100%
weui_btn_primary	綠色背景的 WeUI 基礎按鈕
weui_btn_disabled	被禁用的 WeUI 按鈕
weui_btn_warn	紅色背景的 WeUI 警告按鈕
weui_btn_default	灰邊、灰底的 WeUI 按鈕
weui_btn_plain_default	黑邊、白底的 WeUI 按鈕
weui_btn_plain_primary	綠邊、白底的 WeUI 按鈕
weui_btn_mini	自適應寬度的 WeUI 按鈕

這些按鈕 class 通常組合使用，例如：<a href="#" class="weui_btn weui_btn_primary">weui_btn weui_btn_primary按鈕</a>

 

1. 列表視圖 Cell

Cell 用於將信息以列表的結構顯示在頁面上，每個 Cell 由多個 section（部分） 組成，每個 section 包括標題(weui_cells_title)以及單元格(weui_cells)。

 

1. 對話框 Dialog

WeUI 中定義的對話框 class：

可選值	描述
weui_dialog_confirm	包含“確定”和“取消”按鈕的對話框
weui_dialog_alert	只包含“確定”按鈕的對話框
weui_dialog	用於定義包含對話框內容的 div 元素
weui_dialog_title	用於定義包含對話框標題的 div 元素

 

1. 進度條 Progress

WeUI 中定義的進度條 class：

可選值	描述
weui_progress	用於定義包含進度條和取消操作按鈕的容器
weui_progress_bar	用於定義整個進度條
weui_progress_inner_bar	用於定義進度條當前進度的部分
weui_progress_opr	用於定義對進度條進行操作的超鏈接
weui_progress_cancel	用於定義取消按鈕

 

1. 臨時提示框 Toast

臨時提示框用於臨時顯示某些信息，並且會在數秒后自動消失。

WeUI 中定義的臨時提示框 class：

可選值	描述
weui_loading_toast	用於定義“加載中”臨時提示框
weui_mask_transparent	用於定義臨時提示框的背景黑幕
weui_progress_inner_bar	用於定義進度條當前進度的部分
weui_loading	用於定義臨時提示框中的加載動圖
weui_loading_leaf weui_loading_leaf_0	用於定義加載動圖中的一個葉子，最后一個數字決定該葉子的位置
weui_toast_content	用於定義“加載中”臨時提示框的提示文字

 

1. Msg Page

WeUI 中定義了一組用於顯示結果頁（Msg Page）的 class，結果頁通常用於在進行一系列操作步驟后，作為流程結束的總結性頁面。結果頁的作用主要是告知用於操作處理結果以及必要的相關細節等信息。

WeUI 中定義的 Msg Page class：

可選值	描述
weui_msg	用於定義 Msg Page
weui_icon_area	用於定義微信圖標的區域
weui_icon_success	用於定義操作成功圖標
weui_icon_msg	用於定義微信圖標
weui_text_area	用於定義文本區域
weui_msg_title	用於定義標題區域
weui_msg_desc	用於定義描述信息文本
weui_opr_area	用於定義操作區域
weui_btn_area	用於定義按鈕區域
weui_extra_area	用於定義顯示其他信息的區域

 

1. 文章頁面 Article

在 WeUI 中可以使用 article 元素定義一篇文章頁面，例如：

<article>

……

</article>

 

1. 圖標 Icon

WeUI 中定義了一組 class，用於在網頁中定義圖標。

WeUI 中定義的圖標 class：

可選值	描述
weui_icon_msg	用於定義圖標
weui_icon_success	用於定義成功圖標
weui_icon_info	用於定義信息圖標
weui_icon_warn	用於定義警告圖標
weui_icon_waiting	用於定義等待圖標
weui_icon_safe_success	用於定義安全成功圖標
weui_icon_safe_warn	用於定義安全警告圖標
weui_icon_success_no_circle	用於定義沒有圓框的成功圖標
weui_icon_waiting_circle	用於定義有一個圓框的等待圖標
weui_icon_circle	用於定義圓框圖標
weui_icon_download	用於定義下載圖標
weui_icon_info_circle	用於定義有一個圓框的信息圖標
weui_icon_cancel	用於定義取消圖標

可以使用<i>元素定義，例如：<i class="weui_icon_cancel"></i>

 

5)   微信 JS-SDK

微信 JS-SDK 是微信公眾平台提供的基於微信內的網頁開發工具包。通過使用微信 JS-SDK，開發者可以在網頁中實現拍照、選圖、語言、獲取網絡狀態、地理位置等手機系統功能，同時可以直接使用微信分享、微信支付等微信特有的能力。

1. 綁定域名

在網頁中需要使用 JS-SDK 功能，首先需要在微信公眾平台中綁定域名。進入微信公眾平台，在菜單欄選擇設置 -> 公眾號設置 -> 功能設置 -> 點擊“JS接口安全域名”中的設置，具體設置參考頁面說明。

 

1. 開始使用 JS-SDK

1)   在使用 JS-SDK 前，首先需要引入下面的js腳本。

http://res.wx.qq.com/open/js/jweixin-1.4.0.js

注意：使用最新的版本，否則有些接口可能已經廢棄！

 

2)   然后，通過 config 接口進行權限驗證配置，具體如下：

wx.config({

    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。

    appId: '', // 必填，公眾號的唯一標識

    timestamp: , // 必填，生成簽名的時間戳

    nonceStr: '', // 必填，生成簽名的隨機串

    signature: '',// 必填，簽名

    jsApiList: [] // 必填，需要使用的JS接口列表

});

注意：所有的 JS-SDK 接口都需要在 config 接口成功驗證之后才能夠調用成功。否則可能報錯：the permission value is offline verifying

 

3)   權限驗證配置過程

1. 處理驗證成功

config 是一個客戶端的異步操作，當完成驗證后會執行 wx.ready() 函數，例如：

wx.ready(function() { alert("ready"); });

注：執行 wx.ready() 函數並不意味着成功用過了權限驗證，只是說明權限驗證操作成功。

 

1. 處理驗證失敗

當 wx.config() 驗證失敗后，會執行 wx.error() 函數，例如：

wx.error(function(res) { alert("wx.error:" + JSON.stringify(res)); });

 

4)   調用基礎接口

JS-SDK 提供一個基礎接口，即 wx.checkJsApi()，用於檢測當前客戶端版本是否支持指定的接口，具體語法參考官方文檔。

 

5)   分享接口

JS-SDK 提供了一組分享接口，可以將當前網頁分享到朋友圈、QQ空間、朋友、QQ等。

注意：分享的"link"參數必須在“綁定域名”范圍（三個）內的，否則將報錯：fail link must be in js secure domain list

 

6)   圖像接口

JS-SDK 提供了一組圖像接口，可以在網頁中進行拍照或從手機相冊中選圖、預覽圖片、上傳圖片、下載圖片、獲取本地圖片等。

 

7)   圖像接口

JS-SDK 提供了一組圖像接口，可以在網頁中進行錄音、播放錄音、上傳語言、下載語言、識別語言等。

 

8)   獲取網絡狀態接口

調用 wx.getNetworkType() 接口可以獲取當前網絡類型，例如：2g，3g，4g，wifi

 

9)   地理位置接口

JS-SDK 提供了2個與地理位置有關的接口，用於獲取地位和使用微信內置地圖查看位置。

 

10)  關閉當前網頁窗口接口

調用 wx.closeWindow() 接口可以關閉當前網頁窗口。

 

l  參考文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

 

6)   微信瀏覽器私有接口 WeixinJSBridge

微信提供了一組私有接口 - WeixinJSBridge，通過 WeixinJSBridge 可以實現分享文章、關注用戶、微信支付等功能。

1. onBridgeReady 事件

當微信內置瀏覽器完成內部初始化后會觸發 WeixinJSBridgeReady 事件，可以在此事件的處理函數中添加一些頁面初始化代碼。例如：

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady()

{

    alert("WeixinJSBridgeReady");

    WeixinJSBridge.call('hideOptionMenu');

    WeixinJSBridge.call('showToolbar');

});

 

1. WeixinJSBridge.call() 方法

通過 WeixinJSBridge.call() 方法可以調用微信瀏覽器私有接口。

WeixinJSBridge.call("hideOptionMenu")	單擊微信網頁右上角的按鈕后，隱藏第一行菜單
WeixinJSBridge.call("showOptionMenu")	單擊微信網頁右上角的按鈕后，顯示第一行菜單，默認為顯示
WeixinJSBridge.call("hideToolbar")	隱藏微信網頁底部的導航欄
WeixinJSBridge.call("showToolbar")	顯示微信網頁底部的導航欄

 

1. WeixinJSBridge.invoke() 方法

也可以通過 WeixinJSBridge.invoke() 方法調用微信瀏覽器的私有接口，包括預覽圖片、獲取網絡類型、關閉當前網頁、發送郵件、JS API 支付接口等。

 

1. 微信門店管理

門店功能是公眾平台向商戶提供的對其線下實體門店數據的基礎管理能力。通過門店管理功能，商戶可對自己的實體門店數據進行線上管理，並在相關業務場景中運營和展示。

1)   申請開通門店功能

登錄微信公眾平台 -> 左側菜單欄選擇功能 -> 添加功能插件 -> 門店管理，進行申請。但是，新版本的微信公眾平台已經沒有“微信門店”插件了？

 

2)   門店管理開發接口

1. 獲取門店列表

POST 方式請求：https://api.weixin.qq.com/cgi-bin/poi/getpoilist?access_token=

 

1. 獲取門店信息

POST 方式請求：http://api.weixin.qq.com/cgi-bin/poi/getpoi?access_token=

 

1. 創建門店

POST 方式請求：http://api.weixin.qq.com/cgi-bin/poi/addpoi?access_token=

 

1. 刪除門店

POST 方式請求：http://api.weixin.qq.com/cgi-bin/poi/delpoi?access_token=

 

l  參考文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1444378120

 

1. 微信支付

微信支付是微信和第三方支付平台財付通聯合推出的移動支付產品。利用提供的開發接口，商戶可以通過微信實現在線收款、發放紅博愛、企業付款等功能。

1)   微信支付的類型

1. 付款碼支付

用戶打開微信錢包-付款碼的界面，商戶掃碼后提交完成支付

1. JSAPI 支付

用戶通過微信掃碼、關注公眾號等方式進入商家H5頁面，並在微信內調用JSSDK完成支付

1. Native支付

用戶打開“微信掃一掃”，掃描商戶的二維碼后完成支付

1. APP支付

商戶APP中集成微信SDK，用戶點擊后跳轉到微信內完成支付

1. H5支付

用戶在微信以外的手機瀏覽器請求微信支付的場景喚起微信支付

1. 小程序支付

用戶在微信小程序中使用微信支付的場景

1. 人臉支付

無需掏出手機, 刷臉完成支付, 適合線下各種場景

 

2)   支付工具

1. 代金券或立減優惠

商戶營銷和運營的能力，給用戶發放代金券或立減優惠的相關說明

1. 現金紅包

提供給商戶營銷的能力，商戶給用戶派發現金紅包相關說明

1. 企業付款

企業付款至用戶微信支付零錢或銀行卡

 

3)   開通微信支付

商戶需要提交申請，並通過審批后，才可以開通微信支付。

1. 第一步，准備微信公眾號

只有擁有通過認證的微信公眾賬號的用戶才能接入微信支付，並且需要為服務號或者企業號。認證審核的服務費為300元/次。

 

1. 第二步，申請微信支付

申請微信支付的前提是公眾號必須通過認證。

 

1. 第三部，開發和部署

開通微信支付后，開發者可以從微信客服人員那里得到如下信息：

l  商戶號（MCHID）

l  商戶支付秘鑰（KEY）

l  證書（apiclient_cert.p12）,僅在退款、發送紅包和付款時需要。

 

4)   開發步驟

1. 設置支付目錄
2. 設置授權域名

l  參考文檔：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3

 

5)   JSAPI 支付

JSAPI 支付就是通過調用微信提供的 Java Script API，實現在線支付功能的。

n  准備工作

1. 首先，登錄“微信商戶平台”開通 JSAPI 支付功能，進入產品中心 -> 我的產品 -> 支付產品 -> 開通“JSAPI 支付”即可。

https://pay.weixin.qq.com/index.php/core/info

 

n  具體實現步驟如下：

1. 第一步：OAuth2.0 授權

1)   用戶同意授權，獲取code

2)   通過 code 換取網頁授權 access_token

 

1. 第二步：調用統一支付接口

1)   准備請求參數

2)   簽名

3)   構造請求參數

4)   調用統一支付接口

1. POST 方式請求：https://api.mch.weixin.qq.com/pay/unifiedorder
2. 解析統一支付接口響應參數
3. 准備發起JSAPI支付的參數

l  參考文檔：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

 

1. 第三步：發起JSAPI支付

注：在網頁中使用 JS WeixinJSBridge 內置對象進行發起JSAPI支付。

l  參考文檔：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

 

1. 第三步：接收微信支付結果通知

 

6)   掃碼支付模式一

n  准備工作

1. 首先，登錄“微信商戶平台”開通 Native 支付功能，進入產品中心 -> 我的產品 -> 支付產品 -> 開通“Native 支付”即可。

https://pay.weixin.qq.com/index.php/core/info

 

1. 然后，配置掃碼支付回調鏈接，登錄“微信商戶平台”，進入產品中心 ->

開發配置 -> 支付配置 -> 設置“掃碼回調鏈接”。

 

1. 參考文檔：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_4

 

n  具體實現步驟如下：

1. 第一步：根據微信支付規定格式生成二維碼
2. 第二步：微信支付系統收到掃碼請求后，會發起對商戶后台的回調，帶有product_id、openid等參數，要求商戶系統返回數據包

1)   接收並解析回調數據

2)   調用統一支付接口，獲取prepay_id

1. 第三步：商戶后台系統將prepay_id等參數返回給微信支付系統
2. 第三步：接收微信支付結果通知

 

7)   掃碼支付模式二

n  准備工作

1. 首先，登錄“微信商戶平台”開通 Native 支付功能，進入產品中心 -> 我的產品 -> 支付產品 -> 開通“Native 支付”即可。

https://pay.weixin.qq.com/index.php/core/info

 

1. 參考文檔：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_5

 

n  具體實現步驟如下：

1. 第一步：設置掃碼支付的訂單數據
2. 第二步：調用統一支付接口

1)   准備請求參數

2)   簽名

3)   構造請求參數

4)   調用統一支付接口

1. POST 方式請求：https://api.mch.weixin.qq.com/pay/unifiedorder
2. 解析統一支付接口響應參數
3. 在頁面中顯示支付二維碼（從第三步生成獲取）
4. 第三步：根據返回的code_url生成二維碼，並以文件內容返回
5. 第三步：接收微信支付結果通知

 

8)   訂單查詢

POST 方式請求：https://api.mch.weixin.qq.com/pay/orderquery

參考文檔：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_2

 

 

9)   支付模式比較

支付類型	OAuth授權	方便設置金額	適用場景
JSAPI 支付	是	方便	適合在公眾號網頁中使用
掃碼支付模式一	否	不方便	適合在根據訂單支付的場景，使用（使用產品ID關聯金額等信息）
掃碼支付模式二	否	方便	適合在網頁中掃碼支付

 

10)  發放紅包與企業付款《待續》