微信公眾號中的H5頁面是怎樣煉成的

現(xiàn)在是自媒體時(shí)代翘魄,很多個(gè)人或者小團(tuán)隊(duì)都希望能有一個(gè)微信公共號平臺(tái)用來宣傳自己蜓肆。公共號開通其實(shí)很簡單颜凯,推廣的方式也已經(jīng)模式化谋币,這些無需多述,這里我們從技術(shù)的角度來看看一個(gè)技術(shù)人員完成一個(gè)帶有H5頁面“會(huì)員中心”的公眾號的流程症概。

打開網(wǎng)址mp.weixin.qq.com進(jìn)入微信公眾平臺(tái)官網(wǎng)蕾额,可以看到公眾號的三個(gè)類別

如果您的公眾號需要經(jīng)常性的推送群發(fā)圖文消息,那么請注冊訂閱號彼城,其他情況還是推薦注冊服務(wù)號诅蝶。不過注冊服務(wù)號需要進(jìn)行認(rèn)證,這個(gè)需要有一個(gè)公司或者個(gè)體的資質(zhì)募壕。小程序是一個(gè)基于微信的小app调炬,它在制作的時(shí)候需要綁定一個(gè)位置,方便用戶查看周邊小程序能夠找到你舱馅,目前小程序在餐飲住宿零售等行業(yè)使用的不錯(cuò)缰泡。

下面我們看一下訂閱號和服務(wù)號的區(qū)別

未認(rèn)證訂閱號(個(gè)人就可以注冊的公眾號)只能發(fā)布圖文消息,每日可以推送一次圖文消息(可以一篇文章代嗤,也可以是一組文章)棘钞。未認(rèn)證訂閱號菜單只能鏈接您在自己公眾號中發(fā)布的圖文消息。其他功能都需要認(rèn)證后才能夠使用干毅。

我們主要來對比認(rèn)證訂閱號和認(rèn)證服務(wù)號的區(qū)別

1宜猜、文章推送數(shù)量及展示

訂閱號每日可以推送一次圖文消息或者圖文消息列表,用戶查看推送的消息硝逢,需要打開微信-訂閱號-你的訂閱號才能查看消息姨拥。訂閱號有數(shù)量優(yōu)勢。

服務(wù)號每月可以推送四次圖文消息或者圖文消息列表趴捅,用戶查看推送的消息垫毙,可以在聊天列表中直接打開你的訂閱號查看消息。服務(wù)號有更好的查看率拱绑。

2综芥、系統(tǒng)接口

由于訂閱號更適合媒體平臺(tái),因此訂閱號沒有模板消息接口(發(fā)送業(yè)務(wù)通知-類似信用卡發(fā)送的賬單消息)猎拨,不能獲取當(dāng)前用戶的位置膀藐,不能使用微信支付接口,不能使用網(wǎng)頁授權(quán)獲取用戶openid/用戶基本信息(不能在H5頁面中集成微信登陸)红省,好的一點(diǎn)是訂閱號支持微信網(wǎng)頁JS-SDK(使用JS-SDK可以調(diào)用微信系統(tǒng)接口额各,如語音、視頻吧恃、圖片虾啦、分享、掃一掃等功能)。具體接口說明可以查看微信官方接口文檔傲醉。

服務(wù)號可以使用微信提供的所有接口蝇闭,如網(wǎng)頁授權(quán)登陸、微信支付硬毕、微信網(wǎng)頁JS-SDK(使用JS-SDK可以調(diào)用微信系統(tǒng)接口呻引,如語音、視頻吐咳、圖片逻悠、分享、掃一掃等功能)

注冊公眾號過程很簡單韭脊,通過微信公眾平臺(tái)右上角立即注冊童谒,選擇您要注冊的公眾號類型就可以進(jìn)入填寫信息界面

根據(jù)要求填寫各種信息就可以了,如果需要微信認(rèn)證乾蓬,我們就需要填寫對應(yīng)的企業(yè)三證合一的證件信息惠啄、開戶行信息,并填寫一份認(rèn)證公函簽字蓋章拍照上傳任内,三兩天就可以認(rèn)證通過撵渡。

