小程序到底是個啥?十分鐘教你從小白到大神(偽)!

今日凌晨引爆互聯網的小程序是個啥,有多火就不介紹了,文章已經滿天飛了。

“知其然不知其所以然”不是互聯網精神,廢話不多說,直接上干貨。

直白的說,實現一個小程序需要三個東西:

一個看得過去的頁面(也就是大家看到的小程序,文檔中稱之為“視圖層”)

一個實現用戶對頁面“點點點”響應的“處理器”(暫且這么稱呼吧,文檔中稱之為“邏輯層”)

還有一個是提供數據支撐的來源(頁面總得顯示東西吧,文檔中稱之為API,或者請求)。

他們之間的關系大概是這樣的:

頁面要顯示內容,問“處理器”要,處理器說好的,我給你向數據庫請求去,數據庫給了“處理器”一堆數據,“處理器”處理分析一下,返回給頁面,顯示出來。簡單畫了個圖:


大概這么個意思


視圖層:

怎么顯示視圖層呢,小程序借鑒了HTML的標記語言,看上去好高端,其實就是這么一個東西:


藍色的叫標簽,這是讓后面的計算機知道你這是個啥,它對應的文件是wxml格式(和平時看到的.html一個意思)

紅色的是要顯示內容的樣式,它對應的文件是.wxss(跟網頁里面的css一樣)

綠色的是“事件”(就是讓計算機知道你干了啥),bindtap是手指點擊了屏幕事件的表達方法。

因為頁面里有好多內容,計算機要知道哪個樣式顯示給誰,你點的是什么地方,所以給他們都起了名字,也就是引號里面的那些漢語拼音。

這么一句話寫完了,你的手機上就會顯示“你看到的內容”幾個字,具體是什么樣子的、點了會有什么反應,這就是后面處理器(邏輯層)要干的活了。

如果要深入學習視圖層的知識,可以學習HTML、CSS這兩種語言,他倆永遠都是在一起出現的。這個超級簡單,時間充裕的話兩天,甚至一天就可以弄明白,推薦一本書:

Head First HTML與CSS

有點小貴,對于小白來說是一本非常好的教材,講的非常細,雖然很厚,但是瀏覽起來其實很快。

邏輯層:

邏輯層是處理前面顯示給用戶的內容的,主要通過JavaScript這種語言來實現。大家不要怕語言,他其實也非常簡單,原理大概是這樣(還是以剛才的顯示內容為例):


看上去亂碼七遭,又是冒號又是大括號的,其實梳理一下很簡單:綠色的是剛才視圖層里對點擊這個操作綁定的名字,冒號在js里面的意思和咱們說話一樣,

野蠻人諾基亞:開啟功能

意思就是開啟功能這個事是野蠻人諾基亞說的。

紫色的function是功能的意思,后面的括號和大括號簡單來說就是固定搭配,他們三個永遠在一起。大括號里面的內容是具體的功能。

敲黑板:為了方便解釋,我用了漢字表達,真正的編程語言不是醬嬸兒的。

邏輯層這樣就實現了,要詳細學習JavaScript這門語言,推薦兩本書:

JavaScript_DOM編程藝術第二版(中文)

Head First HTML5 Programming(中文版)

這兩本書都淺顯易懂,學起來不費勁,小白到入門耗時大概1-2天。

這里再多逼逼兩個標點符號:等號和點。

這倆標點和數學里不一樣,在程序里你可以把它們讀成:“是”和“的”

舉例:

A = 3 的讀法是:A是3

A.B ? ?的讀法是:A的B(“野蠻人諾基亞.胳膊.長度”的意思是“野蠻人諾基亞的胳膊的長度”)

這樣再看到這倆標點符號的時候就不會蒙了~


數據請求

第三部分數據請求,專業的說法叫API,分為兩種:請求微信內置的和請求外部服務器的。

1.微信給內置了好多API,并且給了直接請求的語法,比如獲取個人信息、獲取用戶地理位置等等(體驗小程序的時候應該看到過提示框:XXX想要獲取你的個人信息,同不同意?)這個就是在請求數據了。

2.請求外部服務器的,就是通過你的小程序,向外部的服務器打招呼,拿數據。這個地方涉及到一個詞:

接口

這個詞在生活中看到覺得很平常,比如USB接口、耳機接口,然而一旦到了編程語言,大部分人立馬蒙逼!

其實他們是一樣的。你把服務器看成一個筆記本電腦,你要想從電腦里拷貝文件,是不是得通過USB接口插入U盤區里面復制?服務器同樣的,只不過他的接口是一個網址的形式(當然還有其他的形式)。這個接口可以干倆活:一個是從服務器拿出數據,叫GET;另一個是向服務器里面放數據,叫POST。

舉個例子,百度地圖提供免費的數據接口(百度地圖API),他的調用就可以用網址的形式

http://api.map.baidu.com/place/v2/search?query=美食region=北京&ak={您的密鑰}

前面一堆不管他,問號以后的部分是你要的東西:query是你要的關鍵詞,這里我們要“美食”;region是范圍,我們要北京市的;最后面的AK是你的密鑰,需要向百度申請,相當于你的賬號吧。整句話的意思是:百度地圖你好,我想要北京市的美食數據,這是我的密鑰。百度收到以后就會發給你他的數據,你就可以使用了。

多講一句:正常情況下網址里面的“?”是不會對你要訪問的地址產生任何影響的。比如你在地址欄輸入網址 ?“http://www.baidu.com” 和輸入 ?“http://www.baidu.com?我是野蠻人諾基亞” ?出來的結果是一樣的。

作為小白,也只能調用別人的API了,自己服務器開發能力幾乎為零,就不介紹了,見諒!

收工

這樣下來,三個層次的內容都有了了解,小程序的原理大家也應該比較清楚了。

本人也是小白起家,學藝不精,如果有什么地方表述錯誤的,懇請大家指正!

想繼續深入學習小程序的話,就要仔細閱讀開發文檔,進行深入研究了。


最后PS一下,之所以推薦以上幾本書,一個是因為內容確實不錯,另一個是網上有電子版(盜版可恥,鏈接就不發給大家了,鼓勵大家購買正版~~)

小程序文檔的解讀各種網課上有很多課程,大家跟著學,一兩天的時間就能理清,稍微實操一下,不出一周,就可以開發自己的小程序了!




然而并沒有什么卵用,個人不能申請小程序,必須有公司或者組織資質。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,886評論 18 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,142評論 25 708
  • 在我們日常生活中,我們都會經常聽到,‘’我這都是為你好‘’,可是這句話就有兩個意思了,一個你是真的為她好嗎?一個是...
    臺一DDM路靜娟閱讀 422評論 0 1
  • #白馬聲慢,我自手書# 一年前,我就想和你告白了。 寶玉在第一次見到黛玉的時候就說“這個妹妹我曾經見過的”。你知道...
    我想要顆橙子閱讀 133評論 0 0