微信(xin)應用號(hao)（小程序，「應用號(hao)」的新稱呼(hu)）終于來了！

目前還處于(yu)內測(ce)階段，微信只邀(yao)請了部分企業參與封(feng)測(ce)。想必大家都關心應(ying)用號的最終形態到(dao)底是什(shen)么樣子？怎樣將(jiang)一個(ge)「服務號」改造成(cheng)為「小程序(xu)」？

我們(men)暫時以一款簡單的第三方工具的實例，來演示一下開發(fa)過程吧(ba)。（公(gong)司的項目保密還不能分享代碼(ma)和截(jie)圖。博卡(ka)君是邊加班邊偷(tou)偷(tou)給大家寫(xie)教程。感謝「名(ming)片盒」團隊提供(gong)他們(men)的服務號來動這個手術，所以博卡(ka)君的教程就(jiu)用「名(ming)片盒」的公(gong)眾號滾動更(geng)新發(fa)布吧(ba)）

OK，為(wei)了讓大(da)家盡快看(kan)到這(zhe)份(fen)教(jiao)程，博卡君(jun)注定要熬夜了！今晚開始更新，希望明天(tian)一(yi)早就能發布第一(yi)篇教(jiao)程！記錄開始！看(kan)看(kan)幾天(tian)能完成變身吧！

序言

開始開發應用(yong)號之前，先(xian)看(kan)看(kan)官方(fang)公(gong)布(bu)的「小程序」教程吧！（以(yi)下(xia)內容來自微(wei)信官方(fang)公(gong)布(bu)的「小程序」開發指南）

本文檔(dang)將帶你一步步創建完成一個微信小程序(xu)，并(bing)可(ke)以在(zai)手機上體(ti)驗該小程序(xu)的(de)(de)實際效果。這個小程序(xu)的(de)(de)首頁(ye)將會顯示歡迎(ying)語以及(ji)當(dang)前(qian)(qian)用戶的(de)(de)微信頭像(xiang)，點擊頭像(xiang)，可(ke)以在(zai)新(xin)開的(de)(de)頁(ye)面中查看當(dang)前(qian)(qian)小程序(xu)的(de)(de)啟動日志(zhi)。

1. 獲取微信小(xiao)程序的(de) AppID

首先，我們需要擁(yong)有一個帳號(hao)(hao)，如果你能看到該文檔(dang)，我們應當已經邀請并為你創(chuang)建好(hao)一個帳號(hao)(hao)。注意不可(ke)直接使用(yong)服(fu)務號(hao)(hao)或訂閱號(hao)(hao)的(de)(de) AppID。 利用(yong)提供的(de)(de)帳號(hao)(hao)，登錄 <span style="font-family:'Microsoft YaHei';font-size:16px;">//mp.weixin.qq.com</span> ，就(jiu)可以在網站的(de)「設(she)置(zhi)」-「開發者設(she)置(zhi)」中，查看到微信(xin)小程(cheng)序的(de) AppID 了。

注(zhu)意：如果我(wo)(wo)們(men)不(bu)是用注(zhu)冊時綁(bang)定的(de)管(guan)理員(yuan)微信號，在手機上(shang)體(ti)驗該(gai)小程(cheng)序。那么我(wo)(wo)們(men)還需要操作「綁(bang)定開發者(zhe)」。即在「用戶身份(fen) - 開發者(zhe)」模塊，綁(bang)定上(shang)需要體(ti)驗該(gai)小程(cheng)序的(de)微信號。本教程(cheng)默認注(zhu)冊帳號、體(ti)驗都是使用管(guan)理員(yuan)微信號。

2. 創建項目

我們需要通過開發者工(gong)具，來完成小程序創(chuang)建和代碼編(bian)輯(ji)。

