前端開發----微信小程序入門級教程(前篇)

前言

前段時間,憑藉着出生牛犢不怕虎的勁頭,憑藉着一點Java基礎和前端入門的知識水平,買了域名和服務器準備搭建自己的一個技術站點,初衷是旨在打造自己成爲一個T形全站工程師。後經過各種百度,各種折騰終於大概在半個月左右的時間寫好了幾個基本接口,能上傳圖片,發佈文章,能列表展示,也能展示文章詳情,當前期間用到各種框架和開源庫Jersey啊,editor.md啊等等等等,也在此拜謝….

星光小站 www.twinkleof.com

當然也是各種簡陋,各種粗糙,望各位大牛大俠“口下留情”。畢竟我也只有兩年的Android開發經驗,前端也是自學,後臺也是自學。在技術人璀璨的星空裏我是那麼渺小,在技術棧浩瀚的海洋裏我又是那麼無知,我也只能是:

弱水三千,只取一瓢飲;嬌玫萬朵,獨摘一枝憐。

對於星光小站,我又豈能滿足於此?日後也必將不斷完善和進步~

扯了這麼多“肺腑之言”,那與今天的主題:小程序入門指北有什麼關係呢?

小程序因爲跳一跳火了一把的,我也想蹭一蹭他的熱度,微信那麼大的用戶羣,咱也想去浪一浪~於是乎在騰訊課堂上找到了小程序入門級視頻教程,胡亂地看了些,就開啓了我的跳坑之旅。

我看API文檔看的要睡覺,只有看視頻能看進去點,後面具體用的時候纔去查API,各位要是看的進去還是通過API學習更直觀,更快捷些。

源起

真正開始開發小程序的時候才發現,小程序的接口要求必須使用https協議,在,在網上一搜又要折騰後臺配置,由於前段時間折騰後天配置折騰的有點煩,就不想弄,所以就暫時放棄了,想着先安生一段時間,等什麼時候心癢了再來折騰他。可是等過段時間剛學的小程序那點入門基礎又要忘的一乾二淨,所以寫這篇博客記錄一下,以備後用。

補:後發現可以在project.config.json配置不使用域名檢測即可:

"urlCheck": false,

成果

index.wxml

art-list.wxml

頁面十分簡單,非常適合入門。

觀點

在開發過程中有一些整體的認知,這裏也記錄一下,請方家指正:

  1. 小程序開發屬於前端範疇?

小程序開發依然採用html,css,作爲佈局樣式,只不過微信舊瓶裝新酒,使用wxml , wxss作爲文件後綴,重新定義了html的文件結構,和部分標籤,依然使用js作爲開發語言,而沒有改變js文件後綴。(如果改爲wxjs,估計會被前端開發人員抵制和嘲笑吧!)

結論: 小程序開發是前端開發的一個小分支。
  1. 以小程序開發爲跳板,快速掌握React精華。

因爲小程序開發的框架結構原理和React 十分相像 。 React作爲前端三大框架之一,也是組件化的最佳實踐者,在加上RN的統一移動端的恢弘氣派,個人十分看好React會笑到最後。開發者學習React會是一個一舉多得的事,但是React的學習曲線稍嫌陡峭,而小程序開發則比較簡單,開發者不妨用小程序作爲跳板,先掌握其組件化之精髓,在學習React就事半功倍了。

結論: 小程序開發框架是一個精簡版的React ,並且開發比較簡單 。

實戰

第一步 獲取AppId

小程序註冊入口
http://https://mp.weixin.qq.com/wxopen/waregister?action=step1

Tips:如果自己的郵箱不能使用,可以去其他平臺申請一個,比如新浪郵箱等

第二步 創建小程序(略)

第三步 下載開發工具(略)

小程序開發工具下載:
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1515331250

tips:沒有AppId也可以建個項目體驗下的哦,只是部分功能限制

第四步 搞懂小程序項目的目錄結構

[圖片上傳失敗…(image-8d3ff5-1515339507805)]

pages—顧名思義,主要頁面,當然裏面每個頁面一個包,每個頁面包裏面全是和頁面相關的wxml , wxss , js , json 。json是補充配置文件。
utls —工具類。
app.js 程序入口文件,用戶獲取用戶信息,文件存儲狀況等。
app.json 全局配置文件
app.wxss 公共樣式

下面是我的項目目錄:
TIM圖片20180107215730.png

從index.js文件來看是不是很像React? 當然說像,只是說框架原理像,實操起來還是有蠻大區別的,總之就是一句話:比React簡單多了。

後語

今天就先 觀其大略 記下這麼多,下週再從程序的邏輯,佈局,代碼實現來細緻分析。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章