微信小程序——豆瓣電影——(2):小程序運行部署
阿新 • • 發佈:2017-09-19
images 放心 覆蓋 當前 .cn markup 必須 global 定義
Demo 預覽
演示視頻(流量預警 2.64MB)
GitHub Repo 地址
倉庫地址:https://github.com/zce/weapp-demo
使用步驟
- 將倉庫克隆到本地:
bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban --depth 1 $ cd weapp-douban
- 打開
微信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)
- 選擇
添加項目
,填寫或選擇相應信息
- AppID:點擊右下角
無AppID
(我也沒有資格,據說這次200個名額是小龍欽點的) - 項目名稱:隨便填寫,因為不涉及到部署,所以無所謂
- 項目目錄:選擇剛剛克隆的文件夾
- 點擊
添加項目
- 新年快樂,恭喜發財
- 你可以選擇在
微信Web開放者工具
中編碼(也可選擇你喜歡的編輯器)
-
通過左下角重啟按鈕,刷新編碼過後的預覽
-
Bash
用戶可以通過在項目目錄下執行以下命令快速創建新組件所需文件:
bash $ ./generate page <new-page-name> # or $ ./generate component <new-component-name>
- 剩下的可以自由發揮了
微信小程序基本教程(持續更新)
創建一個項目文件夾,創建基本所需文件
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響應式像素)
微信小程序——豆瓣電影——(2):小程序運行部署