1. 程式人生 > >前端開發----微信小程式入門級教程(前篇)

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

前言

前段時間,憑藉著出生牛犢不怕虎的勁頭,憑藉著一點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

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

第二步 建立小程式(略)

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

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簡單多了。

後語

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