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

這篇具有很好參考價值的文章主要介紹了微信小程序 ---- 慕尚花坊項目初始化。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

項目介紹

01. 項目概述

02. 項目演示

03. 項目技術(shù)棧

04. 接口文檔

申請開發(fā)權(quán)限

項目初始化

01. 創(chuàng)建項目與項目初始化

02. 自定義構(gòu)建 npm + 集成Sass

03. 集成項目頁面文件

04. VsCode 開發(fā)小程序項目

項目介紹

01. 項目概述

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

02. 項目演示

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

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

03. 項目技術(shù)棧

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

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

?

04. 接口文檔

慕尚花坊系統(tǒng)-API文檔

申請開發(fā)權(quán)限

在開始開發(fā)一個小程序項目之前，需要先申請開發(fā)權(quán)限。

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

??：注意事項：

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

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

如何查看自己的微信號：

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

在將微信號發(fā)送給管理以后，管理員會登錄微信公眾后臺，進行添加：微信小程序 ---- 慕尚花坊項目初始化,apache

在管理員將自己設置為項目成員以后，開發(fā)者自己也可以登錄當前小程序管理后臺，獲取 AppId 微信小程序 ---- 慕尚花坊項目初始化,apache

在獲取到小程序 AppId 以后，就可以使用 AppId 新建小程序項目或者切換小程序項目的 AppId 微信小程序 ---- 慕尚花坊項目初始化,apache

項目初始化

01. 創(chuàng)建項目與項目初始化

創(chuàng)建項目

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

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

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

???注意：

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

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

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

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

項目初始化

重置?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. 自定義構(gòu)建 npm + 集成Sass

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

自定義構(gòu)建

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

???注意：

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

集成 Sass

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

03. 集成項目頁面文件

思路分析：

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

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

代碼分析：

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

04. VsCode 開發(fā)小程序項目

知識點：

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

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

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

?? Tip：

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

配置詳細插件：

在【項目的根目錄】下創(chuàng)建?.vscode?文件夾，注意：文件夾名字前面帶?.?點?
在?.vscode?文件夾下，創(chuàng)建?settings.json，用來對安裝的插件屬性進行設置，具體屬性設置從下面復制即可
- 注意：.vscode?文件夾下的?settings.json?文件只對當前一個項目生效
在【項目的根目錄】下創(chuàng)建?.prettierrc?文件，進行?Prettier?代碼規(guī)則的配置，規(guī)則從下面復制即可
為了讓?Prettier?配置項在微信開發(fā)者工具生效，需要在微信開發(fā)者工具中也安裝?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"
  },

  // 創(chuàng)建組件時使用的 css 后綴
  "minapp-vscode.cssExtname": "scss", // 默認 wxss，支持 styl sass scss less css

  // 指定 WXML 格式化工具
  "minapp-vscode.wxmlFormatter": "prettier",
  // 配置 prettier 代碼規(guī)范
  "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",

  // ---------------- 其他配置項 ----------------

  // 配置語言的文件關(guān)聯(lián)，運行 .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	一行的字符數(shù)，如果超過會進行換行，默認為80
"trailingComma": "none"	尾隨逗號問題，設置為none 不顯示逗號
"overrides": []	overrides 解析器：默認情況下，Prettier 會根據(jù)文件文件拓展名推斷要使用的解析器

??：注意事項：

項目根目錄?.vscode?文件夾中?settings.json?文件只對當前項目生效?

如果想配置項生效，還需要注意：

在 VsCode 中只能打開當前一個小程序項目，不能同時打開多個小程序項目? 且項目目錄請勿嵌套打開 ?文章來源地址http://www.zghlxwxcb.cn/news/detail-836722.html

到了這里，關(guān)于微信小程序 ---- 慕尚花坊項目初始化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！