開發者工具(ju)安裝完(wan)成(cheng)后，打(da)開并使用微信掃碼登錄。選(xuan)擇(ze)創(chuang)建(jian)「項(xiang)目」，填入上文獲取到(dao)的(de) AppID，設置(zhi)一(yi)個(ge)本地項(xiang)目的(de)名稱（非小程序名稱），比如「我的(de)第(di)一(yi)個(ge)項(xiang)目」，并選(xuan)擇(ze)一(yi)個(ge)本地的(de)文件夾作為代碼存儲的(de)目錄，點擊「新(xin)建(jian)項(xiang)目」就可(ke)以了。

為方便初學(xue)者了解微信(xin)小程序的基(ji)本(ben)代碼結構，在創建過(guo)程中，如果選擇(ze)的本(ben)地(di)文件夾是(shi)個空(kong)文件夾，開發(fa)者工具(ju)(ju)會提示，是(shi)否需要創建一(yi)個 quick start 項目(mu)。選擇(ze)「是(shi)」，開發(fa)者工具(ju)(ju)會幫(bang)助我們在開發(fa)目(mu)錄里生成一(yi)個簡單(dan)的 demo。

項(xiang)目創(chuang)建成功后，我們就可(ke)以(yi)(yi)點(dian)擊該項(xiang)目，進(jin)入并看(kan)到(dao)完(wan)整的(de)開發(fa)者(zhe)工具界面，點(dian)擊左側導航，在(zai)「編輯(ji)(ji)」里(li)可(ke)以(yi)(yi)查看(kan)和編輯(ji)(ji)我們的(de)代碼(ma)，在(zai)「調試(shi)」里(li)可(ke)以(yi)(yi)測試(shi)代碼(ma)并模擬小程序(xu)在(zai)微信客戶端效果，在(zai)「項(xiang)目」里(li)可(ke)以(yi)(yi)發(fa)送到(dao)手機里(li)預(yu)覽實際效果。

3. 編寫代碼

點擊開發(fa)者工具左側導航的(de)「編輯(ji)」，我們可以看(kan)到這個(ge)項目，已(yi)經初始化并(bing)包含了一些簡單的(de)代(dai)碼文(wen)件(jian)。最關鍵也是必不可少(shao)的(de)，是 app.js、app.json、app.wxss 這三個(ge)。其中，.js 后綴的(de)是腳本文(wen)件(jian)，.json 后綴的(de)文(wen)件(jian)是配置文(wen)件(jian)，.wxss 后綴的(de)是樣式表文(wen)件(jian)。微(wei)信小程序會(hui)讀取這些文(wen)件(jian)，并(bing)生成小程序實例。

下面我(wo)們簡單了解這三個文件的功能(neng)，方(fang)便修(xiu)改以(yi)及從頭開發自己的微信小程序。

app.js 是小程(cheng)序的腳本代碼。我(wo)們(men)可以在這(zhe)個文件中監聽并處理小程(cheng)序的生命周(zhou)期函數、聲(sheng)明(ming)全局(ju)變量(liang)。調用 MINA 提供的豐富的 API，如(ru)本例的同(tong)(tong)步(bu)存儲及(ji)同(tong)(tong)步(bu)讀(du)取本地(di)數據。

app.json 是(shi)對整個小程序的(de)全局(ju)配(pei)置(zhi)(zhi)。我(wo)們可(ke)以在這個文件(jian)中(zhong)配(pei)置(zhi)(zhi)小程序是(shi)由哪些頁面組成，配(pei)置(zhi)(zhi)小程序的(de)窗(chuang)口  背景色(se)，配(pei)置(zhi)(zhi)導航條(tiao)樣式(shi)，配(pei)置(zhi)(zhi)默認(ren)標題。注意該文件(jian)不可(ke)添加任(ren)何注釋。

app.wxss 是整個小程序的公共樣式(shi)表。我們可以在頁面(mian)組件的 class 屬性(xing)上直(zhi)接使用 app.wxss 中聲明的樣式(shi)規(gui)則。

3. 創建頁(ye)面

