微信小程序——開發基礎

內容說明:這是微信小程序第一次實驗報告
  本次實驗主要實現了三部分內容:開發環境的搭建,開發工具的安裝以及比較數字大小的實驗案例。在進行實驗的過程中,掌握了以下知識內容:

  1. 微信小程序開發環境的搭建
  2. 小程序項目的創建
  3. 頁面文件WXML的編寫
  4. 頁面樣式WXSS的編寫(元素選擇器、尺寸單位、樣式引入)
  5. 配置文件JSON的編寫(頁面級和應用級配置文件的常見配置屬性)
  6. 頁面邏輯文件JS的編寫(生命週期回調函數、頁面事件處理函數、組件事件處理函數)
  7. 五種實現頁面邏輯的方法(爲不同的組件綁定不同的處理函數、爲同類型組件綁定相同的處理函數、使用{{}}+條件表達式、利用條件渲染顯示需要的組件、通過表單格式form獲取用戶輸入信息)

一、實驗原理

實現微信小程序開發環境的搭建,然後創建一個用於實驗的小程序項目。
分佈進行頁面文件WXML的編寫,頁面樣式WXSS的編寫(元素選擇器、尺寸單位、樣式引入),配置文件JSON的編寫(頁面級和應用級配置文件的常見配置屬性),頁面邏輯文件JS的編寫(生命週期回調函數、頁面事件處理函數、組件事件處理函數),最後使用五種方式實現頁面邏輯(爲不同的組件綁定不同的處理函數、爲同類型組件綁定相同的處理函數、使用{{}}+條件表達式、利用條件渲染顯示需要的組件、通過表單格式form獲取用戶輸入信息)。

二、實驗過程記錄

