小程序（二）appID獲取和項(xiàng)目目錄結(jié)構(gòu)
2021-08-04 17:27:53

?

?

?

1.小程序項(xiàng)目創(chuàng)建

創(chuàng)建小程序項(xiàng)目，打開小程序開發(fā)工具，左邊選擇小程序，右邊點(diǎn)擊加號(hào)進(jìn)行信息的設(shè)置

1.項(xiàng)目名稱

2.項(xiàng)目存儲(chǔ)目錄的選擇

3.項(xiàng)目需要的appId

如下面：

?

?

項(xiàng)目名稱和存儲(chǔ)目錄都好理解，但是appid是什么呢？

appId：它相當(dāng)于你的小程序在微信中的“身份證”，有了它，微信客戶端才能確定你的小程序“身份”，并允許使用微信提供的高級(jí)接口。

想要獲得 AppID，只需要在微信公眾平臺(tái)官網(wǎng)首頁（mp.weixin.qq.com）注冊(cè)小程序賬號(hào)并登錄，就可以在網(wǎng)站的“開發(fā)”-“開發(fā)設(shè)置”中，查看到微信小程序的 AppID 了。

要注意，不可直接使用服務(wù)號(hào)或訂閱號(hào)的 AppID 。

獲取步驟如下：

1.?登錄或者注冊(cè)小程序賬號(hào)

?

?

2.進(jìn)入小程序賬號(hào)后左側(cè)開發(fā)選項(xiàng)----》開發(fā)設(shè)置---》appid（小程序id）

?

?

獲取到自己的appid后可以復(fù)制到創(chuàng)建項(xiàng)目需要的地方。

?

?

如果沒有自己的小程序賬號(hào) 可以使用測(cè)試appid做臨時(shí)開發(fā)使用

?

2.?小程序目錄結(jié)構(gòu)創(chuàng)建好項(xiàng)目后界面展示和結(jié)構(gòu)如下

?

?

一：文件類型簡(jiǎn)介???

.json為配置文件，例如：配置標(biāo)題 ?"navigationBarTitleText": "登錄"? ? .wxml?為模板文件，相當(dāng)于HTML模板，（做界面布局顯示）? ?

.wxss 為樣式文件，相當(dāng)于HTML的CSS樣式表，（做界面樣式的控制）???

.js 為JS 腳本邏輯文件，相當(dāng)于HTML的js腳本，（做功能的邏輯）

?

二：總結(jié)構(gòu)? ??一個(gè)描述整體程序的 app ????多個(gè)描述各自頁面的 page????一個(gè)項(xiàng)目IDE配置文件project.config.json? ? 一個(gè)共用程序邏輯庫? ? 1.一個(gè)小程序主體(名稱為app)由三個(gè)文件組成，必須放在項(xiàng)目的根目錄

文件?	必填?	作用
app.js?	是	小程序邏輯
app.json?	是	小程序公共配置
app.wxss?	是	小程序公共樣式表

? ??????? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.多個(gè)描述各自頁面的 pages(pages目錄存儲(chǔ)小程序的每個(gè)頁面)

文件?	必填	作用
頁面名稱.js?	是	本頁面邏輯
頁面名稱.wxml?	是	頁面結(jié)構(gòu)
頁面名稱.wxss	是	頁面樣式表
頁面名稱.json	是	頁面配置

?? ? ? ? ?? ? ?注意：?? ? ? ??

1)為了減少配置項(xiàng)，描述頁面的四個(gè)文件必須具有相同的路徑與文件名。? ? ? ??

2)從上可看出可包含.json、.wxml、.wxss、.js4個(gè)類型的文件???????????

?.json配置文件，即是當(dāng)前這個(gè)頁面的配置文件，????????????

默認(rèn)創(chuàng)建項(xiàng)目時(shí)，每個(gè)頁面底下沒有.json配置文件，因?yàn)樗皇潜靥畋仨氂械奈募?/span>

?

?

?

index和logs兩個(gè)頁面

? ? 3.根目錄下的project.config.json? ? ????

1).項(xiàng)目配置文件或稱為項(xiàng)目IDE配置文件? ? ????????在“微信開發(fā)者工具”上做的任何配置都會(huì)寫入到這個(gè)文件。????? ? ????

2).應(yīng)用場(chǎng)景：????????????????

通常在使用一個(gè)開發(fā)IDE工具的時(shí)候，都會(huì)針對(duì)各自喜好做一些個(gè)性化配置，????????????????

例如界面顏色、編譯配置等等，當(dāng)你換了另外一臺(tái)電腦重新安裝工具的時(shí)候，????????????????

你還要重新配置。? ? ????

3).解決辦法：就是這個(gè)project.config.json項(xiàng)目IDE配置文件????????????????

當(dāng)你重新安裝工具或者換電腦工作時(shí)，你只要載入同一個(gè)項(xiàng)目的代碼包，????????????????

開發(fā)者工具就自動(dòng)會(huì)幫你恢復(fù)到當(dāng)時(shí)你開發(fā)項(xiàng)目時(shí)的個(gè)性化配置，????????????????

其中會(huì)包括編輯器的顏色、代碼上傳時(shí)自動(dòng)壓縮等等一系列選項(xiàng)

?

?

?

? ? 4.共用程序邏輯庫(util目錄)????????????

