? ? ? ? ? ? ? ? 上次通過天氣查詢小程序，我們初探了微信小程序開發的世界。這次，咱們再挑戰一個有趣又實用的項目 ——“單詞速記小程序”。無論是學生黨備考，還是上班族提升英語，都能用得上！接下來就跟著我，一步一步把它做出來。從中感受到開發的過程。?

一、編寫前期準備?🌷🌷

1. 確認開發工具?

如果你已經安裝過微信開發者工具，記得更新到最新版本，以獲得更好的開發體驗。要是還沒安裝，還是老規矩，訪問微信公眾平臺（微信公眾平臺），下載對應系統版本的安裝包，完成安裝。?

2. 賬號準備?

和之前一樣，有上線需求就注冊正式的小程序賬號，僅作練習的話，使用 “體驗模式” 也能順利開發。注冊成功后，在微信公眾平臺的 “設置 - 開發設置” 里找到 AppID，后續創建項目時會用到。?

二、搭建小程序項目框架?🌷🌷

? ? ? ? ? 打開微信開發者工具，點擊 “新建項目”。在彈出的窗口中，填寫項目名稱，比如 “單詞速記小助手”，選擇好項目存放的文件夾。若有 AppID 就填入，沒有就勾選 “不使用云服務”，選擇 “體驗模式”，點擊 “新建”，一個全新的小程序項目框架就搭建好啦。?

? ? ? ? ? ?新建項目后，我們還是先熟悉下項目結構。pages文件夾用來存放不同頁面的代碼，app.js掌控小程序的整體邏輯走向，app.json負責配置頁面路徑、窗口表現等關鍵信息，app.wxss則用于設置全局樣式。?

三、實現單詞速記功能頁面?🌷🌷

? ? ? ? ? ? ?我們設計的 “單詞速記小程序”，主要有一個單詞展示和記憶的頁面，用戶點擊按鈕就能隨機顯示一個單詞及其釋義，還能切換顯示下一個單詞。?

1. 創建頁面文件?

? ? ? ? ? ? 在pages文件夾上點擊鼠標右鍵，選擇 “新建 Page”，命名為wordMemo，系統會自動生成wordMemo.js、wordMemo.json、wordMemo.wxml、wordMemo.wxss四個文件，分別對應頁面的邏輯、配置、結構和樣式。?

2. 編寫頁面結構（wordMemo.wxml）

<view class="word-container"><text class="word-title">今日單詞</text><text class="word-text">{{currentWord.word}}</text><text class="explain-text">{{currentWord.explain}}</text><button bindtap="showNextWord">下一個單詞</button>
</view>

?

? ? ? ? ? ? ?這段代碼構建了單詞展示頁面的基礎結構。word-title用于顯示標題，word-text展示當前單詞，explain-text呈現單詞釋義，showNextWord綁定按鈕點擊事件，用于切換顯示下一個單詞。?

3. 編寫頁面樣式（wordMemo.wxss）

.word-container {padding: 30px;text-align: center;background-color: #f8f8f8;border-radius: 10px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}.word-title {font-size: 20px;font-weight: bold;margin-bottom: 20px;
}.word-text {font-size: 28px;margin-bottom: 15px;
}.explain-text {font-size: 16px;color: #666;
}button {width: 150px;height: 45px;background-color: #007AFF;color: white;border: none;border-radius: 5px;margin-top: 30px;
}

? ? ? ? ?通過這段樣式代碼，我們給頁面添加了背景、陰影效果，還設置了不同文本和按鈕的樣式，讓頁面看起來簡潔又美觀。?

4. 編寫頁面邏輯（wordMemo.js）

Page({data: {wordList: [{ word: "apple", explain: "蘋果" },{ word: "book", explain: "書" },{ word: "cat", explain: "貓" },{ word: "dog", explain: "狗" },{ word: "elephant", explain: "大象" }],currentWord: {}},onLoad: function () {this.showRandomWord();},showRandomWord: function () {let wordList = this.data.wordList;let randomIndex = Math.floor(Math.random() * wordList.length);this.setData({currentWord: wordList[randomIndex]});},showNextWord: function () {this.showRandomWord();}
});

? ? ? ? ? ? ? 在data中，我們預先定義了一個簡單的單詞列表wordList和用于存儲當前展示單詞的currentWord。onLoad方法在頁面加載時調用showRandomWord，隨機展示一個單詞；showRandomWord方法通過生成隨機索引，從單詞列表中獲取單詞并展示；showNextWord方法同樣調用showRandomWord，實現切換下一個單詞的功能。?

四、運行與調試小程序?🌷🌷

? ? ? ? ? ? 完成代碼編寫后，點擊開發者工具上方的 “編譯” 按鈕，或者按下快捷鍵Ctrl + S（Windows）/Command + S（Mac）保存代碼，就能在模擬器中看到我們的 “單詞速記小程序” 啦！點擊 “下一個單詞” 按鈕，單詞會不斷隨機切換展示。?

? ? ? ? ? ? ? 要是小程序沒有正常運行，別著急。利用開發者工具右邊的調試面板查看報錯信息，在wordMemo.js中添加console.log()語句，比如在showRandomWord方法里添加console.log(randomIndex)，就能打印出隨機索引，方便我們排查問題。?

? ? ? ? ? ? ?到這里，一個簡單的單詞速記小程序就開發完成了。后續你還可以為它添加更多功能，比如單詞發音、單詞收藏、學習記錄統計等。微信小程序開發的世界充滿無限可能，來與我一起探索這些未知的領域。制作自己專屬的小程序把

?