小程序（二）appID獲取和項目目錄結構
2021-08-04 17:27:53

?

?

?

1.小程序項目創建

創建小程序項目，打開小程序開發工具，左邊選擇小程序，右邊點擊加號進行信息的設置

1.項目名稱

2.項目存儲目錄的選擇

3.項目需要的appId

如下面：

?

?

項目名稱和存儲目錄都好理解，但是appid是什么呢？

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

想要獲得 AppID，只需要在微信公眾平臺官網首頁（mp.weixin.qq.com）注冊小程序賬號并登錄，就可以在網站的“開發”-“開發設置”中，查看到微信小程序的 AppID 了。

要注意，不可直接使用服務號或訂閱號的 AppID 。

獲取步驟如下：

1.?登錄或者注冊小程序賬號

?

?

2.進入小程序賬號后左側開發選項----》開發設置---》appid（小程序id）

?

?

獲取到自己的appid后可以復制到創建項目需要的地方。

?

?

如果沒有自己的小程序賬號 可以使用測試appid做臨時開發使用

?

2.?小程序目錄結構創建好項目后界面展示和結構如下

?

?

一：文件類型簡介???

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

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

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

?

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

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

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

文件?	必填	作用
頁面名稱.js?	是	本頁面邏輯
頁面名稱.wxml?	是	頁面結構
頁面名稱.wxss	是	頁面樣式表
頁面名稱.json	是	頁面配置

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

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

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

?.json配置文件，即是當前這個頁面的配置文件，????????????

默認創建項目時，每個頁面底下沒有.json配置文件，因為它不是必填必須有的文件

?

?

?

index和logs兩個頁面

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

1).項目配置文件或稱為項目IDE配置文件? ? ????????在“微信開發者工具”上做的任何配置都會寫入到這個文件。????? ? ????

2).應用場景：????????????????

通常在使用一個開發IDE工具的時候，都會針對各自喜好做一些個性化配置，????????????????

例如界面顏色、編譯配置等等，當你換了另外一臺電腦重新安裝工具的時候，????????????????

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

3).解決辦法：就是這個project.config.json項目IDE配置文件????????????????

當你重新安裝工具或者換電腦工作時，你只要載入同一個項目的代碼包，????????????????

開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，????????????????

其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項

?

?

?

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

這個目錄可以自定義名稱? ??????????

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

不需要每個頁面編寫重復的Js代碼。

?

?

?

????5.總結構圖

?

?

?

?

三，app.js

?

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

但要注意：?

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

2.不要在定義于?App()?內的函數中調用?getApp()?，使用?this?就可以拿到 app 實例。?

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

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

?

?

?

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

作用：對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。? ??

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

屬性	類型	必填	描述
pages	String Array	是	設置頁面路徑
window?	Object?	否	設置默認頁面的窗口表現
?tabBar	Object?	否	設置底部 tab 的表現
networkTimeout	?Object	?否	設置網絡超時時間
debug	Boolean	否	設置是否開啟

?? ?debug 模式? ??

pages屬性說明：? ? ? ??

類型是String Array(字符串數組)， 每一項都是字符串，來指定小程序由哪些頁面組成。????????

每一項代表對應頁面的【路徑+文件名】信息，數組的第一項代表小程序的初始頁面。????????

小程序中新增/減少頁面，都需要對 pages 數組進行修改。????????

文件名不需要后綴，框架自動匹配pages 數組路徑下 .json, .js, .wxml, .wxss 4文件進行整合。? ? ? ??

pages字符串數組的第一個字符串頁面路徑【路徑+文件名】為小程序顯示的首頁。????????如開發目錄為：? ??????

pages/????????

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

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

pages/index/index.wxss

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

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

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

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

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

]????????

}

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

?

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

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

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

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

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

Page(Object)? ? ?????

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

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

?

?

?

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

?

每一個頁面也可以使用.json文件來對本頁面的窗口表現進行配置。 頁面的配置比app.json全局配置簡單得多，只是設置 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。頁面的.json只能設置?window?相關的配置項，以決定本頁面的窗口表現，所以無需寫?window?這個鍵。

每個頁面.json(頁面配置)，其實就是對app.json的window配置項進行繼承覆蓋重寫應用：app.json中配置了啟用上下拉刷新，但某些頁面不需要，那么就可以在頁面名.json中進行重寫禁用了。又比如每個頁的標題，也是需要重寫的。如：????

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

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

"navigationBarTitleText":"程序職場功能演示",????????

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

"backgroundTextStyle":"light"????

}

所有app.json中的window配置項在頁面名.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 -

?

?

?

?

?