一、開啟開發工具、填寫相關資訊

開發微信小程式需要專門的開發工具——“微信開發者工具”。

開啟後，我們進入到這個介面：

填寫小程式相關資訊：

二、建立相關檔案

小程式包含一個描述整體程式的app和多個描述各自頁面的page。一個小程式的主體部分由三部分組成，它們必須放在專案的更目錄，如下所示：

而一個小程式的頁面由四個檔案組成，它們分別是：

建立完成後，它的基本樣式是：

以上，我們一個小程式簡單的結構算是基本建成。

三、進行相關配置

1. app.json檔案：不能為空白，至少需要配置一個屬性，我們輸入以下程式碼：

  "pages": [
    "pages/about/about"/*這裡填寫使用者可能訪問到的每一個頁面的路徑*/
  ],
  
 
"sitemapLocation": "sitemap.json"
}

2、配置about.json檔案

{
  "navigationBarTitleText": "關於",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black"
}

　　這裡填寫的是標題欄的基本資訊。

　　3、配置about.js檔案

Page({})

　　我們從最簡單的角度出發，配置一個空物件即可。

完成以上步驟後，我們可以在預覽框上得到以下頁面：

四、初等頁面資訊的編寫

我們在wxml檔案中可以進行相關頁面的編寫，語法同HTML的語法類似；同時在wxss檔案中我們可以進行相關樣式的編寫。

wxml：

<view>
  <image src="/images/one.jpg"></image>
  <text>電影週週看</text>
  <text>我每週推薦一部好片</text>
  <text>我的郵箱是：[email protected]</text>
</view>

wxss:

.info{
  font-weight:bold;
  font-size:30px;
}