代志勇 陳姍姍 江蘇省廣播電視總臺廣播技術(shù)部

基于微信公眾號的廣播技術(shù)管理平臺

代志勇 陳姍姍 江蘇省廣播電視總臺廣播技術(shù)部

本文通過對微信公眾號進行接口開發(fā)，利用新浪云搭建云服務(wù)平臺，實現(xiàn)自主設(shè)計微信公眾號的功能，為江蘇廣播的技術(shù)管理工作提供便捷的技術(shù)平臺。

微信開發(fā) 廣播技術(shù)管理 實名認(rèn)證 新浪云SAE

一、需求設(shè)計

為滿足融合媒體下江蘇廣播技術(shù)管理的需求，自主設(shè)計開發(fā)建立了基于微信公眾號的廣播技術(shù)管理平臺。廣播技術(shù)管理平臺中集合了多項功能模塊，其中包括查詢通訊錄、通知發(fā)布、故障報修、發(fā)布培訓(xùn)通知、故障制度、推送教學(xué)視頻等，滿足了工作生產(chǎn)和技術(shù)管理的需要。

二 、相關(guān)技術(shù)

2.1 Web前端開發(fā)工具

? HTML5

HTML5是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言，它具有很多優(yōu)點：

（1）多設(shè)備跨平臺

HTML5的優(yōu)點主要在于跨平臺性非常強大，這個技術(shù)可以進行跨平臺的使用?？梢詫㈤_發(fā)的HTML5程序移植到各種應(yīng)用平臺上。

（2）自適應(yīng)網(wǎng)頁設(shè)計

可以自動識別屏幕寬度、做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。“一次設(shè)計，普遍適用”，同一張網(wǎng)頁自動適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動調(diào)整布局。

（3）其他優(yōu)點

提高可用性和改進用戶的友好體驗；有新的標(biāo)簽，有助于開發(fā)人員定義重要的內(nèi)容；當(dāng)涉及到網(wǎng)站的抓取和索引的時候，對于SEO很友好；被大量應(yīng)用于移動應(yīng)用程序；可移植性好；即時更新。

? JavaScript

JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。

使用JavaScript就可以在客戶端進行數(shù)據(jù)驗證。JavaScript可以方便地操縱各種瀏覽器的對象，可以使用JavaScript來控制瀏覽器的外觀，狀態(tài)甚至運行方式，可以根據(jù)用戶的需要“定制”瀏覽器，從而使網(wǎng)頁更加友好。

JavaScript可以使多種任務(wù)僅在用戶端就可以完成，而不需要網(wǎng)絡(luò)和服務(wù)器的參與，從而支持分布式的運算和處理。

? 層疊樣式表（CSS）

CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。CSS能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。

2.2 微信公眾號接口開發(fā)

微信提供了開放的API接口，目前眾多的互聯(lián)網(wǎng)應(yīng)用紛紛接入微信，就是通過其接口開發(fā)實現(xiàn)的。其基本原理是：微信服務(wù)器相當(dāng)于一個轉(zhuǎn)發(fā)服務(wù)器，終端（手機、Pad等）發(fā)起請求至微信服務(wù)器，微信服務(wù)器然后將請求轉(zhuǎn)發(fā)給自定義服務(wù)，就是我們的具體實現(xiàn)。服務(wù)處理完畢，然后發(fā)給微信服務(wù)器，微信服務(wù)器再將具體響應(yīng)回復(fù)到終端。

通信協(xié)議為：HTTP、數(shù)據(jù)格式為：XML。具體的交互流程如圖1所示：

圖1 交互流程圖

對HTTP請求，做出響應(yīng)。具體的請求內(nèi)容，按照特定的XML格式去解析。處理完畢后，也要按照特定的XML格式返回。只需要一個簡單的實現(xiàn)HttpHandler即可。

當(dāng)然，微信平臺還能實現(xiàn)更加復(fù)雜的業(yè)務(wù)，比如微信可以作為內(nèi)嵌的瀏覽器，可以通過微信的鏈接，打開htm界面，實現(xiàn)自己的邏輯。

2.3 新浪云服務(wù)器（SAE）