這個(gè)目錄可以自定義名稱? ??????????

公共的js函數(shù)文件，通過module.exports的方式暴露pages下的每個(gè)頁面使用????????????

不需要每個(gè)頁面編寫重復(fù)的Js代碼。

?

?

?

????5.總結(jié)構(gòu)圖

?

?

?

?

三，app.js

?

?詳情參考API文檔"邏輯層/程序注冊(cè)"https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html?

但要注意：?

1.App()?必須在?app.js?中注冊(cè)，且不能注冊(cè)多個(gè)。?

2.不要在定義于?App()?內(nèi)的函數(shù)中調(diào)用?getApp()?，使用?this?就可以拿到 app 實(shí)例。?

3.不要在 onLaunch 的時(shí)候調(diào)用?getCurrentPages()，此時(shí) page 還沒有生成。?

4.通過?getApp()?獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù)。

?

?

?

四:程序的 app.json文件(配置小程序項(xiàng)目)? ??

作用：對(duì)微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多 tab 等。? ??

所有的選項(xiàng)配置pages、window、tabBar、networkTimeout、debug? ??app.json 配置項(xiàng)列表:

屬性	類型	必填	描述
pages	String Array	是	設(shè)置頁面路徑
window?	Object?	否	設(shè)置默認(rèn)頁面的窗口表現(xiàn)
?tabBar	Object?	否	設(shè)置底部 tab 的表現(xiàn)
networkTimeout	?Object	?否	設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間
debug	Boolean	否	設(shè)置是否開啟

?? ?debug 模式? ??

pages屬性說明：? ? ? ??

類型是String Array(字符串?dāng)?shù)組)， 每一項(xiàng)都是字符串，來指定小程序由哪些頁面組成。????????

每一項(xiàng)代表對(duì)應(yīng)頁面的【路徑+文件名】信息，數(shù)組的第一項(xiàng)代表小程序的初始頁面。????????

小程序中新增/減少頁面，都需要對(duì) pages 數(shù)組進(jìn)行修改。????????

文件名不需要后綴，框架自動(dòng)匹配pages 數(shù)組路徑下 .json, .js, .wxml, .wxss 4文件進(jìn)行整合。? ? ? ??

pages字符串?dāng)?shù)組的第一個(gè)字符串頁面路徑【路徑+文件名】為小程序顯示的首頁。????????如開發(fā)目錄為：? ??????

pages/????????

pages/index/index.wxml????????

pages/index/index.js????????

pages/index/index.wxss

pages/logs/logs.wxml????????

pages/logs/logs.js? ? ? ??

則配如下(小程序中新增/減少頁面，都需要對(duì) pages 數(shù)組進(jìn)行修改)? ??????{????????????

"pages": [? ??????????????//這里的的第一個(gè)頁面作為首頁顯示????????????? ? "pages/index/index",????????????????

?"pages/logs/logs"?????????????

]????????

}

其它詳情參考API文檔“配置”https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

?

五：頁面的js邏輯層(登錄頁面)? ?

?js文件為小程序的邏輯文件? ? ??

這里我們說到頁面的邏輯層：????????

其主要功能就是“登錄頁面”? ? ? ? ??

每個(gè)頁面目錄/頁面名稱.js? ? 頁面注冊(cè)的使用：與app.js的注冊(cè)小程序項(xiàng)目函數(shù)App(Object)類似使用? ? ? ? ?

Page(Object)? ? ?????

Object參數(shù)對(duì)象{}表示，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。????????????

具體詳情參考API文檔“邏輯層/注冊(cè)頁面”https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

?

?

?

六：頁面的配置(文件名.json)

?

每一個(gè)頁面也可以使用.json文件來對(duì)本頁面的窗口表現(xiàn)進(jìn)行配置。 頁面的配置比app.json全局配置簡(jiǎn)單得多，只是設(shè)置 app.json 中的 window 配置項(xiàng)的內(nèi)容，頁面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。頁面的.json只能設(shè)置?window?相關(guān)的配置項(xiàng)，以決定本頁面的窗口表現(xiàn)，所以無需寫?window?這個(gè)鍵。

每個(gè)頁面.json(頁面配置)，其實(shí)就是對(duì)app.json的window配置項(xiàng)進(jìn)行繼承覆蓋重寫應(yīng)用：app.json中配置了啟用上下拉刷新，但某些頁面不需要，那么就可以在頁面名.json中進(jìn)行重寫禁用了。又比如每個(gè)頁的標(biāo)題，也是需要重寫的。如：????

{????????"navigationBarBackgroundColor":"#ffffff",????????

"navigationBarTextStyle":"black",????????

"navigationBarTitleText":"程序職場(chǎng)功能演示",????????

"backgroundColor":"#eeeeee",????????

"backgroundTextStyle":"light"????

}

所有app.json中的window配置項(xiàng)在頁面名.json中都是可以覆蓋重寫的，但頁面名.json配置又有自己的特性是app.json小程序全局配置沒有的屬性

?

七：頁的視圖層????????

主要有兩塊：wxml和wxss?

?

具體使用參考API文檔"視圖層/WXML"https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

API文檔“視圖層/WXS”? https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/?? ??

?

?

八，框架圖

?

?

?

?

- End -

?

?

?

?

?