chunk的博客地址

一、實驗目標

1、學習使用快速啟動模板創建小程序的方法；

2、學習不使用模板手動創建小程序的方法。

二、實驗步驟

1. 自動生成小程序

• 在微信開發者工具中選擇模板創建項目，如圖所示。
  依次填寫項目名稱、目錄和 AppID 就可以新建一個小程序項目。其中項目名稱為開發者自定義，僅供開發者工具管理使用；目錄即為項目文件存放的路徑地址；AppID為管理員在微信公眾平臺上注冊的小程序ID（以登錄微信公眾平臺查看）。
  
• 編譯預覽小程序。
  

2. 手動創建小程序

• 不選取模板創建新項目
  
  

• 進行頁面配置

  • 創建頁面文件
    page文件內存儲頁面文件，一般來說，首頁默認命名為index，表示小程序運行的第一個頁面。
    
  • 刪除index.wxml、index.wxss和app.wxss中的所有代碼；
    
    
  • 刪除index.js中的所有代碼并輸入"page"使其自動補全函數；
    
    
  • 刪除app.js中的所有代碼并輸入"app"使其自動補全函數。
    

• 視圖設計

  • 導航欄設計

    在app.json文件中對windows屬性進行重新配置來自定義導航欄效果，將小程序導航欄更改為紫色背景及白色字體。

  663399使用rgb格式，代表紫色；
  
  對應效果如下：

  • 頁面設計

    首先，在小程序中添加微信頭像、昵稱及“點擊獲取頭像和昵稱”按鈕三個組件，并將其設置為列項居中排列。

    使用組件格式：
    微信頭像：<image>組件;
    微信昵稱: <text>(文本)組件;
    按鈕: <button>(按鈕)組件。

由于尚未獲得頭像圖片，臨時使用本地圖片代替微信頭像，之后再通過點擊按鈕獲取微信頭像后進行更改。
在項目中新建自定義文件夾images用于存放圖片并將本地圖片移入等待使用，之后修改<image>組件讀取該圖片。

• 邏輯實現

  • 獲取微信用戶信息

    在WXML頁面修改<button>組件的代碼，其中open-type= get User Info'表示激活獲取微信用戶信息功能,然后使用 bindgetuserinfo屬 性表示獲得的數據將傳遞給自定義函數 getMyInfo, 名稱可自定義。
    

    在JS頁面的Page()內部追加getMyInfo函數

    
    保存后預覽項目，如果點擊按鈕后 Console 控制臺能夠成功輸出一段數據，就說明獲取成功。
    

  • 使用動態數據顯示頭像和昵稱

    在WXML頁面修改<image>和<text>組建的代碼。
    
    修改JS文件，在現有的data 屬性中追加這兩個動態數據的值，使其仍然可以顯示原先的內容。

  

  更新后預覽圖不變，如圖所示：

  • 更新頭像和昵稱

    修改JS文件中getMyInfo 函數的代碼,使獲取到的信息更新到動態數據上

三、程序運行結果

四、問題總結與體會

1. 學會了微信開發者工具的基礎操作，能按步驟新建項目，用快速啟動模板快速看到可運行的小程序效果，還能模擬或真機預覽，初步了解了小程序開發的基本流程。
2. 通過手動創建小程序，我理清了小程序的文件結構，大致了解了不同文件的作用，也掌握了修改配置（如導航欄樣式）和刪減多余文件的方法，對小程序的配置邏輯有了簡單的認識。
3. 嘗試用基礎組件搭建頁面，用 WXSS 調整樣式，還通過 JS 編寫函數獲取用戶信息、更新頁面數據，理解了一些簡單原理。