SAE全名為：Sina App Engine，是新浪公司對外開放的云服務(wù)平臺，可以提供代碼管理、數(shù)據(jù)庫管理等。新浪SAE是用來放網(wǎng)站的，跟谷歌的GAE云計算比較相似。新浪SAE主要是提供了一個PHP運行環(huán)境，用戶只需像普通主機空間那樣上傳PHP代碼和數(shù)據(jù)庫，然后做點修改就可以運行了。用戶不用關(guān)心硬件架設(shè)，也不用知道新浪SAE上運行的是什么操作系統(tǒng)，更不需配置運行環(huán)境等各項設(shè)置。SAE是本項目最佳的應(yīng)用平臺。

三 、系統(tǒng)總體方案

3.1 基礎(chǔ)環(huán)境搭建

本系統(tǒng)采用新浪云（SAE）調(diào)用微信公眾平臺接口的方式，進行功能開發(fā)，在新浪云端可以進行前端頁面開發(fā)以及數(shù)據(jù)存儲。

圖2 SAE代碼管理頁面

3.2 接口對接

登錄“JSBC廣播技術(shù)”公眾號，在開發(fā)-基本設(shè)置頁面，勾選協(xié)議成為開發(fā)者，點擊“修改配置”按鈕，填寫服務(wù)器地址（URL）、Token和 EncodingAESKey，其中URL是開發(fā)者用來接收微信消息和事件的接口URL。Token可由開發(fā)者任意填寫，用作生成簽名（該Token會和接口URL中包含的Token進行比對，從而驗證安全性）。EncodingAESKey手動填寫或隨機生成，將用作消息體加解密密鑰。接口對接設(shè)置見圖3。

圖3 接口對接設(shè)置

3.3 自定義菜單

自定義菜單的接口調(diào)用，http請求方式：POST（請使用https協(xié)議）https://api.weixin.qq.com/cgi-bin/ menu/create?access_token=ACCESS_TOKEN

本項目中創(chuàng)建微信公眾號菜單的PHP代碼：

＜?php

$appid = "??????";

// JSBC廣播技術(shù)微信公眾號的APPID

$appsecret = "??????";

//JSBC廣播技術(shù)微信公眾號的密鑰

$url="https://api.weixin.qq.com/cgi-bin/token?grant_

type=client_credential&appid=$appid&secret=$appsecr

et";

$output = https_request($url);

$jsoninfo = json_decode($output, true);

$access_token = $jsoninfo["access_token"];

echo "$access_token";

$jsonmenu = '{

"button":[

{

"name":"對內(nèi)服務(wù)"

"sub_button":[

{

"type":"view",

"name":"實名認(rèn)證",

"url":"??????" //實名認(rèn)證網(wǎng)頁url

},

{

"type":"view",

"name":"故障報修",

"url":"??????" //故障報修網(wǎng)頁url

},

{

"type":"view",

"name":"本地天氣",

"url":"??????" //本地天氣網(wǎng)頁url

}]

},

{

"name":"對外服務(wù)",

"sub_button":[

{

"type":"view",

"name":"通知公告",

"url":"??????" //通知公告網(wǎng)頁url

},

{

"type":"view",

"name":"通訊錄",

"url":"??????" //通訊錄網(wǎng)頁url

}]

}]

}';

$url = "https://api.weixin.qq.com/cgi-bin/menu/

create?access_token=".$access_token;

$result = https_request($url, $jsonmenu);

var_dump($result);

functionhttps_request($url,$data = null){

$curl = curl_init();

curl_setopt($curl, CURLOPT_URL, $url);

curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);

curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);

if (!empty($data)){

curl_setopt($curl, CURLOPT_POST, 1);

curl_setopt($curl, CURLOPT_POSTFIELDS, $data);

}

curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

$output = curl_exec($curl);

curl_close($curl);

return $output;

}

?＞

創(chuàng)建后的微信公眾號菜單欄頁面見圖4。

圖4 微信公眾號菜單欄

3.4 獲取用戶openid并進行實名認(rèn)證

在自主開發(fā)的網(wǎng)頁上進行用戶實名認(rèn)證，首先需要獲取登陸網(wǎng)頁的微信用戶openid，根據(jù)openid判斷是否為認(rèn)證用戶，從而展示不同的頁面。

第一步：用戶同意授權(quán)，獲取code：