在(zai)這個教程里(li)，我們有兩個頁(ye)面(mian)(mian)，index 頁(ye)面(mian)(mian)和 logs 頁(ye)面(mian)(mian)，即歡(huan)迎(ying)頁(ye)和小程序(xu)啟動日(ri)志的(de)展(zhan)示頁(ye)，他們都在(zai) pages 目錄(lu)下。微信小程序(xu)中的(de)每一(yi)個頁(ye)面(mian)(mian)的(de)【路徑(jing) + 頁(ye)面(mian)(mian)名】都需要(yao)寫在(zai) app.json 的(de) pages 中，且 pages 中的(de)第一(yi)個頁(ye)面(mian)(mian)是小程序(xu)的(de)首頁(ye)。

每一(yi)個小程(cheng)序頁面是(shi)由同路徑下同名的(de)四個不同后綴(zhui)(zhui)文(wen)(wen)件(jian)(jian)的(de)組成，如(ru)：index.js、index.wxml、index.wxss、index.json。.js 后綴(zhui)(zhui)的(de)文(wen)(wen)件(jian)(jian)是(shi)腳本(ben)文(wen)(wen)件(jian)(jian)，.json 后綴(zhui)(zhui)的(de)文(wen)(wen)件(jian)(jian)是(shi)配(pei)置(zhi)文(wen)(wen)件(jian)(jian)，.wxss 后綴(zhui)(zhui)的(de)是(shi)樣式(shi)表文(wen)(wen)件(jian)(jian)，.wxml 后綴(zhui)(zhui)的(de)文(wen)(wen)件(jian)(jian)是(shi)頁面結構文(wen)(wen)件(jian)(jian)。

index.wxml 是頁面的結構(gou)文件：

本例中使用了 <view/&gt;、<image/>、<text/> 來搭建(jian)頁面結(jie)構，綁定數(shu)據和交互處理函數(shu)。

index.js 是頁面(mian)(mian)的腳本文件(jian)，在這(zhe)個文件(jian)中我(wo)們(men)可以監(jian)聽并(bing)(bing)處理頁面(mian)(mian)的生命周期函數、獲(huo)取小(xiao)程(cheng)序實例，聲(sheng)明并(bing)(bing)處理數據，響應(ying)頁面(mian)(mian)交互事件(jian)等。

index.wxss 是(shi)頁面(mian)的樣式(shi)表：

頁(ye)面(mian)(mian)的樣(yang)式(shi)(shi)(shi)(shi)表(biao)是非(fei)必要的。當有頁(ye)面(mian)(mian)樣(yang)式(shi)(shi)(shi)(shi)表(biao)時(shi)，頁(ye)面(mian)(mian)的樣(yang)式(shi)(shi)(shi)(shi)表(biao)中(zhong)的樣(yang)式(shi)(shi)(shi)(shi)規則會層疊覆蓋(gai) app.wxss 中(zhong)的樣(yang)式(shi)(shi)(shi)(shi)規則。如果不指定頁(ye)面(mian)(mian)的樣(yang)式(shi)(shi)(shi)(shi)表(biao)，也(ye)可(ke)以在頁(ye)面(mian)(mian)的結(jie)構(gou)文件中(zhong)直接使用 app.wxss 中(zhong)指定的樣(yang)式(shi)(shi)(shi)(shi)規則。

index.json 是(shi)頁面的配置文件(jian)：

頁(ye)面(mian)的配(pei)置(zhi)文件是(shi)非(fei)必要的。當有(you)頁(ye)面(mian)的配(pei)置(zhi)文件時，配(pei)置(zhi)項在該頁(ye)面(mian)會覆蓋 app.json 的 window 中(zhong)相同(tong)的配(pei)置(zhi)項。如(ru)果沒有(you)指定的頁(ye)面(mian)配(pei)置(zhi)文件，則在該頁(ye)面(mian)直接使用(yong) app.json 中(zhong)的默(mo)認配(pei)置(zhi)。

logs 的(de)頁面結(jie)構

