2020-03-04 10:16:28 編程手札

微信開發者工具再我們創建項目的時候為我們準備了一個“Hell Word”示例，但是這裡內容比較多不利於初學者快速瞭解和體驗小程序。今天我們來手動創建一個最簡單的入門實例“Hell Word”，創建一個空目錄來存放項目代碼。

創建app.js文件

在目錄中創建一個app.js文件，該文件作為項目的入口文件，通過App() 函數來註冊一個小程序的應用。該函數接受一個object參數(function 和 data)，比如小程序的生命週期函數。這裡我們先不管那些生命週期函數，只要定義個空參數的App({})函數即可註冊小程序。

<code>//app.js
App({})/<code>

創建一個helloword頁面

我們需要顯示“Hello Word”內容，所以這裡我們需要創建一個頁面。在目錄中創建一個helloword.wxml文件，這裡我用個試圖容器view標籤來顯示“Hello Word”內容。

<code>// helloword.wxml
<view>Hello Word/<view>/<code>

註冊helloword頁面

小程序中的每個頁面都需要在頁面對應的 js 文件中進行註冊，所以這裡我們需要在目錄中創建一個helloword.js文件並通過Page() 函數用來註冊一個頁面。該函數同樣接受一個 object參數，可以是該頁面的初始數據、生命週期函數、事件處理函數等。這裡我們還是先不管那些生命週期函數，只要定義個空參數的Page({})函數即可註冊頁面。

<code>// helloword.js
Page({})/<code>

創建app.json文件

頁面註冊好了我們就需要來配置頁面路徑了，告訴小程序要加載的頁面在哪裡。這就需要我們在根目錄下創建一個app.json文件，通過該文件來對小程序進行全局配置。而其中的pages對象就是用來指定小程序由哪些頁面組成，每一項都對應一個頁面的路徑（含文件名）信息。

這裡需要注意的是文件名不需要寫文件後綴，框架會自動去尋找對於位置的 .json, .js, .wxml, .wxss 四個文件進行處理。數組的第一項代表小程序的初始頁面（即首頁），小程序中新增/減少頁面時都需要對 pages數組進行修改。

<code>// app.json文件
{
  "pages": [
    "helloword"   //由於該文件目前存放在根目錄，所以這裡直接填文件名
  ],
}/<code>

接下來我們就可以打開“微信開發者工具”並切換到“導入項目”頁面，在目錄欄中選擇我們的項目文件夾。AppID沒有的可以選擇遊客模式，點擊“導入”按鈕即可。程序會自動生成project.config.json配置文件和sitemap.json站點地圖配置文件（可以暫時忽略），在左側的模擬器中我們可以看到在小程序中顯示了我們的“Hello Word”內容。