返回

微信小程序入門指南：打造動態數據列表

前端

  1. 理解微信小程序的基本結構

在開始編寫程式碼之前，先來了解一下微信小程序的基本結構。一般來說，微信小程序的目錄結構如下：

|-- app.js               // 程序的主入口文件
|-- app.json             // 小程序的基本配置信息
|-- pages
|   |-- index
|   |   |-- index.js    // 頁面邏輯程式碼
|   |   |-- index.json   // 頁面配置信息
|   |   |-- index.wxml  // 頁面的 WXML 程式碼
|   |   |-- index.wxss  // 頁面的 WXSS 程式碼
|   |-- another-page
|   |   |-- another-page.js
|   |   |-- another-page.json
|   |   |-- another-page.wxml
|   |   |-- another-page.wxss
|-- utils
|   |-- util.js         // 公共的工具程式碼
|-- package.json          // 項目的配置信息
|-- project.config.json   // 開發者工具的配置文件

2. 構建數據列表頁面

現在我們來構建一個簡單的數據列表頁面。

2.1. 創建頁面文件

首先在 pages 目錄下創建 index 目錄，在該目錄下創建 index.js、index.json、index.wxml 和 index.wxss 四個文件。

2.2. 定義數據

在 index.js 檔案中定義數據：

Page({
  data: {
    list: [
      {
        id: 1,
        name: '商品 1',
        price: '100 元'
      },
      {
        id: 2,
        name: '商品 2',
        price: '200 元'
      },
      {
        id: 3,
        name: '商品 3',
        price: '300 元'
      }
    ]
  },
});

2.3. 渲染數據

在 index.wxml 檔案中渲染數據：

<view>
  <block wx:for="{{list}}" wx:key="id">
    <view>{{item.name}} - {{item.price}}</view>
  </block>
</view>

3. 運行小程序

現在你可以通過微信開發者工具或者微信小程序真機來運行小程序了。

4. 進階技巧

  1. 使用 wx.request() 進行網路請求，從伺服器獲取數據。
  2. 使用 wx.showModal() 顯示模態框，提示用戶操作。
  3. 使用 wx.navigateTo() 跳轉到其他頁面。
  4. 使用 wx.setStorage() 和 wx.getStorage() 儲存和讀取本地數據。

5. 總結

通過本文的學習，你已經初步掌握了微信小程序的開發知識，可以開始構建自己的小程序了。希望這些內容對你有幫助，祝你開發順利！