微信門戶開發框架相關文檔

為了更有效管理訂閱用戶以及分組信息，我們可以從微信服務器上獲取相關的信息，供我們了解關注的用戶信息，也可以為后續的群發消息做準備。

訂閱用戶的管理如下所示，默認可以通過用戶的地區進行查看，地區根據：國家-省份-城市這樣的級別進行展開。

也可以根據標簽查看，標簽可以進行維護，以及為標簽加入或者移除人員，界面如下圖所示。

以及可以根據分組查看，如下所示。

訂閱用戶可以從微信服務器上進行同步到本地，單擊同步數據，可以把服務器上的用戶數據下載到本地進行更新或者寫入。

雙擊可以查看訂閱用戶信息，查看訂閱用戶的詳細信息界面如下所示。

2.9）用戶標簽管理

微信公眾號，仿照企業微信的思路，增加了標簽管理的功能，對關注的粉絲可以設置標簽管理，實現更加方便的分組管理功能。開發者可以使用用戶標簽管理的相關接口，實現對公眾號的標簽進行創建、查詢、修改、刪除等操作，也可以對用戶進行打標簽、取消標簽等操作。

標簽管理是替代用戶組管理的一種標簽，可以很好管理訂閱的用戶，我們可以通過封裝好的微信接口很容易的獲取騰訊服務器上用戶標簽列表，然后進行管理，如下圖所示。

同時前面提到了，可以在訂閱用戶按標簽進行維護的，如下所示。

編輯標簽信息界面如下所示。

2.10）多媒體管理

多媒體管理是指把本地文件上傳到微信服務器上進行保存，方便信息的發送等操作。微信要求，某些信息，必須是先上傳到服務器上，然后才能使用它的媒體ID進行發送的。

文件成功上傳到服務器后，在列表里面的“文件上傳標識，就是一串的編碼數據，同時有一個上傳的時間戳（因為微信服務器只保留了3天的媒體數據，超過期限的數據會被自動刪除。

同時，在列表的上面，有兩個重要的功能：上傳選定的記錄，重新上傳過期的記錄。方便我們對自己多媒體文件的重新更新操作。

添加界面操作如下所示，其中引入了附件上傳的控件進行文件的操作，非常方便。同時上傳成功的文件，會在列表中列出。

多媒體文件可以是下面幾種方式：圖片、語音、視頻、縮略圖。

保存后的數據記錄，文件上傳標識和時間戳都是空的，我們如果要使用，必須把他們上傳到微信的服務器上，然后根據它的進行信息的發送，上傳選定的記錄操作界面如下所示。

多媒體文件順利上傳后，記錄的信息如下所示。

2.11）圖文消息處理

圖文消息分為單圖文消息和多圖文消息兩種，單圖文消息如下所示。

多圖文消息如下所示：

和多媒體數據管理一樣，圖文消息也是通過同樣的方式進行管理，先上傳到服務器，然后在進行消息的發送操作，多媒體消息一樣有時間方面的限制要求，具體在我們的微信門戶平臺里面管理界面如下所示。

添加圖文消息界面如下所示，保存后，可以在編輯界面中的“其他圖文列表”里面，繼續添加多圖文的消息內容。

在添加界面中，選擇圖文消息的縮略圖，都是通過選定指定的，已經上傳到服務器上圖片或者縮略圖資源才可以的。

添加后的多圖文列表，可以進行查看管理。

保存記錄后，然后繼續上傳，上傳后的記錄界面如下所示，成功后返回一個上傳后的服務器標識和時間戳，否則提示錯誤。

2.12）會話消息管理

為了方便記錄客戶的輸入和發送信息，我們在微信門戶管理平臺里面記錄用戶的輸入數據，具體會話消息管理界面如下所示。

我們可以雙擊最近48小時內的任何一條記錄，可以給關注的客戶進行消息的發送操作，如果消息發送成功，用戶在手機的微信賬號里面就能收到相關的發送消息了。

2.13）群發消息管理

為了對客戶進行相應的營銷操作，有時候我們需要對指定的群主或者人員進行消息的群發，讓客戶經常性的了解我們產品的信息和活動。

由于群發消息，除了文本消息，可以直接編輯發送外，其他數據，必須要求是上傳到服務器的多媒體文件或者圖文消息內容，因此前面的多媒體管理和圖文消息管理，就是主要為了群發消息的目的引入的。有了上面的多媒體和多圖文信息，我們從平臺里面選擇記錄即可進行發送，從而省卻麻煩的連帶工作，實現高效的信息群發操作。

群發的消息，可以按群發分組進行查看，也可以按照消息類型進行查看，使得我們管理起來根據方便。

添加圖文消息，可以選擇文本消息、圖文消息、圖片消息等內容，根據不同的內容，界面提供不同的選擇操作。

消息的群發類型分為兩種，一種是根據分組，那么從平臺里面選擇對應的分組即可；一種是根據用戶的進行發送，提供給用戶輸入。主要的操作界面如下所示。

2.14）使用語音處理