認(rèn)證通過后就該技術(shù)人員出手了,現(xiàn)在我們回到主題死嗦,客戶需要一個(gè)帶有會(huì)員中心的公眾號趋距,技術(shù)人員會(huì)怎樣處理呢?

首先客戶需要租一個(gè)云服務(wù)器或者web托管越除,需要申請一個(gè)域名并且備案(備案時(shí)間一周到兩周時(shí)間就可以下來)节腐,有了服務(wù)器和域名,技術(shù)人員會(huì)先去域名解析平臺(tái)綁定解析到租好的服務(wù)器摘盆,然后再服務(wù)器的管理平臺(tái)或遠(yuǎn)程至服務(wù)器進(jìn)行域名綁定翼雀,并建立一個(gè)ftp目錄保證他可以隨時(shí)將網(wǎng)頁源文件傳送到該目錄。

服務(wù)器和域名做好以后孩擂,技術(shù)人員還需要在公眾號進(jìn)行配置

每一項(xiàng)配置填寫以后都需要做測試配置是否成功狼渊,有時(shí)在配置這里因?yàn)檎也坏絾栴}原因,折騰一天也是有可能的类垦。

前面說的只是做H5會(huì)員中心的配置階段狈邑,配置好以后才真正進(jìn)入開發(fā)階段

開發(fā)過程會(huì)涉及三個(gè)工種分別是美工設(shè)計(jì)、前端開發(fā)蚤认、后臺(tái)開發(fā)米苹。

美工設(shè)計(jì)主要是用來設(shè)計(jì)頁面布局色調(diào)的人員。

前端開發(fā)是承接美工和后臺(tái)人員的橋梁砰琢,并且是用戶使用程序的直接面對著蘸嘶。前端人員要通過CSS+HTML代碼將美工的界面實(shí)現(xiàn)成網(wǎng)頁形式良瞧。要通過JavaScript與后臺(tái)頁面進(jìn)行通信,并將通信返回的數(shù)據(jù)使用JS動(dòng)態(tài)的更新當(dāng)前頁面亏较,一個(gè)會(huì)員中心前端人員可能需要些十幾二十個(gè)接口與后臺(tái)進(jìn)行通信莺褒,每個(gè)接口都會(huì)實(shí)現(xiàn)一個(gè)對應(yīng)的功能,如獲取用戶信息接口雪情,用戶修改頭像接口,用戶短信認(rèn)證接口等你辣,每個(gè)接口都采用AJAX異步通信的方式與后臺(tái)進(jìn)行交互巡通,通過后臺(tái)返回的JSON格式數(shù)據(jù),再對用戶中心中對應(yīng)的內(nèi)容進(jìn)行更改舍哄。如果用戶中心涉及到用戶轉(zhuǎn)發(fā)文章統(tǒng)計(jì)功能宴凉,前端還需要使用微信JS-SDK開發(fā),并對URL地址的哈希值處理表悬,并且要做本地存儲(chǔ)與用戶驗(yàn)證登陸跳轉(zhuǎn)時(shí)的邏輯關(guān)系處理弥锄。

后臺(tái)開發(fā)人員主要是建立數(shù)據(jù)庫,通過PHP或者.net JAVA等語言制作對數(shù)據(jù)庫操作的頁面蟆沫,并預(yù)留POST接口接收前端發(fā)送過來的post信息籽暇,通過post信息對數(shù)據(jù)庫進(jìn)行對應(yīng)的操作,操作完成以后返回一個(gè)操作結(jié)果json串發(fā)送回前端饭庞,如果需要集成微信用戶登錄就需要做微信的登陸認(rèn)證戒悠,認(rèn)證的過程比較復(fù)雜,基本原理就是用戶授權(quán)登陸以后舟山,該公眾號的頁面得到用戶給予該公眾號的唯一艾迪和用戶的昵稱頭像信息绸狐,然后將該信息放入自己的用戶庫中,每次用戶登錄的時(shí)候都要跟庫里的人員進(jìn)行判斷累盗,這樣就不會(huì)每次提示用戶授權(quán)登陸該公眾號了寒矿。

