当前位置：首页 > news >正文

慕尚花坊项目笔记

news 2025/7/12 6:17:36

慕尚花坊项目笔记

一、项目初始化

重置app.js中的代码
删除app.json中pages下的"pages/logs/logs"路径，同时删除pages.logs文件夹
删除app.json中pages下的"renderOptions"以及"componentFrameword"字段
重置app.wxss中的代码
删除components中的自定义组件
重置pages/index文件夹下的index.js、index.wxss、index.html以及index.json文件
更新utils下utils.js的文件名为formatTime.js

二、自定义构建npm、集成sass

1、自定义构建npm

首先在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 的构建结果目标地址
创建package.json并安装 vant ，然后进行 npm 构建，测试是否能够正常 vant 构建成功

npm init -y

npm i @vant/weapp

注意：因为npm init -y命令会将当前目录名作为package.json中name字段的默认值，而name字段不允许使用中文。如果目录名包含中文，就会导致初始化失败，提示类似 “Invalid name” 的错误信息。

2、集成sass

在 project.config.json 文件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"]，即可开启工具内置的 sass 编译插件。
注意：sass需要用双引号包裹，JSON 规定字符串必须用双引号 " 包裹，单引号 ’ 或未闭合的引号会导致错误

三、使用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 会根据文件文件拓展名推断要使用的解析器

四、通用模块封装

封装后可以极大简化API的调用

1、消息提示模块封装

封装思路：

创建一个 toast 方法对 wx.showToast() 方法进行封装
调用该方法时，传递对象作为参数
- 如果没有传递任何参数，设置一个空对象 {} 作为默认参数
- 从对象中包含 title、icon、duration、mask 参数，并给参数设置默认值
在需要显示弹出框的时候调用 toast 方法，并传入相关的参数，有两种参数方式：
- 不传递参数，使用默认参值
- 传入部分参数，覆盖默认的参数

在这里插入图片描述

调用方式：

模块化的方式导入使用

import { toast } from './extendApi'toast()
toast({ title: '数据加载失败....', mask: true })

将封装的模块挂载到 wx 全局对象身上

wx.toast()
wx.toast({ title: '数据加载失败....', mask: true })

模块化方式导入使用
在这里插入图片描述

挂载到wx全局对象身上
在这里插入图片描述

2、模态对话框封装

封装思路：

对 wx.showModal() 方法进行封装，封装后的新方法叫 modal
调用该方法时，传递对象作为参数，对象的参数同 wx.showModal() 参数一致
封装的 modal 方法的内部通过 Promise 返回用户执行的操作(确定和取消，都通过 resolve 返回)
在需要显示模态对话框的时候调用 modal 方法，并传入相关的参数，有三种调用方式：
- 不传递参数，使用默认参数
- 传递参数，覆盖默认的参数

调用方式：

新封装的本地存储模块，我们依然希望有两种调用的方式：

模块化的方式导入使用
将封装的模块挂载到 wx 全局对象身上

挂载到wx上且传入新的参数案例：
在这里插入图片描述

3、封装本地存储API

export const setStorage = (key,value) => {try{wx.setStorageSync(key,value)}catch(error){console.error(`存储指定 ${key} 数据发生错误:`, err)}
}export const getStorage = (key) => {try{const value = wx.getStorageSync(key)if(value){return value}}catch(error){console.error(`读取指定 ${key} 数据发生错误:`, err)}
}export const removeStorage = (key) => {try {wx.removeStorageSync(key)} catch (error) {console.error(`移除指定 ${key} 数据发生错误:`, error)}
}export const clearStorage = () => {try {wx.clearStorageSync()} catch (error) {console.error("清空本地存储时发生错误:", error);}
}

import {setStorage,getStorage,removeStorage,clearStorage} from './utils/storage'
App({async onShow(){setStorage('name','tom')setStorage('age',10)const name = getStorage('name')console.log(name);removeStorage('name')clearStorage()}
})

4、封装异步存储API+优化代码

export const asyncSetStorage = (key,data) => {return new Promise((resolve) => {wx.setStorage({key,data,complete(res){resolve(res)}})})
}export const asyncGetStorage = (key) => {return new Promise((resolve) => {wx.getStorage({key,complete(res){resolve(res)}})})
}export const asyncRemoveStorage = (key) => {return new Promise((resolve) => {wx.removeStorage({key,complete(res){resolve(res)}})})
}export const asyncClearStorage = () => {return new Promise((resolve) => {wx.clearStorage({complete(res){resolve(res)}})})
}

import {asyncSetStorage,asyncGetStorage,asyncRemoveStorage,asyncClearStorage} from './utils/storage'
App({async onShow(){asyncSetStorage('name','Jerry').then((res)=>{console.log(res);})asyncGetStorage('name').then((res)=>{console.log(res);})asyncRemoveStorage('name').then((res)=>{console.log(res);})asyncClearStorage().then((res)=>{console.log(res);})}
})

五、网络请求封装

1、为什么要封装wx.request()

小程序大多数 API 都是异步 API，如 wx.request()，wx.login()等。这类 API 接口通常都接收一个 Object 对象类型的参数，参数中可以按需指定以下字段来接收接口调用结果：

参数名	类型	必填	说明
success	function	否	调用成功的回调函数
fail	function	否	调用失败的回调函数
complete	function	否	调用结束的回调函数（调用成功、失败都会执行）

2、请求封装-request方法

在封装网络请求模块的时候，采用class类来进行封装，采用类的方式封装代码更具可复用性，也方便地添加新的方法和属性，提高代码的扩展性
在这里插入图片描述

在 WxRequest 类内部封装一个 request 实例方法

request 实例方法中需要使用 Promise 封装 wx.request，也就是使用 Promise 处理 wx.request 的返回结果

request 实例方法接收一个 options 对象作为形参，options 参数和调用 wx.request 时传递的请求配置项一致

接口调用成功时，通过 resolve 返回响应数据
接口调用失败时，通过 reject 返回错误原因

3、请求封装-设置请求参数

在发起网络请求时，需要配置一些请求参数，其中有一些参数我们可以设置为默认参数，例如：请求方法、超时时长等，因此在封装时我们要定义一些默认的参数。
我们还要允许在进行实例化的时候，传入参数，对默认的参数进行修改

// 对 WxRequest 进行实例化
const instance = new WxRequest({baseURL: 'https://gmall-prod.atguigu.cn/mall-api', // 请求基准地址timeout: 10000 // 微信小程序 timeout 默认值为 60000
})

在通过实例调用request实例方法时也会传入相关的请求参数

const res = await instance.request({url: '/index/findBanner',method: 'GET'
})

从而得出结论：请求参数的设置有三种方式：

默认参数：在 WxRequest 类中添加 defaults 实例属性来设置默认值
实例化时参数：在对 WxRequest 类进行实例化时传入相关的参数，需要在 constructor 构造函数形参进行接收
调用实例方法时传入请求参数

request.js
在这里插入图片描述

实例化时设置请求参数（被constructor形参接收）调用实例方法时设置请求参数（被request实例方法的形参options接收）

4、请求封装-封装请求快捷方法

在request()基础上封装一些快捷方法，简化request的调用
需要封装 4 个快捷方法，分别是 get、delete、post、put，他们的调用方式如下：

instance.get('请求地址', '请求参数', '请求配置')
instance.delete('请求地址', '请求参数', '请求配置')
instance.post('请求地址', '请求参数', '请求配置')
instance.put('请求地址', '请求参数', '请求配置')