2.1 開發環境搭建

  首先使用瀏覽器打開微信公衆號平臺(https://mp.weixin.qq.com),點擊“立即註冊”按鈕,進入註冊界面。之後選擇註冊的賬號類型,點擊“小程序”,填寫小程序的註冊登記信息。在“小程序發佈流程”界面,可以查看小程序的配置信息和AppID。

2.2 安裝開發工具

  在小程序開發工具的下載界面,下載安裝包。按照提示進行開發工具的安裝。打開小程序開發工具,出現新建項目的配置界面。選擇新建“小程序”項目,修改“項目名”、“目錄”等信息,AppID選擇測試號即可。點擊“新建”按鈕即可新建項目。

2.3 實驗案例

  新建的小程序會自動創建“HelloWorld”項目的模板,爲了熟悉小程序各個目錄的功能,先將所有已創建的文件全部刪除,再重新創建。

2.3.1 創建項目配置文件

  首先創建項目的配置文件app.json,編寫小程序的配置信息。如圖3.1所示。
在這裏插入圖片描述

圖3.1 小程序初始化配置信息

  使用“ctrl+s”保存文件,開發工具會自動進行編譯,並生成所需的頁面文件。此時,文件目錄如下圖3.2所示。
在這裏插入圖片描述

圖3.2 自動生成的頁面

  配置文件自動生成了四個文件,分別是主頁的邏輯文件“index.js”、主頁的配置文件“index.json”、主頁的佈局文件“index.wxml”以及主頁的樣式文件“index.wxss”。

2.3.2 編寫頁面文件

  在自動創建的index.wxml文件中,已有如圖3.3所示的代碼文件。此時主界面只顯示文件的路徑文本信息。
在這裏插入圖片描述

圖3.3 佈局文件初始化內容

  現在修改佈局文件,使其顯示數值比較的界面。修改代碼如圖3.4所示。
在這裏插入圖片描述

圖3.4 佈局文件內容修改

  此時打開模擬器進行界面的測試,界面顯示結果如圖3.5所示。
在這裏插入圖片描述

圖3.5 模擬器測試界面1

2.3.3 編寫樣式文件

  接下來修改小程序界面的樣式,打開index.wxss文件,嘗試使用不同的選擇器進行樣式設置。首先使用element選擇器,在index.wxss界面中,爲view組件設置樣式,代碼如圖3.6所示。
在這裏插入圖片描述

圖3.6 編寫樣式文件

  此時,模擬器顯示的界面如圖3.7所示。
在這裏插入圖片描述

圖3.7 模擬器測試界面2

  在wxml中,同樣可以使用標籤的style屬性進行樣式修改。現將第一個view組件的style屬性添加“margin:40px”,以和之前的設置進行區分,模擬器顯示的界面如圖3.8所示。
在這裏插入圖片描述

圖3.8 模擬器測試界面3

  可以看到,第一個view組件的邊距比第二個的邊距大一些,說明在組建中直接更改屬性的方法是可行的。下面測試.class選擇器的方式。在第二個view組件上,設置其class屬性爲container,之後在index.wxss文件中,添加container屬性爲“margin: 25px”,如圖3.9所示。爲了界面美觀,將第一個組件的style屬性,也修改爲邊距25px。在模擬器中測試的界面結果如圖3.10所示。
在這裏插入圖片描述

圖3.9 設置組件樣式

在這裏插入圖片描述

圖3.10 模擬器測試界面4

2.3.4 統一尺寸規格

  爲了更加直觀地對比WXSS中的rpx和px兩種單位的區別,同時統一組件的尺寸規格,在index.wxss文件中,修改文件中的樣式內容,如圖3.11所示。
在這裏插入圖片描述

圖3.11 樣式文件

  其中,主要設置了input組件的寬度、頂層邊距、以及底邊框線條顏色,設置了button按鈕的外邊框。其中需要注意的是,尺寸單位使用了rpx(responsive pixel)響應式像素,rpx規定了任何手機的屏幕寬度均爲750rpx,有小程序負責講、將邏輯像素自動轉換爲當前手機中的物理像素。也就是按照手機屏幕比例進行縮放,這樣就不用擔心手機寬度不同的問題了。在模擬器中的界面結果如圖3.12所示。
在這裏插入圖片描述

圖3.12 模擬器測試界面5

2.3.5 樣式導入

  設置wxss樣式文件時,可以通過@import語句進行外聯樣式的導入。首先在index文件夾中,創建test.wxss文件,作爲外聯樣式文件,在文件中編寫如圖3.13所示的代碼。
在這裏插入圖片描述

圖3.13 按鈕樣式

  之後在index.wxss文件中,導入test.wxss文件,如圖3.14所示。
在這裏插入圖片描述

圖3.14 導入外聯樣式

  保存文件並使用模擬器查看界面效果,如圖3.15所示。
在這裏插入圖片描述

圖3.15 模擬器測試界面6

  需要注意的是,在index.wxss文件中,導入的外聯樣式和在內部直接定義的樣式可以同時生效。

2.3.6 設置全局樣式

  可以在根目錄下,創建一個全局樣式文件,便於代碼修改和維護。現在在根目錄下創建app.wxss文件作爲全局樣式。
在這裏插入圖片描述

圖3.16 按鈕字符樣式

  上圖3.16中的代碼設置了全局button組件的字符間距爲12rpx。
  需要注意的是,當全局樣式與頁面樣式發生衝突時,頁面樣式的優先級更高,會覆蓋全局樣式。

2.3.7 設置配置文件

  小程序的頁面均可以通過json文件進行配置,其中又分爲頁面級的配置文件和全局配置文件。首先進行頁面級配置文件的編寫,在index.json文件中編寫如下圖3.17所示的代碼。
在這裏插入圖片描述

圖3.17 配置文件

  此時,模擬器中的小程序的標題欄界面如下圖3.18所示。
在這裏插入圖片描述

圖3.18 模擬器測試標題欄界面

  現在進行頁面級配置文件的編寫,修改根目錄下的app.json配置文件,代碼如下圖3.19所示。
在這裏插入圖片描述

圖3.19 全局配置文件

  其中,navigationBarTitleText表示導航欄標題文字內容;navigationBarBackgroundColor表示導航欄背景顏色;navigationBarTextStyle表示導航欄標題顏色;backgroundColor表示窗口的背景顏色;
  backgroundTextStyle表示下拉loading的樣式;enablePullDownRefresh表示是否允許當前頁面的下拉刷新【1】。Debug表示是否允許程序進行調試。此時,在控制檯查看調試信息,如圖3.20所示。
在這裏插入圖片描述

圖3.20 控制檯調試信息

2.3.8 邏輯文件配置

  微信小程序中,.js文件表示程序的邏輯文件,打開index.js文件,可以看到開發者工具已經初始化生成了一些代碼,現在在此基礎上進行修改。
  首先測試生命週期回調函數,以onLoad、onReady、onShow函數爲例進行測試,通過console.log()函數輸出調試信息,代碼如圖3.21所示。
在這裏插入圖片描述

圖3.21 生命週期函數測試

  爲了方便觀察調試信息,先將全局配置文件中的debug選項設置爲false,保存並編譯程序,效果如圖3.22所示。
在這裏插入圖片描述

圖3.22 控制檯調試信息

  之後測試頁面事件處理函數,以onPullDownfresh、onReachBottom、onPageScroll函數爲例,在index.js文件中分別使用控制檯日誌顯示觸發提示,代碼如圖3.23所示。
在這裏插入圖片描述

圖3.23 頁面事件處理函數

  以下拉刷新爲例,在模擬器上下拉刷新後,控制檯將會顯示如下圖3.24所示的調試信息。
在這裏插入圖片描述

圖3.24 控制檯調試信息

  下面測試組件事件的處理函數,對組件的事件處理,需要將組件綁定特定的觸發函數。以button組件爲例,爲其綁定tap事件,tap事件表示當用戶觸摸到組件時會觸發的事件,綁定tap事件之後,還需要爲其編寫相應的事件處理函數。按照題目要求,編寫compare函數作爲button組件的事件處理函數,代碼如下圖3.25所示。
在這裏插入圖片描述

圖3.25 組件事件處理函數

  現在點擊比較按鈕,可以在控制檯看到事件的響應信息,如圖3.26所示。
在這裏插入圖片描述

圖3.26 控制檯調試信息

  常用的冒泡事件如下表3-1所示【2】
表3-1 常用的冒泡事件
事件類型 觸發條件
touchstart 手指觸摸動作開始
touchmove 手指觸摸後移動
touchcancle 手指觸摸動作被打斷
touchend 觸摸狀態結束
tap 手指觸摸後馬上離開
longpress 手指觸摸後,超過350ms再離開

2.3.9 註冊程序

  若要在小程序啓動、顯示、隱藏時執行某些操作,可以通過App()函數來實現。App()函數用於註冊小程序,它會接受一個對象參數,通過該參數指定小程序的生命週期回調等。下面對小程序的App()進行測試,具體代碼如下圖3.27所示。
在這裏插入圖片描述

圖3.27 註冊程序測試

  保存並進行調試,在控制檯查看調試信息如下圖3.28所示。
在這裏插入圖片描述

圖3.28 控制檯調試信息

2.3.10實現比較功能

方式一、爲兩個input組件綁定兩個不同的事件處理函數
  Input組件提供了change事件,該事件能夠在輸入框中的內容發生變化時觸發,並能獲取到用戶輸入的數字。下面在兩個input組件中,分別綁定change事件,代碼如下圖3.29所示。
在這裏插入圖片描述

圖3.29 事件處理函數

  該段代碼中,需要注意的是Number()函數,它用於將字符串數據轉換爲數字類型的數據。於是,用戶輸入的數字數據就被分別賦值在了this.num1和this.num2中。
  現在在模擬器的input組件中,輸入數字數據,即可在控制檯查看輸入的數字內容。以在第二個輸入框中輸入數字1爲例,控制檯中的調試信息如下圖3.30所示。
在這裏插入圖片描述

圖3.30 控制檯調試程序

  當用戶單擊“比較”按鈕時,對this.num1和this.num2進行比較即可。爲了將比較結果顯示出來,可以在wxml文件的比較結果之後,添加一個變量result,代碼如下圖3.31所示。
在這裏插入圖片描述

圖3.31 添加自變量

  上述代碼中需要注意的是,在WXML中使用了雙括號數據綁定的格式,被稱爲Mustache語法。{}中填寫變量名,在程序初始化過程中,就會到邏輯文件的data字段裏查找變量的初始值。
  之後需要在index.js邏輯文件中的data字段添加result的初始化變量爲空字符,代碼如下圖3.32所示。
在這裏插入圖片描述

圖3.32 添加變量初始化

  最後,在index.js文件中,修改button的事件處理函數compare,將比較的結果通過this.setData()顯示在頁面中,具體代碼如下圖3.33所示。
在這裏插入圖片描述

圖3.33 事件處理函數

  上述代碼中需要注意的是,如果想要改變result的值,不能通過直接賦值的方式,而是使用this.setData()方法實現。該方法的參數是一個對象,傳入{result: str}表示將result的值賦爲str。最後通過console.log(str)在控制檯中顯示提示信息。現在程序的比較邏輯部分已經完成,在模擬器中進行測試,顯示如下圖3.34所示。
在這裏插入圖片描述

圖3.34 模擬器測試界面

  在控制檯中的調試信息如下圖3.35所示。
在這裏插入圖片描述

圖3.35 控制檯調試信息

方式二、爲兩個input組件綁定兩個相同的處理函數
  可以爲多個input組件綁定相同的事件處理函數,然後通過不同組件的id或dataset進行區分。首先測試通過id進行區分,在index.wxml文件的input組件中,添加id屬性,並綁定相同的事件處理函數btnchange,代碼如下圖3.36所示。
在這裏插入圖片描述

圖3.36 添加id屬性

  然後在index.js文件中編寫btnchange函數,用於獲取用戶在input組件輸入的數值,代碼如下圖3.37所示。
在這裏插入圖片描述

圖3.37 事件處理函數

  在模擬器進行測試,控制檯中的調試信息可以正常輸出,如下圖3.38所示。
在這裏插入圖片描述

圖3.38 控制檯調試信息

  現在嘗試通過dataset區分元素。在wxml文件的input組件中,刪除id屬性,添加data-id屬性,如下圖3.39所示。
在這裏插入圖片描述

圖3.39 事件處理函數

  在控制檯查看調試信息,同樣可以正常顯示input輸入的數值。這裏需要注意的是,在未進行初始化的時候 this.num1和this.num2均爲undefined未定義狀態。
方式三、在頁面中直接進行比較
  使用WXML中的{{}}語法,可以直接比較兩個變量的大小,代碼如下圖3.40所示。
在這裏插入圖片描述

圖3.40 條件表達式控制

  在邏輯文件中增加change3處理事件,其代碼如下圖3.41所示。
在這裏插入圖片描述

圖3.41 事件處理函數

  使用此方法時出現了問題,不管我輸入的數據是多少,最後的比較結果總是顯示“第1個數大”,問題已經解決,(解決過程見“四、實驗中存在的問題及解決方案”)。
方式四、通過條件渲染產生不同的結果
  除了使用條件運算符進行判斷之外,還可以通過條件運算符的渲染,實現根據不同的判斷結果顯示不同標籤的效果,修改index.wxml文件,代碼如下圖3.42所示。
在這裏插入圖片描述

圖3.42 條件渲染方式

  同時在index.js文件中,編寫change4事件處理函數,與方式三中的change3函數類似,其代碼如下圖3.43所示。
在這裏插入圖片描述

圖3.43 事件處理函數

  在模擬器中進行調試,數字比較結果顯示正常。
  下面對佈局文件進行改進,使用標籤控制區域的顯示與否,其關鍵代碼如下圖3.44所示。
在這裏插入圖片描述

圖3.44 使用組件

  需要注意的是,標籤沒有渲染的功能,它只是一個包裝組件,用來控制某一塊區域是否進行顯示。測試該方式,程序同樣正常運行。
方式五、通過表單獲取input組件的值
  可以通過標籤創建表單,獲取表單組件中的值。在本案例中,可以將兩個input組件和button組件做成一個表單,代碼如下圖3.45所示。
在這裏插入圖片描述

圖3.45 使用表單組件

  進行模擬器上的測試,結果發現程序未能正常顯示數值比較結果,控制檯也沒有發出任何警告或錯誤信息。經過反覆查找,終於找到錯誤原因。原因是我誤將組件寫成了組件,如下圖3.46所示。經過查閱資料,發現並不存在名爲的組件,但是開發工具沒有報錯。爲了進行測試,我改正錯誤之後,又新增了一行沒有定義過的標籤,如圖3.47所示,發現程序正常運行。說明WXML對於標籤的檢查是不嚴格的,它對於錯誤的標籤只會忽略渲染,對整個佈局不會產生影響。
在這裏插入圖片描述

圖3.46 錯誤位置

在這裏插入圖片描述

圖3.47 未定義組件測試

  至此,實現比較功能的五種方式均以經過測試,其中第三種方式(在頁面中直接進行比較),還存在問題,沒有調試成功。將在“四、實驗中存在的問題及解決方案”章節進行第三種方式的問題調試。

三、實驗結果

  本次實驗實現微信小程序開發環境的搭建,並創建一個用於測試的小程序項目。完成了小程序佈局文件、邏輯文件等內容的而編寫,最後使用五種方式實現了頁面邏輯。本次實驗小程序項目文件,已經上傳到GitHub儲存。

四、實驗中存在的問題及解決方案

4.1問題回顧

  目前爲止,實現比較功能的五種方式均以經過測試,只有第三種方式,即在頁面中直接顯示結果的方式沒有實現功能。該方法意在使用{{}}語法和條件表達式相結合的方式,直接在佈局頁面實現數字大小的比較與結果的顯示。
  現在程序運行的狀態是不管輸入任何數字,都只會顯示“第 1 個數字大”這樣的結果。現在程序代碼截圖如下圖4.1和圖4.2所示。
在這裏插入圖片描述

圖4.1 佈局文件

在這裏插入圖片描述

圖4.2 事件處理函數

4.2問題分析

  能夠顯示數字比較的結果,說明input的事件處理函數應該是沒有問題,它的this.setData()函數能夠實現返回num數值的功能,所以問題應該出現在佈局文件中的條件表達式上。仔細觀察條件表達式,發現條件表達式的輸出結果寫重複了,都寫成了“第1個數大”。將其改正後,程序正常運行。

4.3問題總結

  在編寫程序時要注意細節,複製粘貼的時候要把該修改的內容修改完畢,再檢查完成後調試運行。

五、實驗總結

  本次實驗主要實現了三部分內容:開發環境的搭建,開發工具的安裝以及比較數字大小的實驗案例。在進行實驗的過程中,掌握了以下知識內容:

  1. 微信小程序開發環境的搭建
  2. 小程序項目的創建
  3. 頁面文件WXML的編寫
  4. 頁面樣式WXSS的編寫(元素選擇器、尺寸單位、樣式引入)
  5. 配置文件JSON的編寫(頁面級和應用級配置文件的常見配置屬性)
  6. 頁面邏輯文件JS的編寫(生命週期回調函數、頁面事件處理函數、組件事件處理函數)
  7. 五種實現頁面邏輯的方法(爲不同的組件綁定不同的處理函數、爲同類型組件綁定相同的處理函數、使用{{}}+條件表達式、利用條件渲染顯示需要的組件、通過表單格式form獲取用戶輸入信息)

六、附錄

6.1 實驗代碼

  本次實驗的項目代碼,已經上傳到了GitHub,網址爲:
https://github.com/ZHJ0125/WeChat

6.2參考資料

【1】 微信官方文檔——頁面配置https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
【2】 微信官方文檔——事件https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

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