我們知道，微信最開始就是做語音聊天而使得其更加流行的，因此語音的識別處理自然也就成為微信交流的一個重要途徑，微信的開發接口，也提供了對語音的消息請求處理。這里主要介紹如何利用語音的識別，對C#開發的微信門戶應用的整個事件鏈的處理操作，使得在我們的微信賬號里面，更加方便和多元化對用戶的輸入進行處理。

在系統后臺里面，會檢查是否獲得了微信的語音識別結果，如果獲得，那么這個時候，就是和處理用戶文本輸入的操作差不多了，語音輸入的處理邏輯如下所示。

首先我根據識別結果，尋找是否用戶讀出了微信門戶的菜單名稱，如果根據語音結果找到對應的菜單記錄，那么我們執行菜單事件（如果是URL的View類型菜單，我們沒辦法重定向到指定的鏈接，因此給出一個鏈接文本提示，給用戶單擊進入；如果沒有找到菜單記錄，那么我們就把語音識別結果作為一般的事件進行處理，如果事件邏輯沒有處理，那么我們最后給出一個默認的語音應答提示結果就可以了。

微信門戶測試界面效果如下所示。

為了方便對客戶會話的記錄，我的微信門戶后臺，會記錄用戶的語音輸入內容，如下所示。

2.15）使用地理位置擴展相關應用

我們知道，地理位置信息可以用來做很多相關的應用，除了我們可以知道用戶所在的位置，還可以關聯出一些地理位置的應用，如天氣，熱映影片，附近景點，附近影院，交通事件等等，反正所有和地理位置相關的信息，我們都可以根據需要做一些擴展應用。這里主要介紹利用地理位置信息，如何構建使用這些應用的操作。

1）微信的地理位置信息

在使用前，我們先來看看微信的接口，為我們定義了那些關于與地理位置的信息。其實地理位置的信息，微信分為了兩個方面，一個是接收用戶的地理位置請求，一個是用戶允許上報地理位置操作，定時發送的地理位置信息。

地理位置的上報操作，就是在輸入的地方，選擇+號進行添加地理位置，然后選擇當前或者指定的地理位置地圖，具體操作如下所示。

首先對用戶地理位置的請求，我根據數據庫配置給出了一個用戶選擇的指令提示，如下所示。

為了對地理位置請求的處理，我定義了一個用于處理這個操作的指令操作

這樣整個地理位置的指令操作，就在應答鏈里面進行很好的跳轉管理了。幾個應用擴展的界面效果如下所示。

2.16）微信掃碼登錄

在現今很多網站里面，都使用了微信開放平臺的掃碼登錄認證處理，這樣做相當于把身份認證交給較為權威的第三方進行認證，在應用網站里面可以不需要存儲用戶的密碼了。

在用戶列表的二維碼連接上，單擊可以對用戶進行微信掃碼綁定，這樣用戶可以在掃碼登錄處直接掃碼登錄，不需要輸入賬號密碼。

一旦成功綁定用戶微信，在微信端會定位到一個綁定成功的頁面（自定義的H5頁面），如下所示。

如果用戶已經進行了二維碼綁定，則可以在管理界面進行取消綁定，這樣可以解綁用戶賬號和微信之間的關聯。

2.17）微信搖一搖紅包功能

搖一搖周邊紅包接口是為線下商戶提供的發紅包功能。用戶可以在商家門店等線下場所通過搖一搖周邊領取商家發放的紅包，在線上轉發分享無效。

開發者可通過接口開發搖一搖紅包功能，特點包括：

可選擇使用模板加載頁或自定義頁面調起微信原生紅包頁面(詳見創建紅包活動中字段，1為使用模板，2為使用自定義頁面)原生紅包頁面拆紅包，無需通過公眾號消息下發提供關注公眾號能力，用戶可自行選擇是否關注(裂變紅包分享時無效)完成頁面可配置跳轉鏈接，可跳轉商戶的其他自定義頁面同一個用戶在單個紅包活動中只能領取1次紅包

用戶側交互流程

常規的搖一搖紅包的流程如下所示，這里沒有使用用戶自定義的模板，也就是使用系統內置的（努力加載中。。。）的頁面，紅包需要自己拆開。

紅包組件接口調用流程

申請紅包接口權限：登錄搖一搖周邊商戶后臺,進入開發者支持，申請開通搖一搖紅包組件接口;紅包預下單：調用微信支付的api進行紅包預下單，告知需要發放的紅包金額，人數，生成紅包；創建活動并錄入紅包信息：調用搖周邊平臺的api錄入創建紅包活動并錄入信息，傳入預下單時生成的紅包；調用抽紅包：在搖出的頁面中通過調用抽紅包，抽中紅包的用戶可以拆紅包；調用以上接口時，紅包提供商戶和紅包發放商戶公眾號要求一致。

搖一搖紅包的處理過程可以先的流程說明，申請權限后，需要在搖一搖后臺配置相關的紅包處理頁面，然后通過紅包接口處理提交紅包數據，最后通過搖一搖的設備搖出界面，使用實現抽取紅包的操作，具體過程如下所示。

