這篇文章主要為大家展示了“微信小程序如何應(yīng)用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序如何應(yīng)用”這篇文章吧。
Demo 預(yù)覽
演示視頻（流量預(yù)警 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版本，之前的版本不能保證正常運行
不需要所謂的破解，網(wǎng)上所謂的破解只是針對之前的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.選擇添加項目，填寫或選擇相應(yīng)信息
AppID：點擊右下角無AppID（我也沒有資格，據(jù)說這次200個名額是小龍欽點的）
項目名稱：隨便填寫，因為不涉及到部署，所以無所謂
項目目錄：選擇剛剛克隆的文件夾
點擊添加項目
新年快樂，恭喜發(fā)財
你可以選擇在微信Web開放者工具中編碼（也可選擇你喜歡的編輯器）
1.通過左下角重啟按鈕，刷新編碼過后的預(yù)覽
2.Bash用戶可以通過在項目目錄下執(zhí)行以下命令快速創(chuàng)建新組件所需文件：
bash $ ./generate page
剩下的可以自由發(fā)揮了
微信小程序基本教程（持續(xù)更新）
創(chuàng)建一個項目文件夾，創(chuàng)建基本所需文件
app.js
重慶分公司
重慶分公司
項目主入口文件（用于創(chuàng)建應(yīng)用程序?qū)ο螅?
// App函數(shù)是一個全局函數(shù)，用于創(chuàng)建應(yīng)用程序?qū)ο?App({
// ========== 全局數(shù)據(jù)對象（整個應(yīng)用程序共享） ==========
globalData: { ... },
// ========== 應(yīng)用程序全局方法 ==========
method1 (p1, p2) { ... },
method2 (p1, p2) { ... },
// ========== 生命周期方法 ==========
// 應(yīng)用程序啟動時觸發(fā)一次
onLaunch () { ... },
// 當應(yīng)用程序進入前臺顯示狀態(tài)時觸發(fā)
onShow () { ... },
// 當應(yīng)用程序進入后臺狀態(tài)時觸發(fā)
onHide () { ... }
})app.json
項目配置聲明文件（指定項目的一些信息，比如導(dǎo)航欄樣式顏色等等）
{
// 當前程序是由哪些頁面組成的（第一項默認為初始頁面）
// 所有使用到的組件或頁面都必須在此體現(xiàn)
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
"pages": [ ... ],
// 應(yīng)用程序窗口設(shè)置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
"window": { ... },
// 應(yīng)用導(dǎo)航欄設(shè)置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
"tabBar": { ... },
// 網(wǎng)絡(luò)超時設(shè)置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
"networkTimeout": {},
// 是否在控制臺輸出調(diào)試信息
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
"debug": true
}app.wxss
[!可選!]項目全局的樣式文件，內(nèi)容遵循CSS標準語法
創(chuàng)建頁面組件
每個頁面組件也分為四個文件組成：
page-name.js
頁面邏輯文件，用于處理頁面生命周期控制和數(shù)據(jù)處理
未完待續(xù)...
page-name.json
設(shè)置當前頁面工作時的一些配置
此處可以覆蓋app.json中的window設(shè)置
也就是說只可以設(shè)置window中設(shè)置的熟悉
未完待續(xù)...
page-name.wxml
wxml指的是Wei Xin Markup Language
用于定義頁面中元素結(jié)構(gòu)的
語法遵循XML語法，注意是XML語法，不是HTML語法，不是HTML語法，不是HTML語法
未完待續(xù)...
page-name.wxss
wxml指的是Wei Xin Style Sheet
用于定義頁面樣式的
語法遵循CSS語法，擴展了CSS基本用法和長度單位（主要就是rpx響應(yīng)式像素）
以上是“微信小程序如何應(yīng)用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
