微信小程序 ---- 慕尚花坊項目初始化

項目介紹

01. 項目概述

02. 項目演示

03. 項目技術棧

04. 接口文檔

申請開發權限

項目初始化

01. 創建項目與項目初始化

02. 自定義構建 npm + 集成Sass

03. 集成項目頁面文件

04. VsCode 開發小程序項目

項目介紹

01. 項目概述

[慕尚花坊] 是一款同城鮮花訂購的小程序，專業提供各地鮮花速遞、鮮花預定、網上訂花、包月鮮花等服務。最快3小時送花上門，保證花材新鮮和鮮花質量，可先送花后付款，專業花藝師傅精美包扎，品質保證，至誠服務。

02. 項目演示

[慕尚花坊] 項目涵蓋電商項目常見功能模塊，包含：

項目首頁
商品分類
商品列表
商品詳情
用戶管理
收貨地址
購物車
結算支付
訂單管理
等……

03. 項目技術棧

[慕尚花坊] 項目使用原生小程序進行搭建開發，項目涵蓋小程序開發所有常用的知識點

小程序內置組件：采用小程序內置組件結合?Vant?組件庫實現頁面結構的搭建
項目中使用了 css 拓展語言 Scss 繪制頁面的結構
小程序內置API：交互、支付、文件上傳、地圖定位、網絡請求、預覽圖片、本地存儲等
小程序分包加載：降低小程序的啟動時間、包的體積，提升用戶體驗度
小程序組件開發：將頁面內的功能模塊抽象成自定義組件，實現代碼的復用
網絡請求封裝：request 方法封裝、快捷方式封裝、響應攔截器、請求攔截器
骨架屏組件：利用開發者工具提供了自動生成骨架屏代碼的能力，提高了整體使用體驗和用戶滿意度。
UI?組件庫：使用?Vant?組件庫實現小程序結構的繪制
LBS：使用騰訊地圖服務進行?LBS逆地址解析，實現選擇收貨地址功能
miniprogram-licia：使用?licia?進行函數的防抖節流
async-validator：使用?async-validator?實現表單驗證
miniprogram-computed: 使用?miniprogram-computed?進行計算屬性功能
mobx-miniprogram：使用?mobx-miniprogram?進行項目狀態的管理

?

04. 接口文檔

慕尚花坊系統-API文檔

申請開發權限

在開始開發一個小程序項目之前，需要先申請開發權限。

需要將自己的微信號發送給對應小程序賬號的管理員，在小程序微信公眾后臺添加我們自己為開發者。

📌：注意事項：

需要將自己的?微信號?發送給對應小程序賬號的管理員

手機號不是微信號?(除非將手機號設置為了微信號)

如何查看自己的微信號：

在將微信號發送給管理以后，管理員會登錄微信公眾后臺，進行添加：

在管理員將自己設置為項目成員以后，開發者自己也可以登錄當前小程序管理后臺，獲取 AppId

在獲取到小程序 AppId 以后，就可以使用 AppId 新建小程序項目或者切換小程序項目的 AppId

項目初始化

01. 創建項目與項目初始化

創建項目

在微信開發者工具的開始界面左側檢查項目類型，需要為 [小程序]

然后在右側點擊 [+] 開始新建項目

最后在彈出的界面中輸入項目相關的信息，點擊確定即可

📌?注意：

在新建項目的時候，[填寫的 AppId 需要是自己的 AppId]

不能填寫老師的 AppId，因為同學們不是當前小程序的開發成員

項目初始化

重置?app.js?中的代碼
刪除?app.json?中?pages?下的?"pages/logs/logs"?路徑，同時刪除?pages/logs?文件夾
刪除?app.json?中?pages?下的?"rendererOptions"?以及?"componentFramework"?字段
重置?app.wxss?中的代碼
刪除?components?中的自定義組件
重置?pages/index?文件夾下的?index.js?、index.wxss、?index.html?以及?index.json?文件
更新?utils?下?util.js?的文件名為?formatTime.js

02. 自定義構建 npm + 集成Sass

隨著項目的功能越來越多、項目越來越復雜，文件目錄也變的很繁瑣，為了方便進行項目的開發，開發人員通常會對目錄結構進行調整優化，在慕尚花坊項目中，我們就需要將小程序源碼放到 miniprogram 目錄下。

自定義構建

首先在?project.config.json?配置?miniprogramRoot?選項，指定小程序源碼的目錄
然后配置?project.config.json?的?setting.packNpmManually?為?true，開啟自定義 node_modules 和 miniprogram_npm 位置的構建 npm 方式
最后配置 project.config.json 的?setting.packNpmRelationList?項，指定?packageJsonPath?和?miniprogramNpmDistDir?的位置
- packageJsonPath 表示 node_modules 源對應的 package.json
- miniprogramNpmDistDir 表示 node_modules 的構建結果目標位置
安裝?vant?，然后進行?npm 構建，測試是否能夠正常?vant?構建成功
```
npm i @vant/weapp
```

