微信小程式之小白教程系列 第一篇 微信小程式 — Hello World

阿北哥ya發表於2019-03-02

首先你要知道,這是一套微信小程式入門級的教程,原理、理念這些東西統統沒有,這裡只有一樣東西 — 快速使用並開發。

這個系列主要講解後端工程師如何快速入門小程式.

本篇為你講解如何獲得開發許可權、工具等。

先下個工具再說

微信官方提供了一個小程式的開發工具,經歷了幾個版本後已經很好用,當然也很消耗記憶體,現在提供windows和mac平臺版本,Linux暫時無緣。

mac上的樣子

alt
alt

開發工具下載地址

#獲取小程式開發賬號
有很多能讓你開發小程式的途徑,免費的和收費的,一一說來。

體驗賬號

使用開發工具就可以新建體驗類的小程式,當然既然是體驗類,有些比如小程式的微信支付功能等是無法使用的,供學習使用還是夠的。

建立體驗專案很簡單,見下圖。

alt
alt

對的,很方便。

有服務類公眾號

如果你有一個服務公眾號,那麼用你公眾號的主體可以直接獲得一個免費的小程式,如果你的公眾號申請了微信支付,則小程式也可以申請支付功能,不需要任何money。

alt
alt

在上圖AppID文字框內輸入你的小程式AppID,具體可以在公眾號平臺用你申請小程式時候設定的賬號和密碼登陸後得到。

登入地址 mp.weixin.qq.com/
如果你玩公眾號則一定不陌生,是一個登入框。

##獨立申請
這個是最麻煩的,流程也比較多,要求和公眾號申請差不多,如果你需要微信支付等還需要交300元,騰訊是和300幹上了。

申請地址 mp.weixin.qq.com/cgi-bin/reg…

具體流程點選後一步一步來就好了。

我推薦去註冊一個服務號,然後免費獲得一個,這樣還多了一個公眾號,比較實在。

Hello World

學習一門語言第一步總是要寫一個Hello World,我來啦。

按照上面的步驟進入到小程式編輯器頁面,你會看到預設的一些檔案,我們來一一說明下,為了方便理解,我們拿yii來對比說明下。

alt
alt

由此我們總結如下

  • 當我們訪問一個小程式頁面,它的路由是pages/controller/action,對應的路徑問/pages/controller/action.js
  • 業務邏輯實現寫在具體的action.js內。
  • 不需要render,action.js會主動的載入同級目錄下的action.wxml 檔案,這就是檢視。它裡面就是類html標籤,只不過我們常用的div在這裡變成了view,你可以使用style,也可以class。
  • 每個檢視會主動載入同名的action.wxss,就是css。只不過只能一級,不能類似於 .box .title {}這樣。
  • app.wxss也會累加到action.wxml中。

你可能會問model去哪了?我們只是對比學習,但是小程式畢竟不是mvc,你如果真有一些很公用的可以放到utils資料夾內,然後require就可以。

es6

如果你對前端有一定了解,則無需我多言,小程式的js使用的就是es6的語法,當然你如果不會也沒關係,會一些js也足以搞定。

Hello World

好,接下來寫一個hello world,我們新建一個action頁面並放到index控制器下。

alt
alt

我們叫做hello,新建後多了4個檔案,分別是hello.js / hello.wxml / hello.wcss / hello.json。

並且開發工具對檔案內容進行了一個初始化,開啟hello.js後我無需多言,通過每個函式的備註你應該就知道了。

因為我們只是顯示,因此我不打算動hello.js而是直接在檢視裡動手腳。如下圖。

檢視
檢視
樣式
樣式

好的,接下來看看戰績。

alt
alt

ok啦~

是不是很簡單,我們完成了第一個小程式頁面,雖然它意義不大。跟著這個系列,我們來一起了解小程式的方方面面。

相關文章