武漢加油、中國加油篇:第一次編寫微信小程序(一)

今天是一個特殊的日子。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頁面(兩種辦法如下)

  1. 自己在page頁面下創建一個cart文件夾,然後創建4個同名的後綴不同文件,然後在app.json引入,一般pages標籤下第一個就是首頁,可以查看
  2. 在app.json下pages引入編寫,保存,會自動在page下創建文件夾和4個必要的文件(推薦,筆者自己喜歡的方式)

上面的每一個標籤都要自己去練習吧。

筆者今天先總結到這裏,其它部分分下次總結

筆者的小程序已經發布.感興趣的在微信小程序中搜索:敬業的小碼哥計算器

原創不易,點個贊吧

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章