logs 頁(ye)面使用(yong) <block/> 控制標簽來組織代碼，在(zai) <block/> 上使用(yong) wx:for-items 綁定 logs 數(shu)據，并將 logs 數(shu)據循環展開(kai)節點

運行結果如下：

4. 手機預覽

開發者工具左側菜(cai)單(dan)欄選擇「項(xiang)目」，點擊「預覽」，掃碼后即可在微(wei)信客戶端中體驗。

目(mu)前(qian)，預(yu)覽(lan)和上傳功能尚無法(fa)實現，需要等待微信官方(fang)的下一步更(geng)新。

如你(ni)所(suo)見，微信官方(fang)給出的開(kai)(kai)發指南還(huan)非常簡(jian)單，很(hen)多細(xi)節、代碼(ma)和功能都(dou)沒有(you)明確(que)的展(zhan)示，所(suo)以接下來就(jiu)到博卡(ka)君(jun)展(zhan)示實力的時候啦！開(kai)(kai)發教(jiao)程正(zheng)式開(kai)(kai)始(shi)！

第一章：準備工作(zuo)

做好準備工(gong)作很(hen)重(zhong)要。開發(fa)一個微(wei)信(xin)應用(yong)號(hao)，你需要提前(qian)到微(wei)信(xin)的(de)官(guan)方網站（weixin.qq.com）下載開發(fa)者工(gong)具。

1. 下載(zai)最新微信開發者(zhe)工具(ju)，打(da)開后你(ni)會(hui)看到該界面：

2. 點擊「新建 web+」項目，隨后出現如下畫(hua)面：

3. 該(gai)頁面(mian)內的各項內容需要注意——

• AppID：依照官方解釋來填。
• Appname: 項目(mu)最外層文件(jian)夾名(ming)稱，如你將(jiang)其命名(ming)為(wei)「ABC」，則之(zhi)后(hou)的全部項目(mu)內容均將(jiang)保存(cun)在「/ABC/…」目(mu)錄(lu)下。
• 本地(di)開發目錄(lu)：項目存放在本地(di)的目錄(lu)。

注：再次強(qiang)調，如果(guo)(guo)你和(he)團隊成(cheng)員共同開(kai)發(fa)(fa)該項目，則建(jian)議(yi)你們(men)使用(yong)同樣的目錄(lu)名(ming)稱及本(ben)地目錄(lu)，以確保(bao)協(xie)同開(kai)發(fa)(fa)的統一(yi)性。如果(guo)(guo)你之前已有(you)項目，則導入過(guo)程與以上(shang)內容近似，不(bu)再贅(zhui)述。

4. 準備(bei)工作全部完(wan)成(cheng)后(hou)，點擊「新建(jian)項目」按鈕，彈出框點「確定」。

5. 如上圖所示，此刻(ke)，微信(xin)開發者工具(ju)已(yi)經為你自動構建了(le)一個(ge)初始的 demo 項(xiang)(xiang)目(mu)，該項(xiang)(xiang)目(mu)內包含了(le)一個(ge)微信(xin)應用(yong)項(xiang)(xiang)目(mu)所需具(ju)備的基(ji)本內容和框架結構。點(dian)擊(ji)項(xiang)(xiang)目(mu)名(ming)稱(cheng)（圖中(zhong)即「cards」）進入該項(xiang)(xiang)目(mu)，就能看到整(zheng)個(ge)項(xiang)(xiang)目(mu)的基(ji)本架構了(le)：

第二章(zhang)：項目構(gou)架