一個(gè)會(huì)員中心功能雖然看上去功能不多,但是麻雀雖小五臟俱全若债,他包含了用戶基礎(chǔ)微信登陸符相,微信JS-SDK開發(fā),以及H5頁面制作開發(fā)拆座,后臺(tái)開發(fā)等開發(fā)過程主巍。

在開發(fā)過程中前端會(huì)使用到微信的web開發(fā)者工具進(jìn)行頁面測試,在這里會(huì)測試iphone各個(gè)版本挪凑,安卓版本的多種測試孕索,測試無誤以后會(huì)正式部署到服務(wù)器上,部署到服務(wù)器上還要再進(jìn)行一輪測試躏碳,確保交付到用戶手中的功能有盡量少的BUG搞旭。

微信公眾號中只要是需要用戶授權(quán)登陸的頁面基本都是按照這個(gè)流程做下來的,在我們使用這些功能的同時(shí),也系統(tǒng)能夠?yàn)槲覀兊墓こ處焸凕c(diǎn)個(gè)贊肄渗,感謝他們的付出镇眷。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市翎嫡,隨后出現(xiàn)的幾起案子欠动,更是在濱河造成了極大的恐慌,老刑警劉巖惑申,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件具伍,死亡現(xiàn)場離奇詭異,居然都是意外死亡圈驼,警方通過查閱死者的電腦和手機(jī)人芽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來绩脆,“玉大人萤厅,你說我怎么就攤上這事⊙テ龋” “怎么了惕味?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長矢劲。 經(jīng)常有香客問我赦拘,道長,這世上最難降的妖魔是什么芬沉? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任躺同,我火速辦了婚禮,結(jié)果婚禮上丸逸,老公的妹妹穿的比我還像新娘蹋艺。我一直安慰自己,他們只是感情好黄刚,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布捎谨。 她就那樣靜靜地躺著,像睡著了一般憔维。 火紅的嫁衣襯著肌膚如雪涛救。 梳的紋絲不亂的頭發(fā)上驱犹,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天双妨,我揣著相機(jī)與錄音仁堪,去河邊找鬼雁社。 笑死,一個(gè)胖子當(dāng)著我的面吹牛配喳,可吹牛的內(nèi)容都是我干的赂韵。 我是一名探鬼主播送淆,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼摊灭!你這毒婦竟也來了咆贬?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤帚呼,失蹤者是張志新(化名)和其女友劉穎掏缎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體萝挤,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡御毅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了怜珍。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,161評論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡凤粗,死狀恐怖酥泛,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情嫌拣,我是刑警寧澤柔袁,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站异逐,受9級特大地震影響捶索,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜灰瞻,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一腥例、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧酝润,春花似錦燎竖、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至疏咐,卻和暖如春纤掸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背浑塞。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工借跪, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人缩举。 一個(gè)月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓垦梆,卻偏偏與公主長得像匹颤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子托猩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內(nèi)容

  • 現(xiàn)在是自媒體時(shí)代印蓖,很多個(gè)人或者小團(tuán)隊(duì)都希望能有一個(gè)微信公共號平臺(tái)用來宣傳自己。公共號開通其實(shí)很簡單京腥,推廣的方式也已...
    老爐傳說閱讀 948評論 0 2
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,524評論 25 707
  • ——微信產(chǎn)品的發(fā)展歷程 迄今為止赦肃,微信月活躍用戶接近6億,稱得是每個(gè)智能手機(jī)用戶最常用的應(yīng)用公浪,人人都說他宛,微信是個(gè)偉...
    mr_wangsx閱讀 17,075評論 9 42
  • 英國威斯敏斯特大教堂的地下室有一塊無名碑,碑上有一篇墓志銘: 當(dāng)我年輕的時(shí)候欠气,我的想象力從沒有受到過限制厅各,我夢...
    酒泉潘建軍閱讀 972評論 1 7
  • 會(huì)一樣嗎队塘? 你對我的微笑,與對其他女孩的微笑宜鸯,一樣嗎憔古? 你對我說過的話,與對其他女孩說過的話淋袖,一樣嗎鸿市? 你對我唱過...
    零時(shí)零分零秒閱讀 250評論 0 0