江门网站设计制作,wordpress 应用市场,wordpress没有注册页面,冀州网站制作#x1f3cd;️作者简介#xff1a;大家好#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 #x1f6f5;个人主页#xff1a;亦世凡华、 #x1f6fa;系列专栏#xff1a;uni-app #x1f6b2;座右铭#xff1a;人生亦可燃烧#xff0c;亦可腐败#xf… ️作者简介大家好我是亦世凡华、渴望知识储备自己的一名在校大学生 个人主页亦世凡华、 系列专栏uni-app 座右铭人生亦可燃烧亦可腐败我愿燃烧耗尽所有光芒。 引言 ⚓经过web前端的学习相信大家对于前端开发有了一定深入的了解今天我开设了uni-app专栏主要想从移动端开发方向进一步发展而对于我来说写移动端博文的第二站就是uni-app开发希望看到我文章的朋友能对你有所帮助。 今天开始使用 vue3 uni-app 搭建一个电商购物的小程序因为文章会将项目的每一个地方代码的书写都会讲解到所以本项目会分成好几篇文章进行讲解我会在最后一篇文章中会将项目代码开源到我的GitHub上大家可以自行去进行下载运行希望本文章对有帮助的朋友们能多多关注本专栏学习更多前端uni-app知识。然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面阅读此次项目实践文章能够学习到的技术 uni-app跨平台的应用开发框架基于vue.js可以一套代码同时构建运行在多个平台。 pnpm高性能、轻量级npm替代品帮助开发人员更加高效地处理应用程序的依赖关系。 vue3vue.js最新版本的用于构建用户界面的渐进式JavaScript框架。 typescriptJavaScript的超集提供了静态类型检查使得代码更加健壮。 piniavue3构建的Vuex替代品具有响应式能力提供非常简单的 API进行状态管理。 uni-ui基于vue.js和uni-app的前端UI组件库开发人员可以快速地构建跨平台应用程序。 如果是第一次接触uni-app并且想学习uni-app的朋友我是不建议直接从此次实战项目开始看起可以先阅读一下我以前的基础文章什么是uniapp如何开发uniapp按部就班的学习可以让学习变得更轻松更容易上手哦闲话少说我们直接开始今天的uni-app实战篇。
目录
uni-app项目创建
基于vscode开发uni-app项目
配置代码书写规范
安装uni-ui组件库
小程序数据持久化设置
配置拦截器请求和请求函数 uni-app项目创建
注意本次项目并没有采用HBuilderX进行项目开发这里仅仅是简单回顾介绍一下如何使用该工具进行创建项目而已如果已经了解过的朋友可以直接跳过此介绍直接进入下一个基于vscode开发uni-app项目的讲解。
当我们打开HBuilder X工具时在显示区域页面点击新建项目 点击新建项目之后会出现如下的弹框让我们进行一些基础配置配置说明如下 如果是第一次在uni-app中使用vue3创建项目的话需要安装一个插件。 点击HBuilder X的菜单栏中的工具选项选择插件安装安装如下的插件即可。 接下来我们就可以点击菜单栏中的运行选择运行到小程序模拟器然后选择使用微信开发者工具即可最终得到的画面如下 基础代码项目运行起来之后我们可以点击微信开发者工具当中的分离窗口按钮让运行窗口和微信开发者工具分离然后点击置顶窗口让我们的代码编辑器和运行窗口呈现在同一个页面上通过微信开发者工具的代码热更新在外面书写代码时就能实时看到具体的效果 基于vscode开发uni-app项目
开发uni-app项目我们也可以使用我们常用的vscode进行开发因为HBuilderX对TS的类型支持暂不完善有时候不能校验出属性值的错误所以此次项目我们采用我们熟悉的vscode进行开发如果想了解如何使用HBuilderX进行项目的开发可以看看我之前写的文章。
命令行创建项目uni-app官网 明确介绍了我们在创建uni-app项目的时候可以采用命令行的形式进行开发这样就不仅仅只依赖于HBuilderX这一个编辑器进行开发了我们也可以通过我们熟悉的vscode编辑器进行开发uni-app项目了。
这里我们采用能够创建ts项目的命令进行安装
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
可以看到我们的项目已经创建成功了 创建完成之后将项目拖到vscode编辑器当中执行 pnpm i 安装项目依赖 安装完依赖之后接下来我们需要在manifest.json中填写我们微信小程序中的appid属性值 接下来我们执行如下命令进行微信小程序的编译 pnpm dev:mp-weixin 可以看到我们的项目中出现了dist文件夹文件夹中就是我们微信小程序所需的相关文件 接下来我们打开微信小程序的开发者工具然后将我们生成的dist文件夹中的my-weixin进行导入 接下来我们就可以在vscode中进行项目的书写了 安装所需插件使用vscode开发uni-app项目需要我们先安装如下三个重要的插件才可以快速便捷的进行开发uni-app项目的开发其插件名称、相关作用及其相关配置如下
uni-create-view快速构建 uni-app 页面
uni-create-view插件安装完成之后需要进行设置一下点击该插件中的扩展设置 然后勾选创建同名的文件夹即可下面也可以设置创建与文件夹同步的文件这里我们采用默认的index名称即可当然看个人的选择 下面也可以选择生成文件的模板因为此项目的vue3所以这里我勾选vue3项目模板 uni-helperuni-app代码提示
安装完插件之后我们需要再在终端执行如下命令安装相关的类型声明文件
pnpm i -D types/wechat-miniprogram uni-helper/uni-app-types
安装完类型声明文件之后需要在tsconfig.json中进行如下配置 在vscode中使用uni-app创建的项目会出现json注释问题这里我们需要进行配置一下 这样我们就可以在json文件中设置注释了这里建议就设置manifest.json和pages.json两个文件 uniapp小程序扩展 鼠标悬停查看文档 因为上面的这些插件版本非常的新最近的也就在几个月前更新过一次如果你的vscode编辑器版本比较老的话可能会和这些新版本的插件不兼容的这里我们就需要重新更新一下vscode编辑器的版本博主这里也是更新的(原本的版本还是一年前的版本)更新vscode也是很简单点击左下角的设置按钮选择设置选项找到应用程序下的更新选项设置检查更新然后再点击菜单栏中的帮助选项下拉框当中就会出现检查更新的选项点击检查更新就会自动更新然后重启编辑器即可如果你的编辑器版本很高可以忽略 配置代码书写规范
配置代码规范的目的是为了保证代码的一致性、可读性和可维护性。通过统一的代码规范可以使团队成员之间的协作更加高效并且降低代码出错的概率。所以这里我们进行相关代码规范配置
配置eslintprettier安装如下命令进行下载相应的第三方包
pnpm i -D eslint prettier eslint-plugin-vue vue/eslint-config-prettier vue/eslint-config-typescript rushstack/eslint-patch vue/tsconfig
在项目根目录当中新建 .eslintrc.cjs 文件添加以下 eslint 配置
/* eslint-env node */
require(rushstack/eslint-patch/modern-module-resolution)module.exports {root: true,extends: [plugin:vue/vue3-essential,eslint:recommended,vue/eslint-config-typescript,vue/eslint-config-prettier,],// 小程序全局变量globals: {uni: true,wx: true,WechatMiniprogram: true,getCurrentPages: true,getApp: true,UniApp: true,UniHelper: true,App: true,Page: true,Component: true,AnyObject: true,},parserOptions: {ecmaVersion: latest,},rules: {prettier/prettier: [warn,{singleQuote: true,semi: false,printWidth: 100,trailingComma: all,endOfLine: auto,},],vue/multi-word-component-names: [off],vue/no-setup-props-destructure: [off],vue/no-deprecated-html-element-is: [off],typescript-eslint/no-unused-vars: [off],},
}在package.json进行如下配置
{script: {// ... 省略 ...lint: eslint . --ext .vue,.js,.ts --fix --ignore-path .gitignore}
}
接下来在终端运行 pnpm lint 至此我们配置的eslintprettier生效并在项目中正式启用了当我们在项目中随便一处代码打出一个空格编辑器提示错误然后我们点击错误给出修改的按钮 配置husky我们虽然已经集成好了我们代码校验工具但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了远程仓库中那这个规范就没什么用。所以我们需要强制让开发人员按照代码规范来提交。
要做到这件事情就需要利用husky在代码提交之前触发git hook(git在客户端的钩子)然后执行 pnpm run format 来自动的格式化我们的代码。 注意你要先进行 git init 创建本地库然后这个插件才会起作用。接下来执行如下命令安装 husky
在项目中初始化 husky 工具需要确保在执行如下命令之前您已经在项目根目录下初始化了 Git 仓库即已经执行了git init否则会报错。
pnpm dlx husky-init
在项目中安装并保存 lint-staged 包为开发依赖项
pnpm i -D lint-staged
配置package.json文件
{script: {// ... 省略 ...},lint-staged: {*.{vue,ts,js}: [eslint --fix]}
}
修改生成的 .husky/pre-commit 文件修改的内容如下
#!/usr/bin/env sh
. $(dirname -- $0)/_/husky.shpnpm run lint-staged
强制使用pnpm包管理工具团队开发项目的时候需要统一包管理器工具,因为不同包管理器工具下载同一个依赖,可能版本不一样,导致项目出现bug问题,因此包管理器工具需要统一管理我们可以在根目录创建 scripts/preinstall.js 文件添加下面的内容
if (!/pnpm/.test(process.env.npm_execpath || )) {console.warn(\u001b[33mThis repository must using pnpm as the package manager for scripts to work properly.\u001b[39m\n,)process.exit(1)
}
然后我们需要在 package.json 中配置scripts命令 如下
scripts: {preinstall: node ./scripts/preinstall.js
}
配置完命令之后当我们使用npm或者yarn来安装包的时候就会报错了。原理就是在install的时候会触发preinstallnpm提供的生命周期钩子这个文件里面的代码。验证安装axios如下 安装uni-ui组件库
uni-app有自己特有的一套uni-ui组件库所以这里我们开始使用该组件库进行创建项目其相关安装和配置命令在 官网 已经讲解的非常清楚了博主也在这里进行简单的讲解与使用吧。
终端执行如下命令进行安装uni-app组件库
pnpm i dcloudio/uni-ui
配置easycom使用 pnpm 安装好 uni-ui 之后需要配置 easycom 规则让 pnpm 安装的组件支持 easycom打开项目根目录下的 pages.json 并添加 easycom 节点
// pages.json
{easycom: {autoscan: true,custom: {// uni-ui 规则如下配置^uni-(.*): dcloudio/uni-ui/lib/uni-$1/uni-$1.vue}},// 其他内容pages:[// ...]
}
因为uni-ui使用sass来管理其样式因此在您使用 uni-ui 并进行主题自定义时建议安装 sass
pnpm i sass
安装配置完成之后我们随便复制uni-ui官网提供的ui组件进行使用验证如下表明引入成功 因为uni-ui在开发的时候是使用js进行开发的并没有涉及到ts所以uni-ui提供的组件库并没有对应的类型声明文件但是我们可以通过安装第三方包来对uni-ui的类型声明文件进行配置其对应的 包平台说明 已经对其讲解的非常清楚了博主还是对其使用讲解一下
安装如下命令安装第三方包
pnpm i -D uni-helper/uni-ui-types
配置 tsconfig.json确保 compilerOptions.types 中含有 dcloudio/types 和 uni-helper/uni-ui-types如下 配置完成之后接下来当鼠标悬停到ui组件标签的时候其对应的ts类型会自动识别比没有ts类型检测的相对来说更加安全 小程序数据持久化设置
因为我们的项目目前使用的是vue3的项目所以我们选择的状态管理工具是pinia如果不了解该状态管理工具可以参考我之前的文章探索PiniaVue状态管理的未来 接下来我们开始讲解如何在小程序中使用pinia。
Pinia Plugin PersistedState 是 Pinia 的一个插件它提供了状态持久化的功能。
pnpm i pinia pinia-plugin-persistedstate
安装完成之后我们在src文件夹下新建一个store文件夹在该文件夹下新建index.ts文件如下
import { createPinia } from pinia
import persist from pinia-plugin-persistedstate// 创建 pinia 实例
const pinia createPinia()
// 使用持久化存储插件
pinia.use(persist)// 默认导出给 main.ts 使用
export default pinia
在main.ts文件中我们进行导入 pinia 实例
import { createSSRApp } from vue
import App from ./App.vue
// 导入 pinia 实例
import pinia from ./storeexport function createApp() {// 创建 vue 实例const app createSSRApp(App)// 使用 piniaapp.use(pinia)return {app,}
}
今后如果想使用持久化的话只需要在相应的仓库进行如下的配置即可
{// 网页端配置// persist: true,// 小程序端配置persist: {storage: {getItem(key) {return uni.getStorageSync(key)},setItem(key, value) {uni.setStorageSync(key, value)},},},
}
配置拦截器请求和请求函数
接下来简单的对项目进行一个简单的拦截器请求的配置具体的参数设置可以参考官方文档 const baseURL 测试网址// 添加拦截器
const httpInterceptor {// 拦截前触发invoke(options: UniApp.RequestOptions) {// 1. 非 http 开头需拼接地址if (!options.url.startsWith(http)) {options.url baseURL options.url}// 2. 请求超时, 默认 60soptions.timeout 10000console.log(options)},
}
uni.addInterceptor(request, httpInterceptor)
uni.addInterceptor(uploadFile, httpInterceptor) 可以看我们发送get请求成功接下来我们可以设置请求头和token标识 请求函数的配置文件如下
/*** 请求函数* param UniApp.RequestOptions* returns Promise* 1. 返回 Promise 对象* 2. 获取数据成功* 2.1 提取核心数据 res.data* 2.2 添加类型支持泛型* 3. 获取数据失败* 3.1 401错误 - 清理用户信息跳转到登录页* 3.2 其他错误 - 根据后端错误信息轻提示* 3.3 网络错误 - 提示用户换网络*/
type DataT {code: stringmsg: stringresult: T
}
// 2.2 添加类型支持泛型
export const http T(options: UniApp.RequestOptions) {// 1. 返回 Promise 对象return new PromiseDataT((resolve, reject) {uni.request({...options,// 响应成功success(res) {// 状态码 2xx axios 就是这样设计的if (res.statusCode 200 res.statusCode 300) {// 2.1 提取核心数据 res.dataresolve(res.data as DataT)} else if (res.statusCode 401) {// 401错误 - 清理用户信息跳转到登录页const memberStore useMemberStore()memberStore.clearProfile()uni.navigateTo({ url: /pages/login/login })reject(res)} else {// 其他错误 - 根据后端错误信息轻提示uni.showToast({icon: none,title: (res.data as DataT).msg || 请求错误,})reject(res)}},// 响应失败fail(err) {uni.showToast({icon: none,title: 网络错误换个网络试试,})reject(err)},})})
}
配置完成之后当我们发起请求的时候只需要进行引入http然后调用即可
import { http } from /utils/http
// 测试请求
const getData async () {const res await http({method: GET,url: /home/banner,})console.log(res)
}
显示的结果是操作成功 这请求函数中我们也设置了失败情况出现的状况比如说当我们的小程序处于没网状态结果如下 本项目的一些基本功能的搭建就讲解到这下一篇文章将正式讲解项目的实际代码关注博主学习更多前端uni-app知识您的支持就是博主创作的最大动力