微信(xin)目前用(yong)戶群(qun)體非常龐大(da)，微信(xin)推出公眾號(hao)(hao)以后(hou)，火爆程度大(da)家都看得(de)到(dao)，也同樣推動著 h5 的(de)(de)高(gao)速發(fa)展，隨著公眾號(hao)(hao)業務的(de)(de)需求越(yue)來(lai)越(yue)復(fu)雜，應用(yong)號(hao)(hao)現(xian)在(zai)的(de)(de)到(dao)來(lai)也是恰到(dao)好處。我們(men)團隊(dui)具體看了一(yi)兩次(ci)文(wen)檔后(hou)發(fa)現(xian)，它提(ti)供給開(kai)發(fa)者(zhe)的(de)(de)方(fang)式(shi)也在(zai)發(fa)生全面的(de)(de)改變(bian)，從操作 DOM 轉為(wei)操作數(shu)據(ju)，基于微信(xin)提(ti)供的(de)(de)一(yi)個過橋工(gong)具實現(xian)很(hen)(hen)多 h5 在(zai)公眾號(hao)(hao)很(hen)(hen)難(nan)實現(xian)的(de)(de)功(gong)能(neng)，有點類似(si)于 hybrid 開(kai)發(fa)，不同于 hybrid 開(kai)發(fa)的(de)(de)方(fang)式(shi)是：微信(xin)開(kai)放的(de)(de)接(jie)口更為(wei)嚴謹，結(jie)構必須(xu)采用(yong)他提(ti)供給我們(men)的(de)(de)組件，外部的(de)(de)框架和插件都不能(neng)在(zai)這里使用(yong)上，讓開(kai)發(fa)者(zhe)完全脫離操作 DOM，開(kai)發(fa)思想轉變(bian)很(hen)(hen)大(da)。

工(gong)欲善其事，必先(xian)利其器。理解(jie)它的(de)核心功能非常重(zhong)要，先(xian)了解(jie)它的(de)整個(ge)運作(zuo)流程。

生命周期：

在(zai)index.js里(li)面(mian)：

開發(fa)者工具上(shang) Console 可以看到：

在首頁 console 可以看(kan)出順序是(shi) App Launch-->App Show-->onload-->onShow-->onReady。

首先是整個(ge) app 的啟(qi)(qi)動與顯(xian)示，app 的啟(qi)(qi)動在 app.js 里面可以配置，其次再進入(ru)到各個(ge)頁(ye)面的加(jia)載顯(xian)示等等。

可以(yi)想象(xiang)到(dao)這里可以(yi)處理(li)很多東西了，如加載框之類的都(dou)可以(yi)實現等(deng)(deng)等(deng)(deng)。

路由：

路由(you)在項(xiang)目(mu)開發中一直(zhi)是個(ge)核心點，在這里其實微信(xin)對路由(you)的(de)介紹很(hen)少，可見微信(xin)在路由(you)方面經過很(hen)好的(de)封裝，也提供三個(ge)跳轉方法。

wx.navigateTo(OBJECT)：保留當(dang)前頁面(mian)(mian)，跳轉到(dao)應用內的某個(ge)頁面(mian)(mian)，使用wx.navigateBack可以返(fan)回(hui)到(dao)原(yuan)頁面(mian)(mian)。

wx.redirectTo(OBJECT)：關閉(bi)當前頁面，跳轉到(dao)應用內的某個(ge)頁面。

wx.navigateBack()：關(guan)閉當前(qian)頁面(mian)，回退前(qian)一頁面(mian)。

這三個(ge)基本上(shang)使用足夠，在路由(you)方面(mian)微信封裝(zhuang)的很好，開發(fa)者(zhe)根(gen)本不用去(qu)配置路由(you)，往往很多框架在路由(you)方面(mian)配置很繁瑣。

組(zu)件：

此次微(wei)信在組件提(ti)供方面(mian)也是非常(chang)全面(mian)，基本(ben)上滿足項目需求(qiu)，故而開(kai)發(fa)(fa)速度非常(chang)快，開(kai)發(fa)(fa)前可以認真瀏覽(lan)幾次，開(kai)發(fa)(fa)效率會很好(hao)。

其它：

