今天是一個特殊的日子。2020.4.4全國哀悼日。沉痛悼念在抗擊新冠肺炎疫情鬥爭犧牲烈士和逝世同胞。山河無恙,因爲英雄逆行;幸福如故,勿忘逝者同胞。哪有什麼歲月靜好,都是有人替我們負重前行,致敬英雄。
10點已到,先讓我默哀3分鐘。。。。。。。。
無論什麼樣的風雨,都阻擋不住中華民族的前進的腳步。我把這3天學習的微信小程序步驟總結一下。爲中國加油!
學習步驟如下
1:小程序註冊
2:下載開發工具並安裝
3:認識開發工具
4:主配置文件介紹
5:其它文件介紹和數據綁定
6:認識各種組件
7:進行編程案例
8:發佈自己的小程序
一、小程序註冊
在公衆平臺首頁、點擊註冊按鈕。具體註冊步驟這裏不再贅述,
注意的是,以什麼身份註冊筆者是以個人的身份註冊的
二、下載開發工具
註冊成功後,登錄之後點擊左側的開發標籤。然後進行工具下載
選擇版本。筆者下載了兩個,區別稍後說
安裝穩定版(穩定版和開發版區別可能是效果不一樣。筆者完成項目發佈之後效果不是很理想,與模擬器有差別)
安裝完畢,打開微信掃描登錄
1、首次登錄進入開發工具如下頁面
2、點擊“+”創建項目
注意:APPID位置
填入APPID之後點擊新建之後如下頁面
獲得頭像
三、認識開發工具
1、主要工具部分介紹
1)、主要認識如下圖
各部分需要在實際使用的時候在自己體會
2)、網頁開發和微信小程序開發文件對比如下圖更加直觀
對應的功能是一一對應的
2、新建一個項目的頁面主體部分介紹
介紹:
在項目的主目錄下有兩個子目錄,和5個文件
其中以app開頭的是小程序的描述文件這三個app開頭 的文件不屬於任何一面,這三個文件必須放在主目錄下名稱也是固定的,project.config.json是開發工具的配置項這幾項通常放在主目錄下,不要動他
App.js是小程序的主描述文件,主要用來註冊小程序
App.json是小程序的主配置文件,對微信小程序進行全局配置
App.wxss這項可以缺少,這這配置的樣式其它頁面可以共享
Pages目錄下有兩個子目錄,index目錄和logs目錄
Pages下的每個目錄表示的是下面那個區域的每個頁面
pages下的一個目錄代表一個頁面,index和logs就是兩個頁面
每個頁面下又都有4個文件
他們的文件名與他們的目錄名是對應的因爲框架特殊規定,方便管理
Utail是放工具代碼的地方,出了放工具代碼,我們還要放音頻,視頻,圖片的目錄,這些目錄可以在主目錄下自行創建
3、調試工具簡單介紹(簡單瞭解調試器)
調試器通常有9個模塊,這裏10個和之前接觸的瀏覽器F12的調試是差不多的
Console:後面講控制面板
Source:顯示腳本文件
Network:網絡相關的
Security:安全相關的
Storage:緩存,
Appdata:顯示具體的數據
Wxml:在模擬器中調試我們的樣式,
Sensor:xx感應的
Trace:手機調試
4、文件管理和快捷鍵使用
1)、創建子目錄(image)並添加圖片
那麼如何添加一張圖片呢?複製到這裏?這是不允許的
只有找到項目的目錄文件,img文件夾複製到文件夾裏纔可以。
然後就可以看見了
2)刪除img下的文件或者目錄
刪除的時候,如果刪除img目錄,則下面的文件全部刪除了
右鍵刪除
其它類似的操作上圖右鍵有即可操作
3)如何創建一個新的頁面
創建頁面(在page文件夾下創建一個文件夾即可)
4)快速找到項目文件位置
5)快捷鍵
四、主配置文件介紹(app.json)
工具打開以後會找app.json找不到會拋錯
創建項目時會自動創建如下圖
介紹
具體配置
練習創建一個cart頁面(兩種辦法如下)
- 自己在page頁面下創建一個cart文件夾,然後創建4個同名的後綴不同文件,然後在app.json引入,一般pages標籤下第一個就是首頁,可以查看
- 在app.json下pages引入編寫,保存,會自動在page下創建文件夾和4個必要的文件(推薦,筆者自己喜歡的方式)
上面的每一個標籤都要自己去練習吧。
筆者今天先總結到這裏,其它部分分下次總結
筆者的小程序已經發布.感興趣的在微信小程序中搜索:敬業的小碼哥計算器
原創不易,點個贊吧