神技！微信小程序（應用號）搶先入門體驗（附最新案例-豆瓣電影）持續更新

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

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

官方文檔：https://mp.weixin.qq.com/debu...

Demo 預覽

演示視頻（流量預警 2.64MB）

GitHub Repo 地址

倉庫地址：https://github.com/zce/weapp-...

使用步驟

1. 將倉庫克隆到本地：

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

2. 打開微信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）

3. 選擇添加項目，填寫或選擇相應信息

   • AppID：點擊右下角無AppID（我也沒有資格，聽說此次200個名額是小龍欽點的）

   • 項目名稱：隨便填寫，由於不涉及到部署，因此無所謂

   • 項目目錄：選擇剛剛克隆的文件夾

   • 點擊添加項目

1. 新年快樂，恭喜發財

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

1. 經過左下角重啓按鈕，刷新編碼事後的預覽

2. Bash用戶能夠經過在項目目錄下執行如下命令快速建立新組件所需文件：

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

3. 剩下的能夠自由發揮了

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

建立一個項目文件夾，建立基本所需文件

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