一、開始你的第一個小程序

來自小程序:知曉課堂|系列培訓

前言

本系列教程開始於2018年3月30日,作者使用的小程序開發工具版本爲v1.02.1803210,基礎庫版本爲1.9.94,後續可能會出現開發工具界面不同的現象,請讀者視實際情況使用開發工具。

小程序開發工具的安裝請移步https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html,下載與我們電腦系統相符的版本即可,作者使用的是Windows 64位版本。


開發準備

在開始開發之前,我們需要完成一系列準備工作。

在開發者工具中新建項目

打開“微信web開發者工具”,新建一個小程序項目。

注意,我們需要在項目目錄中選擇一個完全空白的目錄(最好直接在硬盤中新建),並取消最後的[建立普通快速啓動模板]勾選框。這樣,我們就能新建空白的小程序項目。作者會在本文一步步帶領大家一同完全從零開始創建小程序文件。


接下來,我們就進入開發者工具中,新建幾個小程序必要的文件。

調整配置文件

在微信小程序中,app.json是用於記錄小程序一些基礎配置:

  • 小程序的所有頁面路徑
  • 小程序全局界面表現
  • Tab標籤頁配置
  • 網絡超時
  • 調試模式開啓或關閉

我們可以新建一個app.json文件:在開發者工具的編輯器左側目錄樹中,點擊左上方的 [+] 號,選擇JSON,並命名爲app. json。


新建文件後,我們還得在app.json寫入配置,才能讓小程序正常工作。在此,我們直接在右側編輯區域中輸入以下代碼,使用Ctrl+S進行保存。

{}

保存後,我們可以看到編輯器依然在報錯。這是因爲app.json中頁面路徑目前是空的。

小程序頁面路徑配置

接下來,在編輯器中新建 [pages] 文件夾,並對着文件夾點擊右鍵,新建 [Page] 並起名爲welcome。


保存後,pages文件夾會多出幾個文件,而app.json也有相應變化:

{
  "pages": [
    "pages/welcome"
  ]
}

可以看到,開發者工具已經自動地將我們在pages文件夾中新建的welcome頁面路徑,放入到pages數組中。在app.json中,pages數組是必填的。它規定小程序中所有頁面的地址,同時規定了小程序啓動時的首頁,就是pages數組的首位所指的頁面。

當pages成功配置後,小程序就可以正常運行了(新建頁面文件後,小程序已經正常運行無報錯了)。但如果想要一些個性化配置,我們依然可以繼續修改app.json。

修改小程序頁面標題

我們以修改小程序頁面的全局頁面標題爲例,瞭解app.json更多個性化設置。

在app.json中,全局頁面標題項目被分配在window大項中,名爲navigationBarTitleText.。修改後 的 app. json形如這樣:

{
  "pages": [
    "pages/welcome"
  ],
  "window": {
    "navigationBarTitleText": "我是標題"
  }
}

保存後,我們就可以實時看到小程序已經應用修改。


除了頁面標題文字,類似標題欄顏色、Tab欄內容等信息,都可以直接在app.json進行配置。現在,我們的app.json已經配置完畢。接下來,我們就來爲小程序增加幾個視覺元素。


瞭解WXML

插入文字

我們打開welcome文件夾下的welcome.wxml文件,可以看到開發者工具在自動生成頁面的時候,默認生成的代碼。

<!--pages/welcome.wxml-->
<text>pages/welcome.wxml</text>

沒錯,我們在預覽區看到的 [pages/welcome.wxml] 語句,便是由它進行控制的。

第一行的<!--pages/welcome.wxml-->,是一行註釋。計算機在編譯代碼的時候,會跳過註釋,不會對註釋代碼進行編譯。

使用註釋,我們可以對代碼的功能,進行一些說明,以便未來對代碼進行維護。

我們看一下第二行的代碼。我們看到,這句代碼的前後都是由尖括號包裹起來的部分,中間則是pages/welcome.wxml。

我們試圖將中間的pages/welcome.wxml修改成HelloWorld(當然,也可以改成你自己喜歡的短語)。修改後的代碼變成了這樣:

<!--pages/welcome.wxml-->
<text>Hello World</text>

當我們保存、編譯後,我們可以看到,預覽區域中原先寫着 [pages/welcome.wxml] 的地方,已經變成了 [Hello World] 。

在小程序中,<text><text>代表文字視覺組件。在它們中間插入的內容,將會直接顯示在小程序的相應位置中。

插入圖片

接下來,我們試圖在我們的小程序裏插入一張圖片。

首先,我們在根目錄下創建一個image的文件夾。然後,我們點擊我們剛纔新建的image文件夾,點擊右邊的 [...] 按鈕,選擇[硬盤打開] 。


這時,電腦會打開我們的工程文件夾。我們在文件夾裏,打開我們剛纔新建的image文件夾,隨意將一張圖片放進文件夾裏面。接着,開發者工具會自動探測到文件的變化,然後重新刷新工程目錄。刷新之後,我們就可以在image文件夾下,看到我們剛纔放進去的文件。


之後,我們回到welcome.wxml,插入剛纔放入目錄中的圖片。假設我們放入image目錄的圖片文件名稱叫lab.jpg,那麼我們需要在welcome.wxml文件的底部插入這段代碼:

<image src="/image/lab.jpg"></image>

插入這段代碼之後,welcome.wxml文件看上去應該是這樣的:

<!--pages/welcome.wxml-->
<text>Hello World</text>
<image src="/image/lab.jpg"></image>

保存後,我們就可以在模擬器中,看到整體效果了。與<text>一樣,<image>也是小程序的一個視覺組件,它代表在小程序裏插入一張圖有所不同的是,<image>組件內不應該插入任何內容。我們應該在<image>組件的src屬性中,指定需要插入在小程序裏的圖片。將代碼保存,開發者工具會自動刷新預覽。在預覽中,我們可以看到圖片雖然已經成功插入,但是比例似乎不太正確。


這是因爲<image>本身擁有幾種縮放、裁剪模式和尺寸大小,而默認尺寸爲300×225px,默認模式爲 [完整填充] 。在<image>組件中,增加mode,定義值爲widthFix,它可以讓圖片比例正常,並根據設定的寬度,自動按比例調整<image>元素的高度。

<image src="/image/lab.jpg" mode="widthFix"></image>

保存後,可以看到小程序的圖片顯示就正常了。


給元素加 [框]

在正式開發過程中,我們會將屏幕元素分隔成不同部分,每個部分可以套用相應樣式,使用獨立的樣式代碼,以提高編碼效率。例如,在傳統HTML開發中,我們會利用<div>框元素對不同部分進行區分。而在小程序中,我們可以利用<view>達成同樣的效果。它的使用方法與〈div〉幾乎沒有什麼不同。

在這裏,我們會將其中的文字、圖片元素 [綁定] 起來,作爲屏幕的組成部分。

<!--pages/welcome.wxml-->
<view>
  <text>Hello World</text>
  <image src="/image/lab.jpg" mode="widthFix"></image>
</view>
這樣做,我們就可以統一處理文字和圖片的樣式和其他操作。
在下一篇文章中,我們將會對屏幕上的這些元素做一些美化操作,並將它們換成用戶的資料。

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