其中紅包接口處理，是調用一系列的紅包接口實現的，包括紅包預下單、創建紅包活動、錄入紅包信息等操作，如下所示。

其中微信支付的相關配置信息在賬號的信息里面

利用搖一搖以及微信紅包接口，使用手機搖一搖獲得紅包的過程界面效果如下所示。

對封裝好的微信接口，接口成功調用后，我們可以在公眾號的對話里面看到紅包的信息結果，如下是整個紅包發送及拆開的過程。

另外我們也對裂變紅包進行了接口的封裝，如果我們需要發送裂變紅包的時候，直接調用裂變紅包的接口即可實現紅包發送的操作。

2.18）微信H5頁面及JSDK開發

在我們開發微信頁面的時候，需要大量用到了各種呈現的效果，一般可以使用的效果來設計不同的頁面，不過微信團隊也提供很多這方面的資源，包括的接口，以及Weui的頁面樣式和相關功能頁面，給我們提供了很大的便利。

1)

微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包。通過使用微信JS-SDK，網頁開發者可借助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優質的網頁體驗。

目前支持的接口分類包括下面幾類：基礎接口、分享接口、圖像接口、音頻接口、智能接口、設備信息、地理位置、搖一搖周邊、界面操作、微信掃一掃、微信小店、微信卡券、微信支付，隨著微信功能的全部整合，估計更多的接口會陸續開放出來。

2）WeUI和 WeUI

WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁開發量身設計，可以令用戶的使用感知更加統一。在微信網頁開發中使用 WeUI，有如下優勢：

該樣式庫目前包含 、cell、、、、、icon 等各式元素，已經在上開源。訪問或微信掃碼即可預覽。

WeUI中使用的是官方 WeUI 的 CSS 代碼，并提供了 / 版本的 API 實現。 WeUI相對于在官方WeUI的基礎上做了一些功能擴展，已豐富界面設計和相關功能，因此我們可以考慮直接基于 WeUI的基礎上進行頁面開發即可。

在我前面的一些案例中，都利用了We UI樣式來進行很多微信H5頁面的功能設計，包括微信支付頁面、簽到頁面等等。

如微信支付頁面如下所示：

以及簽到頁面效果如下所示。

當然我們可以根據業務需要，增加很多這樣和微信色調樣式一致的頁面，這個就是利用WeUI樣式帶來的界面體驗一致性的好處。

本篇主要介紹微信H5頁面開發的經驗總結，上面提到了利用和WeUI來對微信應用的H5頁面進行開發，因此下面的相關效果也就是利用這些技術進行處理的。

字典數據的綁定：

和常規網頁功能一樣，我們在設計微信頁面應用的時候，很多數據也是來源字典數據的，而且需要把它們動態綁定在頁面上，微信頁面的 WeUI提供了一些列表字典數據的展示效果如下所示。我們在微信框架里面也使用了這些頁面組件，實現字典的綁定處理，如下所示。

同時，我們則可以在微信后臺對數據字典進行維護即可進行實時的數據更新。

3、設備維修案例功能介紹

本節介紹的是設備維修案例的微信應用場景，該需求主要圍繞固定資產（如醫療設備）的微信應用展開，包括錄入及查詢資產信息、資產盤點、設備的維修保養、日常巡檢、維修、計量檢測等事務。

整個案例微信端應用采用的是H5頁面以及微信的JSDK進行相關的接口開發，符合微信的界面風格。后端管理就是本后臺管理系統。

3.1組織機構及用戶分類（角色）

在系統中，根據系統應用，建立了相關的組織機構，以及對應的用戶分類（即用戶角色），根據不同的角色可以授權不同的功能管理界面。

組織機構如下所示。

用戶角色如下所示：

系統根據角色對菜單進行不同的顯示設置。

以超級管理員（賬號，密碼為空）登陸系統，可以對整體微信功能進行設置管理。

以普通管理員（賬號gl，密碼為）登錄系統，可以對相關的設備信息進行維護管理，如下所示。

3.2 微信菜單

在微信端，我們需要根據我們的應用，設置一些功能菜單，我們可以通過后臺進行菜單的設置，然后通過接口提交到微信服務器即可。

這樣我們提交菜單后，在公眾號上就可以對相關的功能進行操作了。

3.3設備添加及查看

在我們應用系統中，一般都為每個設備指定一個設備編碼，我們通過生成二維碼后，可以通過微信掃碼進行設備信息的添加或者完善，以及相關的操作。 設備二維碼采用連接+設備編碼的方式生成，如下所示：

設備二維碼的生成測試頁面地址是：/h5/Test，測試生成二維碼的界面效果如下所示。

有了這些帶有鏈接地址的二維碼，當用戶使用微信掃碼操作的時候，會指定調整到對應的連接，實現相應的設備添加、維修保養、日常巡檢、維修、計量檢測等事務。

在微信端使用對應的功能菜單掃碼（如使用【設備管理】=>【設備信息錄入】掃碼上面的設備二維碼），那么就可以進行設備信息的添加操作了。

如果是設備信息查看，那么在微信端列出主要的設備信息；