任何(he)外部框架(jia)以(yi)及(ji)插(cha)件基(ji)本上無法(fa)使用，就(jiu)算原(yuan)生的(de)(de) js 插(cha)件也很難使用，因為(wei)以(yi)前我(wo)們的(de)(de) js 插(cha)件也基(ji)本上全部是一操(cao)作(zuo) dom 的(de)(de)形式存在，而微信應用號此次的(de)(de)架(jia)構是不允許操(cao)作(zuo)任何(he) dom，就(jiu)連以(yi)前我(wo)們習慣使用的(de)(de)動(dong)態設置的(de)(de)rem.js也是不支持的(de)(de)。

此次微信還提(ti)供了 WebSocket，就(jiu)可以(yi)直(zhi)接利用它做(zuo)聊天，可以(yi)開發(fa)的空(kong)間非(fei)常大。

跟(gen)公(gong)眾號對比(bi)我們發現，開發應用(yong)號組件化，結(jie)構化，多(duo)樣化。新大陸總是充滿著驚喜，更多(duo)的彩蛋等著大家來(lai)發現。

接(jie)下來開始搞(gao)一些(xie)簡(jian)單的代碼了！

1. 找到項(xiang)目文件夾，導入你的(de)編輯器(qi)里(li)面。在這里(li)，我(wo)使用了 Sublime Text 編輯器(qi)。你可以根(gen)據自己的(de)開發(fa)習(xi)慣(guan)選擇自己喜歡的(de)編輯器(qi)。

2. 接下來，你(ni)需要(yao)根據(ju)自己的項(xiang)目內容調整項(xiang)目結構。在范(fan)例項(xiang)目中，「card_course」目錄下面主要(yao)包含了「tabBar」頁面以及該(gai)應用的一些配置文件。

3. 示例項目的「tabBar」是五個菜單按鈕：

4. 找(zhao)到(dao)「app.json」文件，用來配置這(zhe)個五個菜單。在代碼行(xing)中找(zhao)到(dao)「”tabBar”」：

你可(ke)以(yi)根據實際(ji)項目需求更改，其(qi)中(zhong)：

• 「Color」是(shi)底部(bu)字(zi)體顏(yan)色，「selectedColor」是(shi)切換(huan)(huan)到該(gai)頁面高亮顏(yan)色，「borderStyle」是(shi)切換(huan)(huan)菜單(dan)上(shang)面的(de)一條線的(de)顏(yan)色，「backgroundColor」是(shi)底部(bu)菜單(dan)欄背景顏(yan)色。文字(zi)描述較為抽象，建議你一一調試并查看其效(xiao)果(guo)，加(jia)深印象。
• 「“list”」下的代碼順序必須依次放置，不能隨便更改。
• 「”pagePath”」之(zhi)后(hou)的文件名內，「.wxml」后(hou)綴(zhui)被隱藏起來了，這(zhe)是微信開發代(dai)碼中人(ren)性化的一點——幫你節約寫代(dai)碼的時間，無須頻繁(fan)聲明文件后(hou)綴(zhui)。
• 「”iconPath”」為未獲得顯(xian)示頁面的圖(tu)標路徑(jing)，這兩個路徑(jing)可以直接是網絡圖(tu)標。
• 「”selectedIconPath”」為當前(qian)顯示頁面高亮圖標路徑，可以去(qu)掉，去(qu)掉之后會默認顯示為「”iconPath”」的圖標。
• 「”Text”」為頁(ye)面標題，也可以去掉(diao)，去掉(diao)之(zhi)后純顯示(shi)圖標，如只去掉(diao)其中一個，該位置會被(bei)占(zhan)用(yong)。

注意(yi)：微信(xin)的底部菜單(dan)(dan)最多支持五欄(lan)（五個(ge) icons），所(suo)以在你(ni)設計(ji)微信(xin)應(ying)用的 UI 和(he)基本架(jia)構時就要預先考慮好菜單(dan)(dan)欄(lan)的排布(bu)。

5. 根(gen)據以上代碼規則(ze)，我做好了示例項目的基本架構，供你參考(kao)：

