微信小程序 Demo（豆瓣電影） · Bozo技術筆記

> 由于時間的關系，沒有辦法寫一個完整的說明，后續配合一些視頻資料，請持續關注 > 官方文檔：[https://mp.weixin.qq.com/debug/wxadoc/dev/](https://mp.weixin.qq.com/debug/wxadoc/dev/) ## Demo 預覽 ![](http://images2015.cnblogs.com/blog/590686/201609/590686-20160926143715235-1177166975.gif) [演示視頻（流量預警 2.64MB）](https://github.com/zce/weapp-demo/blob/master/preview.mp4) ## [GitHub Repo 地址](https://github.com/zce/weapp-demo) > 倉庫地址：[https://github.com/zce/weapp-demo](https://github.com/zce/weapp-demo) ## 使用步驟 1. 將倉庫克隆到本地： `bash $ 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](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個名額是小龍欽點的） * 項目名稱：隨便填寫，因為不涉及到部署，所以無所謂 * 項目目錄：選擇剛剛克隆的文件夾 * 點擊`添加項目` ![](http://images2015.cnblogs.com/blog/590686/201609/590686-20160926143737531-427197777.png) 1. 新年快樂，恭喜發財 ![](http://images2015.cnblogs.com/blog/590686/201609/590686-20160926143752047-195767257.png) 1. 你可以選擇在`微信Web開放者工具`中編碼（也可選擇你喜歡的編輯器） ![](http://images2015.cnblogs.com/blog/590686/201609/590686-20160926143804360-1147501099.png) 1. 通過左下角重啟按鈕，刷新編碼過后的預覽 2. `Bash`用戶可以通過在項目目錄下執行以下命令快速創建新組件所需文件： `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響應式像素） * 未完待續...