微信小程序（應(yīng)用號(hào)）簡(jiǎn)單實(shí)例應(yīng)用及實(shí)例詳解

更新時(shí)間：2016年09月26日 15:30:39 作者：Let''''s Rock

這篇文章主要介紹了微信小程序（應(yīng)用號(hào)）簡(jiǎn)單實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下

Demo 預(yù)覽

演示視頻（流量預(yù)警 2.64MB）

GitHub Repo 地址

倉(cāng)庫(kù)地址：https://github.com/zce/weapp-demo

使用步驟

將倉(cāng)庫(kù)克隆到本地：

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

打開(kāi)微信Web開(kāi)放者工具（注意：必須是0.9.092300版本）

必須是0.9.092300版本，之前的版本不能保證正常運(yùn)行

不需要所謂的破解，網(wǎng)上所謂的破解只是針對(duì)之前的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.選擇添加項(xiàng)目，填寫(xiě)或選擇相應(yīng)信息

AppID：點(diǎn)擊右下角無(wú)AppID（我也沒(méi)有資格，據(jù)說(shuō)這次200個(gè)名額是小龍欽點(diǎn)的）
項(xiàng)目名稱：隨便填寫(xiě)，因?yàn)椴簧婕暗讲渴?，所以無(wú)所謂
項(xiàng)目目錄：選擇剛剛克隆的文件夾
點(diǎn)擊添加項(xiàng)目

新年快樂(lè)，恭喜發(fā)財(cái)

你可以選擇在微信Web開(kāi)放者工具中編碼（也可選擇你喜歡的編輯器）

1.通過(guò)左下角重啟按鈕，刷新編碼過(guò)后的預(yù)覽

2.Bash用戶可以通過(guò)在項(xiàng)目目錄下執(zhí)行以下命令快速創(chuàng)建新組件所需文件：

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

剩下的可以自由發(fā)揮了

微信小程序基本教程（持續(xù)更新）

創(chuàng)建一個(gè)項(xiàng)目文件夾，創(chuàng)建基本所需文件

app.js

項(xiàng)目主入口文件（用于創(chuàng)建應(yīng)用程序?qū)ο螅?

// App函數(shù)是一個(gè)全局函數(shù)，用于創(chuàng)建應(yīng)用程序?qū)ο?
App({
 // ========== 全局?jǐn)?shù)據(jù)對(duì)象（整個(gè)應(yīng)用程序共享） ==========
 globalData: { ... },

 // ========== 應(yīng)用程序全局方法 ==========
 method1 (p1, p2) { ... },
 method2 (p1, p2) { ... },

 // ========== 生命周期方法 ==========
 // 應(yīng)用程序啟動(dòng)時(shí)觸發(fā)一次
 onLaunch () { ... },

 // 當(dāng)應(yīng)用程序進(jìn)入前臺(tái)顯示狀態(tài)時(shí)觸發(fā)
 onShow () { ... },

 // 當(dāng)應(yīng)用程序進(jìn)入后臺(tái)狀態(tài)時(shí)觸發(fā)
 onHide () { ... }
})

app.json

項(xiàng)目配置聲明文件（指定項(xiàng)目的一些信息，比如導(dǎo)航欄樣式顏色等等）

{
 // 當(dāng)前程序是由哪些頁(yè)面組成的（第一項(xiàng)默認(rèn)為初始頁(yè)面）
 // 所有使用到的組件或頁(yè)面都必須在此體現(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í)設(shè)置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
 "networkTimeout": {},
 // 是否在控制臺(tái)輸出調(diào)試信息
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
 "debug": true
}

app.wxss

[!可選!]項(xiàng)目全局的樣式文件，內(nèi)容遵循CSS標(biāo)準(zhǔn)語(yǔ)法

創(chuàng)建頁(yè)面組件

每個(gè)頁(yè)面組件也分為四個(gè)文件組成：