在確保微信公眾賬號擁有授權(quán)作用域（scope參數(shù)）的權(quán)限前提下（服務(wù)號獲得高級接口后，默認(rèn)擁有scope參數(shù)中的snsapi_base和snsapi_userinfo），引導(dǎo)關(guān)注者打開如下頁面：

https://open.weixin.qq.com/connect/oauth2/ authorize?appid=APPID&redirect_uri=REDIRECT_ URI&response_type=code&scope=SCOPE&state=STA TE#wechat_redirect

scope為snsapi_base 時：https://open.weixin.qq.com/ connect/oauth2/authorize?appid=$appid&redirect_ uri=$url&response_type=code&scope=snsapi_ base&state=STATE#wechat_redirect

第二步：通過code換取網(wǎng)頁授權(quán)access_token及用戶的openid：

獲取code后，請求以下鏈接獲取openid及access_ token：

https://api.weixin.qq.com/sns/oauth2/access_token?a ppid=APPID&secret=SECRET&code=CODE&grant_ type=authorization_code本項目中通過code獲取用戶openid的php代碼：

＜?php

$code = $_GET['code'];//獲取code

$weixin =

file_get_contents("https://api.weixin.qq.com/sns/ oauth2/access_token?appid=$appid&secret=$secret&co de=".$code."&grant_type=authorization_code");//通過code換取網(wǎng)頁授權(quán)access_token及用戶openid

$jsondecode = json_decode($weixin);

//對JSON格式的字符串進行編碼

$array = get_object_vars($jsondecode); //

轉(zhuǎn)換成數(shù)組

$openid = $array['openid'];

//獲取用戶openid

?＞

獲取用戶openid后，再經(jīng)人工認(rèn)證，將用戶信息錄入系統(tǒng)，用于后期用戶比對。

3.5 用戶認(rèn)證判斷

本項目中用戶認(rèn)證判斷的JS代碼：

＜script language="javascript"＞

var result;

var value = '＜?php echo $openid;?＞';

for(var i=0;i＜myarray.length;i++)

{

if(value==myarray[i])

{

result=1;

break;

}

result=0;

}

if(result){

// alert("通過實名認(rèn)證，可以查看！");

window.location.href="??????"; //

菜單鏈接的實際網(wǎng)址

}

else{

alert("未經(jīng)過實名認(rèn)證，請申請認(rèn)證！");

window.location.href="??????" ;

//重定向到認(rèn)證頁面

}

＜/script＞

根據(jù)獲取的用戶openid，遍歷用戶信息數(shù)組，如果包含該用戶信息，則返回菜單鏈接的實際地址；如果不包含該用戶信息，則重定向到認(rèn)證頁面。

四、功能模塊

主要功能模塊包括：對內(nèi)服務(wù)、對外服務(wù)、通訊錄、實名認(rèn)證、故障報修、通知公告、技術(shù)學(xué)苑、常見問答、培訓(xùn)教程等。

對于申請實名認(rèn)證的用戶，我們后臺采取人工審核的方式，將認(rèn)證通過的用戶信息錄入系統(tǒng)，即可查看公眾號發(fā)布的內(nèi)部資料。

圖5 實名認(rèn)證申請

圖6 后臺記錄的認(rèn)證信息

用戶在訪問微信公眾號的內(nèi)容時，系統(tǒng)將進行認(rèn)證信息判斷，如果用戶沒有通過認(rèn)證，則無法訪問菜單鏈接，彈出提示框，重定向到認(rèn)證頁面。

通過認(rèn)證的用戶可以查看公眾號菜單鏈接的所有內(nèi)容，包括：故障報修、通知公告、技術(shù)學(xué)苑、常見問答、培訓(xùn)教程等等。

圖7 未通過認(rèn)證時彈出提示框

圖8 故障報修

圖9 通訊錄

圖10 通知公告

圖11 技術(shù)學(xué)苑

五、結(jié)束語

江蘇廣播技術(shù)部建立廣播技術(shù)管理平臺后，管理更加規(guī)范、服務(wù)更加便捷，得到了各廣播部門的一致好評，也為技術(shù)部在融合媒體態(tài)勢下做好面向全臺的技術(shù)服務(wù)打下了堅實的基礎(chǔ)。