概述

在小程式賬號註冊完整流程一文中詳細介紹瞭如何註冊一個小程式賬號。下面我們介紹一下如何開發一個Hello World的小程式。

微信開發者工具下載

1、點選【文件】連結
2、點選【開發】連結，在彈出的選項中，選擇【小程式開發】
3、點選【工具】的連結
4、從左邊的導航欄中，找到【下載】這個連結
5、根據自己的作業系統平臺，選擇合適的版本下載

執行剛下載的

wechat_devtools_1.02.1803210_x64.exe

一路next即可。

使用微信開發工具

安裝完畢後，我們需要使用手機上的微信掃碼登入。

登入成功後，有兩種專案可以選擇，這裡我們選擇【小程式專案】

接著我們需要填寫小程式的路徑以及APPID。

路徑可以自己指定，APPID可以從【mp.weixin.qq.com】裡面的【開發設定】裡找到。

點選確定按鈕後，進入小程式開發介面。

開發Hello World程式

這裡先不介紹小程式的目錄結構，直接編寫程式。後續的文章再來仔細介紹小程式目錄結構。

首先，先建立app.js和app.json

app.js

App({})

app.json

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

然後建立一個pages目錄，並在pages目錄下建立一個helloworld目錄。helloworld目錄下存放四個檔案。

helloworld.js
helloworld.json
helloworld.wxml
helloworld.wxss

四個檔案的內容分別如下：

helloworld.js

Page({})

helloworld.json

{}

helloworld.wxml

<view>Hello World</view>

helloworld.wxss

view {
  width: 100%;
  height: 50rpx;
  text-align: center;
}

儲存好檔案後，就可以看到小程式裡可以輸出一個

Hello World

OK,一個簡單的小程式hello world程式就寫完了。