微信小程序之小白教程系列 第一篇 微信小程序 -- Hello World

首先你要知道，這是一套微信小程序入門級的教程，原理、理念這些東西通通沒有，這裏只有同樣東西 -- 快速使用並開發。

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

本篇爲你講解如何得到開發權限、工具等。

先下個工具再說

微信官方提供了一個小程序的開發工具，經歷了幾個版本後已經很好用，固然也很消耗內存，如今提供windows和mac平臺版本，Linux暫時無緣。

mac上的樣子

alt

開發工具下載地址

#獲取小程序開發帳號
有不少能讓你開發小程序的途徑，免費的和收費的，一一說來。

體驗帳號

使用開發工具就能夠新建體驗類的小程序，固然既然是體驗類，有些好比小程序的微信支付功能等是沒法使用的，供學習使用仍是夠的。

創建體驗項目很簡單，見下圖。

alt

對的，很方便。

有服務類公衆號

若是你有一個服務公衆號，那麼用你公衆號的主體能夠直接得到一個免費的小程序，若是你的公衆號申請了微信支付，則小程序也能夠申請支付功能，不須要任何money。

alt

在上圖AppID文本框內輸入你的小程序AppID，具體能夠在公衆號平臺用你申請小程序時候設置的帳號和密碼登錄後獲得。

登陸地址 mp.weixin.qq.com/
若是你玩公衆號則必定不陌生，是一個登陸框。

##獨立申請
這個是最麻煩的，流程也比較多，要求和公衆號申請差很少，若是你須要微信支付等還須要交300元，騰訊是和300幹上了。

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

具體流程點擊後一步一步來就行了。

我推薦去註冊一個服務號，而後免費得到一個，這樣還多了一個公衆號，比較實在。

Hello World

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

按照上面的步驟進入到小程序編輯器頁面，你會看到默認的一些文件，咱們來一一說明下，爲了方便理解，咱們拿yii來對比說明下。

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

咱們叫作hello，新建後多了4個文件，分別是hello.js / hello.wxml / hello.wcss / hello.json。

而且開發工具對文件內容進行了一個初始化，打開hello.js後我無需多言，經過每一個函數的備註你應該就知道了。

由於咱們只是顯示，所以我不打算動hello.js而是直接在視圖裏動手腳。以下圖。

視圖

樣式

好的，接下來看看戰績。

alt

ok啦~

是否是很簡單，咱們完成了第一個小程序頁面，雖然它意義不大。跟着這個系列，咱們來一塊兒瞭解小程序的方方面面。