微信小程式 Demo（豆瓣電影）

由於時間的關係，沒有辦法寫一個完整的說明，後續配合一些視訊資料，請持續關注

Demo 預覽

使用步驟

1. 將倉庫克隆到本地：

$ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1
$ cd weapp-douban

1. 開啟微信Web開放者工具（注意：必須是0.9.092300版本）

• 必須是0.9.092300版本，之前的版本不能保證正常執行
• 不需要所謂的破解，網上所謂的破解只是針對之前的0.9.092100版本，新的官方版本不需要破解，不需要破解，不需要破解！
• 下載連結（官方版本，放心下載）：
  https://pan.baidu.com/s/1qYld6Vi
  • wechat_web_devtools_0.9.092300_x64.exe（Windows 64位）
  • wechat_web_devtools_0.9.092300_ia32.exe（Windows 32位）
  • wechat_web_devtools_0.9.092300.dmg（macOS）

1. 選擇新增專案，填寫或選擇相應資訊

• AppID：點選右下角無AppID（我也沒有資格，據說這次200個名額是小龍欽點的）
• 專案名稱：隨便填寫，因為不涉及到部署，所以無所謂
• 專案目錄：選擇剛剛克隆的資料夾
• 點選新增專案

1. 新年快樂，恭喜發財

1. 你可以選擇在微信Web開放者工具
   中編碼（也可選擇你喜歡的編輯器）

1. 通過左下角重啟按鈕，重新整理編碼過後的預覽

2. Bash使用者可以通過在專案目錄下執行以下命令快速建立新元件所需檔案：

$ ./generate page <new-page-name>
# or
$ ./generate component <new-component-name>

1. 剩下的可以自由發揮了

微信小程式基本教程（持續更新）

建立一個專案資料夾，建立基本所需檔案

app.js

專案主入口檔案（用於建立應用程式物件）

// App函式是一個全域性函式，用於建立應用程式物件
App({
  // ========== 全域性資料物件（整個應用程式共享） ==========
  globalData: { ... },

  // ========== 應用程式全域性方法 ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },

  // ========== 生命週期方法 ==========
  // 應用程式啟動時觸發一次
  onLaunch () { ... },

  // 當應用程式進入前臺顯示狀態時觸發
  onShow () { ... },

  // 當應用程式進入後臺狀態時觸發
  onHide () { ... }
})
 

app.json

專案配置宣告檔案（指定專案的一些資訊，比如導航欄樣式顏色等等）

{
  // 當前程式是由哪些頁面組成的（第一項預設為初始頁面）
  // 所有使用到的元件或頁面都必須在此體現
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
  "pages": [ ... ],
  // 應用程式視窗設定
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
  "window": { ... },
  // 應用導航欄設定
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
  "tabBar": { ... },
  // 網路超時設定
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
  "networkTimeout": {},
  // 是否在控制檯輸出除錯資訊
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
  "debug": true
}

app.wxss

[!可選!]專案全域性的樣式檔案，內容遵循CSS標準語法

建立頁面元件

每個頁面元件也分為四個檔案組成：

• page-name.js

  • 頁面邏輯檔案，用於處理頁面生命週期控制和資料處理
  • 未完待續...

• page-name.json

• 設定當前頁面工作時的一些配置
• 此處可以覆蓋app.json中的window設定
• 也就是說只可以設定window中設定的熟悉

• 未完待續...

• page-name.wxml

  • wxml指的是Wei Xin Markup Language
  • 用於定義頁面中元素結構的
  • 語法遵循XML語法，注意是XML語法，不是HTML語法，不是HTML語法，不是HTML語法
  • 未完待續...

• page-name.wxss

  • wxml指的是Wei Xin Style Sheet
  • 用於定義頁面樣式的
  • 語法遵循CSS語法，擴充套件了CSS基本用法和長度單位（主要就是rpx響應式畫素）
  • 未完待續...

未完待續...

有問題？

歡迎 PR or Issue or Wechat

LICENSE

MIT