(一) 準(zhǔn)備工作

(1) 登錄注冊(cè)

注冊(cè)賬號(hào)：這就不談了，只需要注意使用一個(gè)全新的郵箱，別之前注冊(cè)過(guò)公眾號(hào)小程序等就可以了

https://mp.weixin.qq.com/wxopen/waregister?action=step1

登錄賬號(hào)：通過(guò)郵箱密碼登錄，亦或者綁定微信后使用掃碼也是可以的

https://mp.weixin.qq.com/

(2) 獲取 APPID

登錄后，在開(kāi)發(fā)入門(mén)的階段有一個(gè)比較重要的內(nèi)容需要了解，那就是 APPID，很好理解，就是這個(gè)小程序的唯一標(biāo)識(shí)，就類(lèi)似我們的身份證，登錄后首頁(yè)左側(cè)欄選擇【開(kāi)發(fā)】，跳轉(zhuǎn)后，選擇【開(kāi)發(fā)設(shè)置】就可以看到我們的 APPID

這個(gè) APPID 要記好哈，在剛開(kāi)始學(xué)習(xí)的時(shí)候，就會(huì)使用到

(3) 下載工具

在官網(wǎng)選擇一個(gè)合適的版本進(jìn)行下載，這就是我們小程序的編譯器，這里我選擇的是開(kāi)發(fā)版，不過(guò)選擇穩(wěn)定版也是可以的，針對(duì)入門(mén)并沒(méi)有太大的區(qū)別，不過(guò)穩(wěn)定版可能出現(xiàn)的小毛病會(huì)少一些

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安裝好后，直接提示掃碼登錄，接著就是點(diǎn)擊左側(cè)【小程序】，然后點(diǎn)擊右側(cè)【新建】（一個(gè)大加號(hào)）填寫(xiě)一些基本的信息

• 項(xiàng)目名稱(chēng)和目錄：自己看著弄就可以了
• APPID：之前頁(yè)面中找到的 APPID 在這個(gè)時(shí)候就可以用的上了，雖然你使用測(cè)試號(hào)也是可以進(jìn)入的，到底后面還是要用自己的 ID 的。
• 開(kāi)發(fā)模式：小程序
• 后端服務(wù)：不使用云服務(wù)，前面還是以學(xué)習(xí)小程序本身為主，不使用此選項(xiàng)
• 語(yǔ)言：JavaScript 和 Typescript，根據(jù)自身的熟悉程序選擇即可

新建后，第一個(gè)小程序就完事了哈~

(二) 初識(shí)小程序

(1) 界面總覽

下面的區(qū)域就是一個(gè)初始化新建好的項(xiàng)目界面了，圖片中標(biāo)的很清楚，每一塊的具體內(nèi)容，第一次創(chuàng)建項(xiàng)目時(shí)，也可以在設(shè)置的通用設(shè)置中將默認(rèn)的的工作區(qū)以及主題（淺色還是深色）根據(jù)自己的需要修改

說(shuō)明：直接在小程序官方的工具中編寫(xiě)代碼也可以，不過(guò)我個(gè)人選擇配合 vscode 或 sublime 進(jìn)行代碼的編輯，在微信官方開(kāi)發(fā)工具或者那個(gè)查看結(jié)果以及控制臺(tái)的一些信息

(2) 文件類(lèi)型

與傳統(tǒng)的網(wǎng)頁(yè)開(kāi)發(fā)有一絲小不同，微信小程序重新定義了它的描述語(yǔ)言，例如 wxml、wxss 等，同時(shí)還額外提供了一層 JSON 的配置文件

wxml（頁(yè)面結(jié)構(gòu)文件）

用來(lái)書(shū)寫(xiě)、構(gòu)建頁(yè)面，類(lèi)似傳統(tǒng)網(wǎng)頁(yè)開(kāi)發(fā)的 HTML

wxss（樣式表文件）

用于制定頁(yè)面樣式，從而美化頁(yè)面，類(lèi)似傳統(tǒng)網(wǎng)頁(yè)開(kāi)發(fā)的 CSS

js（腳本文件）

用于指定一定頁(yè)面交互邏輯，就是 Javascript

json（靜態(tài)數(shù)據(jù)配置文件）

JSON 格式的配置文件，設(shè)置程序的一些配置效果

(3) 結(jié)構(gòu)目錄

A：總體介紹

通過(guò)官方開(kāi)發(fā)工具或者vscode等其他編輯器，你可以看到，新建一個(gè)項(xiàng)目后，會(huì)默認(rèn)生成一個(gè)初始化的項(xiàng)目結(jié)構(gòu)，里面含有很多文件，其后綴格式都是我們上面介紹過(guò)的

