微信小程式學習第一天
Hello world!
一、準備工作
1.註冊小程式,瀏覽器中搜索“小程式註冊”,找到開頭為mp.weixin.qq.com這個域名的,進行註冊即可。
2.程式安裝執行後出現如圖1介面。點選小程式專案。
3.開啟後的介面如圖2,專案目錄選擇要將專案儲存的位置,選一個容易找的地方即可。
AppID填寫方法有兩種:
(1)直接使用測試號,點選小程式或小遊戲即可;
(2)在微信小程式登入後的介面點選開發設定,會出現AppID,複製後填寫即可。
填寫好後選擇了建立普通快速啟動模板(最簡單),點選確定,便建立了新專案。
二、寫第一個helloworld!
1.為學起來方便,將logs和utils資料夾刪除。刪除後會出現一個錯誤,開啟app.json,將藍色劃線處的內容刪除。index.wxml中的內容同樣刪除,之後便發現右邊的內容為空白。
2.開啟index.wxml,寫上hello world,儲存後右邊模擬器中會出現hello world!字樣。之後可對字型大小顏色樣式等修改。
!
3.更改樣式
在index.wxss中更改,
(1) 以下程式碼可以更改整個編寫的頁面的樣式。
(2) 若要更改部分內容的樣式,可先在index.wxml中前面的標籤中新增一個class做標記,之後再去index.wxss中更改,如下。其他內容可自行嘗試修改。至此,第一個hello world!已完成。
三、進階----新增一張圖片
1.在pages資料夾下右鍵--新建目錄,建立img資料夾,右鍵--在硬碟中開啟,將提前準備好的圖片貼上到該資料夾下,便可看到img資料夾下多了一張圖片。
2.在index.wxml中新增語句如下,此時圖片即可顯示出,圖片樣式的修改同文字類似。
(2).關於目錄
1)./表示同級目錄下的內容。如下圖,編輯的頁面為index.wxml,
“./”找到的是index資料夾下的內容,“../”找到的是pages下的內容,即可找到img資料夾。
若img資料夾在pages外,則為../../img/tsa.jpg