今日凌晨引爆互聯網的小程序是個啥,有多火就不介紹了,文章已經滿天飛了。
“知其然不知其所以然”不是互聯網精神,廢話不多說,直接上干貨。
直白的說,實現一個小程序需要三個東西:
一個看得過去的頁面(也就是大家看到的小程序,文檔中稱之為“視圖層”)
一個實現用戶對頁面“點點點”響應的“處理器”(暫且這么稱呼吧,文檔中稱之為“邏輯層”)
還有一個是提供數據支撐的來源(頁面總得顯示東西吧,文檔中稱之為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一下,之所以推薦以上幾本書,一個是因為內容確實不錯,另一個是網上有電子版(盜版可恥,鏈接就不發給大家了,鼓勵大家購買正版~~)
小程序文檔的解讀各種網課上有很多課程,大家跟著學,一兩天的時間就能理清,稍微實操一下,不出一周,就可以開發自己的小程序了!
然而并沒有什么卵用,個人不能申請小程序,必須有公司或者組織資質。