微信小程式怎麼在wxml中插入多個圖檔_白雲工商帶你10分鐘入門微信小程式開發...

10分鐘入門微信小程式開發

程式開發難嗎？ No！來白雲工商帶你10分鐘入門微信小程式開發！

英語不好能學好程式開發嗎？ 當然能，程式開發常見的也就那幾個單詞，隻要熱愛，非常簡單！

欣賞

首先，來欣賞下在白雲工商 計算機程式設計專業 學生曾經完成的微信小程式效果

10分鐘目标成果

準備好電腦+智能手機，帶你開發如下圖所示的商城小程式

曾經一節課4個學習小組的學習成果圖

目标成果分解

上圖目标成果分解

1.頁頭 商城文字和背景顔色

2.中間 商品展示效果

3.頁尾 導航菜單

工作準備：微信開發者工具下載下傳

下載下傳微信web開發者工具，根據自己的作業系統下載下傳對應的安裝包進行安裝即可。

打開開發者工具，用微信掃碼登入開發者工具，準備開發你的第一個小程式吧！

工作準備：建立小程式項目

打開開發者工具，選擇 “小程式項目”，點選右下角的 “+” 建立項目。

選擇一個空的檔案夾作為項目目錄，再填寫一個項目名稱，比如我這裡叫做 shop。點選 “确定” 進入工具主界面。

微信開發者工具主界面圖

0 1

制作頁頭頁尾

在目标成果預覽中我們看到，目标效果圖包括頁頭+中間圖文展示+頁尾(導航菜單)，我們先把頁頭和頁尾處理好。這兩部分屬于小程式的全局配置，是以需要修改 app.json 檔案。  

0 1

  pages 屬性用來設定頁面路徑

window 屬性用于設定小程式的狀态欄、導覽列、标題、視窗背景色。

tabBar 的屬性是用于設定頁尾導航的路徑。

制作頁頭頁尾完成的效果圖

0 2

制作中間商品展示

簡單起見，我們就在 pages/index 目錄下實作 “個人中心” 頁面好了。輕按兩下打開 index.wxml，初始内容如下：

這裡已經有一些代碼了，雖然現在可能還看不懂，但我們知道，這就是現在頁面的源代碼。我們去掉所有标簽，隻留下最外面的一個容器标簽，再增加我們希望現實的内容：

02

wxml 檔案中的 元件類似于網頁開發中的

，而 元件是用來寫文本的

插入圖檔，圖檔要儲存到 image 目錄中

再給view、text、image标簽添加樣式

 儲存重新整理，“商品展示”效果就完成了

大功告成，點選開發者工具中的 “預覽”，使用微信掃描生成的二維碼即可在手機端檢視。

更多功能學習，白雲工商見吧～

開設微信小程式開發的專業有以下：

0 1計算機程式設計專業0 2移動網際網路應用技術專業

圖文：彭钊

排版：彭钊

稽核：康菁發