6. 「Json」文件(jian)配置好(hao)后(hou)，「card_course」的基本結構入上圖所(suo)示，不(bu)需要的子集都可(ke)以暫時刪(shan)除(chu)，缺少的子集則(ze)需要你主動新建。刪(shan)除(chu)子集時記得順帶檢查一(yi)下「app.json」里的相關內(nei)容是(shi)否已經一(yi)并刪(shan)除(chu)。

注意：我個人建議你新(xin)(xin)建一個「wxml」文(wen)(wen)件(jian)(jian)(jian)的同(tong)時(shi)，把對應的「js」和「wxss」文(wen)(wen)件(jian)(jian)(jian)一起新(xin)(xin)建好(hao)，因為微信應用號的配(pei)(pei)置(zhi)特點就(jiu)是解析(xi)到(dao)一個「wxml」文(wen)(wen)件(jian)(jian)(jian)時(shi)，會同(tong)時(shi)在(zai)同(tong)級目錄(lu)下找到(dao)同(tong)文(wen)(wen)件(jian)(jian)(jian)名的「js」和「wxss」文(wen)(wen)件(jian)(jian)(jian)，所以「js」文(wen)(wen)件(jian)(jian)(jian)需及(ji)時(shi)在(zai)「app.json」里預先配(pei)(pei)置(zhi)好(hao)。

編寫「wxml」時(shi)，根(gen)據(ju)微信(xin)應用(yong)號(hao)提供(gong)的接(jie)(jie)口(kou)編碼即可，大部分就是以前的「div」，而我們(men)現在就用(yong)「view」即可。需要用(yong)其它(ta)子集(ji)時(shi)，可以根(gen)據(ju)微信(xin)提供(gong)的接(jie)(jie)口(kou)酌(zhuo)情選擇。

使(shi)用(yong)「class」名來設置樣式，「id」名在這(zhe)里基本(ben)沒有什么用(yong)處。主(zhu)要(yao)操作數(shu)據，不操作「dom」。

7. 以上是(shi)示例項目首(shou)頁(ye)的「wxml」編碼。從圖中就可(ke)以看(kan)出，實現一個(ge)頁(ye)面代(dai)碼量非常(chang)少。

8. 「Wxss」文(wen)件(jian)(jian)是(shi)引(yin)入的(de)樣式(shi)文(wen)件(jian)(jian)，你也(ye)可以直接(jie)在里面寫樣式(shi)，示(shi)例中采(cai)用(yong)的(de)是(shi)引(yin)入方式(shi)：

9. 修改(gai)代(dai)碼后刷新一次(ci)，可以看到未設背景(jing)的「view」標簽直(zhi)接(jie)變成了粉色。

注意：修(xiu)改(gai)「wxml」和(he)「wxss」下的(de)內(nei)容后，直接 F5 刷新就能直接看到(dao)效果(guo)，修(xiu)改(gai)「js」則需點(dian)擊(ji)重啟(qi)按鈕才(cai)能看到(dao)效果(guo)。

10. 另(ling)外，公(gong)共樣式可以(yi)在「app.wxss」里直(zhi)接引用。

11. 「Js」文件(jian)需要(yao)在「app.json」文件(jian)的「”page”」里預(yu)先(xian)配(pei)置好。為了(le)項(xiang)目結構清晰化，我在示例項(xiang)目中的「index」首頁(ye)(ye)同級目錄(lu)新建其(qi)它四個頁(ye)(ye)面文件(jian)，具體(ti)如下：

經過(guo)以上步(bu)驟，案例中(zhong)的五個底部菜(cai)單就全部配置完(wan)畢了(le)。

我(wo)們的應用號開發(fa)教程將借「名(ming)片盒」公眾(zhong)號持(chi)續更新(xin)，滾動播出。

關注「名片盒」公眾號，回復「應用(yong)號」即(ji)可看(kan)到最新內容！

同時，歡迎開發者們加入「應用號開發者交流群」（QQ 群號：375772941）