第一章：微信小程序簡介與入門

1.1 簡介

微信小程序是一種基于微信平臺的應(yīng)用程序，可以在微信內(nèi)直接使用，無需下載和安裝。它具有小巧、高效、便捷的特點，可以滿足用戶在微信中獲取信息、使用服務(wù)的需求。

微信小程序采用前端技術(shù)進行開發(fā)，主要使用HTML、CSS和JavaScript。通過微信開發(fā)者工具，可以方便地進行小程序的開發(fā)、調(diào)試和發(fā)布。

1.2 入門準(zhǔn)備

在開始微信小程序開發(fā)之前，首先需要完成以下準(zhǔn)備工作：

1.2.1 下載微信開發(fā)者工具

微信開發(fā)者工具是進行小程序開發(fā)的必備工具，可以在微信公眾平臺上下載安裝。=> 官網(wǎng)下載直通車
安裝好后打開界面如下圖所示，初次打開會彈出一個二維碼，使用開發(fā)者微信掃碼授權(quán)即可：

1.2.2 注冊小程序賬號

在微信公眾平臺上注冊一個小程序賬號，用于后續(xù)的開發(fā)和發(fā)布。=>官方注冊指引

1.2.3 創(chuàng)建小程序項目

打開微信開發(fā)者工具，選擇新建小程序項目，在彈出的對話框中選擇小程序的AppID（我這里使用的是一個已經(jīng)申請好的AppID，當(dāng)然可以直接點擊這里的藍色文字申請測試賬號）、項目目錄和項目名稱等信息，點擊確定即可創(chuàng)建一個新的小程序項目。

這里后端服務(wù)這塊我們選擇不使用云服務(wù)，模板選擇JavaScript基礎(chǔ)模板?？梢钥吹接覀?cè)已經(jīng)有了相應(yīng)的一個初始頁面的預(yù)覽圖，我們點擊底部的確定按鈕即可生成初始代碼。

1.3 創(chuàng)建第一個微信小程序

接下來，我們來創(chuàng)建我們的第一個微信小程序。

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

在創(chuàng)建小程序項目后，可以看到項目中的一些默認文件和目錄結(jié)構(gòu)。下面是一個簡單的目錄結(jié)構(gòu)示例：

project
|-- pages
|   |-- index
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   |-- index.wxss
|-- app.js
|-- app.json
|-- app.wxss

• pages 目錄存放小程序的頁面文件，每個頁面通常由多個文件組成，包括 JavaScript 邏輯代碼、JSON 配置、WXML 模板和 WXSS 樣式表。
• app.js 是小程序的全局邏輯文件。
• app.json 是小程序的全局配置文件。
• app.wxss 是小程序的全局樣式表。

1.3.2 配置小程序信息

打開 app.json 文件，配置小程序的基本信息，包括小程序的名稱、導(dǎo)航欄樣式、頁面路徑等。下面是一個示例：

{"pages": ["pages/index/index"],"window": {"navigationBarTitleText": "Hello World"}
}

在上面的示例中，我們定義了一個頁面 index，并設(shè)置了導(dǎo)航欄標(biāo)題為 “Hello World”。

1.3.3 創(chuàng)建頁面文件

模板生成的代碼已經(jīng)是一個挺好的參考入門項目了，這里為了我們有一個初始的開發(fā)體驗，我們小刀幾筆。首先我們在app.json文件內(nèi)刪除logs相應(yīng)的配置，并刪掉模板自動生成的logs文件夾，清空app.wxss的所有內(nèi)容。然后我們修改 pages 目錄下的 index 的文件夾下的文件：

• index.js：頁面的 JavaScript 邏輯代碼
• index.json：頁面的 JSON 配置文件
• index.wxml：頁面的 WXML 模板文件
• index.wxss：頁面的 WXSS 樣式表文件

在 index.wxml 中編寫頁面的結(jié)構(gòu)和內(nèi)容，例如：

<view class="container"><text class="title">Welcome to WeChat Mini Program!</text><button class="button" bindtap="onTap">Click Me</button>
</view>

在 index.js 中編寫頁面的邏輯代碼，例如：

Page({onTap() {wx.showToast({title: 'Hello World',icon: 'success',duration: 2000})}
})

在 index.wxss 中編寫頁面的樣式代碼，例如：

.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;
}.title {font-size: 50rpx;margin-bottom: 50rpx;padding: 50rpx;
}.button {width: 300rpx;height: 100rpx;background-color: #00a5e0;color: #fff;border-radius: 50rpx;
}

1.3.4 預(yù)覽小程序

在開發(fā)者工具最左側(cè)會直接展示項目預(yù)覽效果，點擊左上角模擬器即可操作關(guān)閉或開啟預(yù)覽。我們在預(yù)覽界面中可以執(zhí)行仿真的操作，點擊左上角頭像下方的機型文字，即可切換預(yù)覽不同尺寸標(biāo)準(zhǔn)的機型展示效果。在我們本文的小程序中，我們把Hello World放到了一個彈窗提示的消息中，我們點擊藍色的小按鈕，即可看到效果。

1.3.5 發(fā)布小程序

當(dāng)你完成了小程序的開發(fā)和調(diào)試后，點擊微信開發(fā)者工具右上角的【上傳】按鈕，填寫簡單的版本介紹等信息，即可將小程序代碼上傳到微信后臺，你只需登錄微信開放平臺，點擊版本管理，即可進行后續(xù)項目的提審和發(fā)布流程。

1. 登錄微信公眾平臺，進入小程序后臺管理頁面。
2. 在后臺管理頁面，選擇"開發(fā)"->“開發(fā)管理”->“版本管理”。
3. 進入"版本管理"頁面，點擊"提交審核"按鈕，填寫相應(yīng)的審核信息。
4. 微信團隊將對你的小程序進行審核，審核通過后，你的小程序?qū)⑸暇€并對用戶可見。

請注意，小程序的發(fā)布需要遵守微信的相關(guān)規(guī)定和審核要求，確保小程序的內(nèi)容合法合規(guī)。

以上就是創(chuàng)建第一個微信小程序的基本步驟。通過這個簡單的示例，你可以了解到小程序的基本結(jié)構(gòu)和開發(fā)流程。后續(xù)，我會寫更多關(guān)羽小程序的各種功能和技術(shù)，助力大家開發(fā)更加豐富和復(fù)雜的小程序應(yīng)用，自學(xué)成才，如果覺得有價值請關(guān)注支持哦。