下面我們針對(duì)一些主要的內(nèi)容進(jìn)行一個(gè)基本的介紹

├── pages        // 頁(yè)面文件夾
|	├── index 						 // 首頁(yè)
│ |	├── index.js				 // 首頁(yè)邏輯腳本文件
│ |	├── index.json			  // 首頁(yè)配置文件
│ |	├── index.wxml			 	 // 首頁(yè)頁(yè)面結(jié)構(gòu)文件
│ |	├── index.wxss				 // 首頁(yè)樣式文件

|	├── logs 						 // 日志頁(yè)面
│ |	├── logs.js				 	 // 日志頁(yè)面邏輯腳本文件
│ |	├── logs.json			  // 日志頁(yè)面配置文件
│ |	├── logs.wxml			 	 // 日志頁(yè)面頁(yè)面結(jié)構(gòu)文件
│ |	├── logs.wxss				 // 日志頁(yè)面樣式文件

|	├── utils 						 // 工具js文件（第三方，可刪除）
│ |	├── util.js				 	 // 日志頁(yè)面邏輯腳本文件

│ ├── app.js						 // 項(xiàng)目的全局腳本文件
│ ├── app.json					 // 項(xiàng)目的全局配置文件
│ ├── app.wxss					 // 項(xiàng)目的全局配置文件
│ ├── project.config.json			 // 項(xiàng)目的開(kāi)發(fā)者工具的配置
│ ├── sitemap.json				 // 索引配置文件

具體的一些例如 wxml wxss 等的用法，會(huì)在后面提到，這里我們還要提一下兩個(gè)內(nèi)容：

A：針對(duì)說(shuō)明

app.js：項(xiàng)目的入口文件，用來(lái)創(chuàng)建應(yīng)用程序的對(duì)象，處理程序的生命周期

app.json：項(xiàng)目全局的配置文件，涉及到了頁(yè)面的路徑，界面/窗口 的表現(xiàn)時(shí)間，網(wǎng)格超時(shí)的時(shí)間，還有小程序底部的 tab 等等，還是非常重要的，初始化新建項(xiàng)目后，可以看到如下pages 字段和 windows 字段

{
 "pages":[
 "pages/index/index",
 "pages/logs/logs"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle":"black"
 }
}

• pages 字段，是關(guān)于頁(yè)面路徑的，也就是給客戶(hù)端說(shuō)明出你小程序頁(yè)面到底在哪里
• window 字段，對(duì)應(yīng) 頁(yè)面的顏色、標(biāo)題等等
• tabbar 字段，底部 tab 欄（切換頁(yè)面）

貼一段官網(wǎng)關(guān)于tabbar的說(shuō)明（官網(wǎng)的說(shuō)明確實(shí)很可?。?/p>

如果小程序是一個(gè)多 tab 應(yīng)用（客戶(hù)端窗口的底部或頂部有 tab 欄可以切換頁(yè)面），可以通過(guò) tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。

而一般我們想要設(shè)置出常見(jiàn)的效果就會(huì)選擇使用 list 進(jìn)行配置

給大家舉個(gè)例子，書(shū)寫(xiě)的格式就是這樣的，別忘了制定了 tabbar 一定要有在pages中設(shè)置對(duì)應(yīng)的頁(yè)面哦

"tabBar": {
 "color": "#999",
 "selectedColor": "#ff2d4a",
 "backgroundColor": "#fafafa",
 "position": "bottom",
 "borderStyle": "black",
 "list": [
  {
  "pagePath": "pages/index/index",
  "text": "首頁(yè)",
  "iconPath": "icons/home.jpg",
  "selectedIconPath": "icons/home.jpg"
  },
  {
  "pagePath": "pages/user/index",
  "text": "我的",
  "iconPath": "icons/my.jpg",
  "selectedIconPath": "icons/my.jpg"
  }
 ]
 },

每一個(gè)小程序頁(yè)面也可以使用 .json 文件來(lái)對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置。頁(yè)面中配置項(xiàng)在當(dāng)前頁(yè)面會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。同樣的，也有很多配置內(nèi)容，看一下官網(wǎng)就可以了

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

結(jié)尾

到此這篇關(guān)于微信小程序入門(mén)從這里出發(fā)（登錄注冊(cè)、開(kāi)發(fā)工具、文件及結(jié)構(gòu)介紹）的文章就介紹到這了,更多相關(guān)微信小程序入門(mén)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論