📌?注意：

? 配置后如果沒有生效，需要 [ 重啟微信開發者工具 ] ? ?

集成 Sass

在?project.config.json?文件中，修改?setting?下的?useCompilerPlugins?字段為?["sass"]，即可開啟工具內置的 sass 編譯插件。

03. 集成項目頁面文件

思路分析：

打開?[慕尚花坊項目素材]?中的?[模板文件]?文件夾

復制該文件中全部的文件和文件夾，在項目的?miniprogram?目錄下進行粘貼

代碼分析：

app.json?中配置了?pages、window、tabBar
app.json?中對項目中會使用到的?Vant?組件進行了全部的注冊
app.wxss?文件中導入了阿里巴巴使用圖標庫
components?文件夾中定義了兩個公共的組件
pages?目錄下存放了項目中所有頁面的文件，后續我們會進行分包的處理

04. VsCode 開發小程序項目

知識點：

在進行項目開發的時候，部分同學可能不習慣微信開發者工具進行開發，而是習慣使用?VSCode?等編輯器

但是?VsCode?對小程序開發支持的不是非常友好，如果想通過?VSCode?開發小程序項目，需要安裝以下插件：

WXML - Language Service
prettier
微信小程序開發工具
微信小程序助手-Y
小程序開發助手(可選)
其他......

💡 Tip：

使用 VsCode 開發小程序項目時，如果需要預覽、調試小程序，依然需要借助微信開發者工具

配置詳細插件：

在【項目的根目錄】下創建?.vscode?文件夾，注意：文件夾名字前面帶?.?點?
在?.vscode?文件夾下，創建?settings.json，用來對安裝的插件屬性進行設置，具體屬性設置從下面復制即可
- 注意：.vscode?文件夾下的?settings.json?文件只對當前一個項目生效
在【項目的根目錄】下創建?.prettierrc?文件，進行?Prettier?代碼規則的配置，規則從下面復制即可
為了讓?Prettier?配置項在微信開發者工具生效，需要在微信開發者工具中也安裝?Prettier?擴展插件。

?? .vscode/settings.json

{// 保存文件時是否自動格式化"editor.formatOnSave": true,// ---------------- 以下是 [ prettier ] 插件配置 ----------------// 指定 javascript、wxss、scss、less、json、jsonc 等類型文件使用 prettier 進行格式化"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[wxss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// Prettier 的一個配置項，用于指定哪些文件類型需要使用 Prettier 進行格式化"prettier.documentSelectors": ["**/*.wxml", "**/*.wxss", "**/*.wxs"],// ---------------- 以下是 [ WXML - Language Service ] 插件配置 ----------------// wxml 文件使用 prettier 進行格式化"[wxml]": {// "qiu8310.minapp-vscode" 是 WXML - Language Service 插件提供的配置項// 此插件主要是針對小程序的 wxml 模板語言，可以自動補全所有的組件、組件屬性、組件屬性值等等// 如果是 VsCode 需要開啟這個配置"editor.defaultFormatter": "qiu8310.minapp-vscode"// 如果是微信小程序，需要開啟這個配置，通過 esbenp.prettier-vscode 對代碼進行格式化// "editor.defaultFormatter": "esbenp.prettier-vscode"},// 創建組件時使用的 css 后綴"minapp-vscode.cssExtname": "scss", // 默認 wxss，支持 styl sass scss less css// 指定 WXML 格式化工具"minapp-vscode.wxmlFormatter": "prettier",// 配置 prettier 代碼規范"minapp-vscode.prettier": {"useTabs": false,"tabWidth": 2,"printWidth": 80},// ---------------- 以下是 [ 微信小程序助手-Y ] 插件配置 ----------------// 新增、刪除小程序頁面時，是否自動同步 app.json pages 路徑配置，默認為 false"wechat-miniapp.sync.delete": true,// 設置小程序頁面 wxss 樣式文件的擴展名"wechat-miniapp.ext.style": "scss",// ---------------- 其他配置項 ----------------// 配置語言的文件關聯，運行 .json 文件時寫注釋// 但在 app.json 和 page.json 中無法使用"files.associations": {"*.json": "jsonc"}
}

?? .prettierrc

{"semi": false,"singleQuote": true,"useTabs": false,"tabWidth": 2,"printWidth": 180,"trailingComma": "none","overrides": [{"files": "*.wxml","options": { "parser": "html" }},{"files": "*.wxss","options": { "parser": "css" }},{"files": "*.wxs","options": { "parser": "babel" }}]
}

配置項	配置項含義
"semi": false	不要有分號
"singleQuote": true	使用單引號
"useTabs": false	縮進不使用 tab,使用空格
"tabWidth": 2	tab縮進為4個空格字符
"printWidth": 80	一行的字符數，如果超過會進行換行，默認為80
"trailingComma": "none"	尾隨逗號問題，設置為none 不顯示逗號
"overrides": []	overrides 解析器：默認情況下，Prettier 會根據文件文件拓展名推斷要使用的解析器