uniapp基础学习笔记01

因工作原因无限期停更

本博客根据黑马教程学习uniapp

黑马程序员前端项目uniapp

• 本文涉及的软件请自行安装

一、技术架构

二、创建项目

2.1 Hbuilder创建

2.2 插件安装

在Hbuilder的上方菜单找到工具 ——>插件安装，在安装新插件中找到uni-app（Vue3）编译器插件

2.3 微信开发者工具配置与运行

• 找到工具下面的设置并找运行配置下的微信开发者工具路径
  
  然后我们点击运行——>运行到运行到小程序模拟器
  若报错解决不了 请参考黑马程序员教程7分40秒

2.3.1 简单修改基础页面

2.4 pages.json和tabBar

2.4.1 pages.json与tabBar配置

2.4.2 案例

2.5 通过命令行创建项目

• 使用命令行下载uniapp的项目

npx degit dcloudio/uni-preset-vue#vite-ts uni-app-vue3-ts

• 其中我的项目名称是 uni-app-vue3-ts
• 
  然后我们将下载好的文件导入Hbuilder
  
  然后我们使用下面四种其中一种就行

npm i
yarn
cnpm i 
pnpm i

2.6 命令行运行项目

我们这里找到上图中框选的 dev:mp-weixin，并且在命令行中输入

npm run dev:mp-weixin

即可将项目运行为微信小程序的模式

这样即是运行完成，然后我们更改相关文件看看能否热更新

2.6.1 命令行总结

2.7 uniapp与原生开发的区别

2.7.1 uniapp做轮播图和点击放大

2.7.2 预览

三、开发环境配置

3.1 vscode插件安装

3.1.1 uni-create-view

我们安装好这个插件之后就可以右键创建uniapp页面

我们在pages右键，创建uni-app页面 然后会弹出图中最上方的一个输入框，其中第一个my是我的页面名字，我的是页面里面的一个标题

3.1.2 uni-helper

该插件作用为代码提示等

3.1.3 uniapp小程序扩展

该插件是用于鼠标悬停有便捷的文档说明

3.2 ts类型校验

3.2.1 校验类型的安装与配置

npm i -D @types/wechat-miniprogram @uni-helper/uni-app-type

执行以上命令安装ts校验工具
并在tsconfig.json文件里面做声明

图中，右边是tsconfig.json在配置了文件之后，左边的标签就会变为绿色

3.3 json注释问题

上图中我们配置了manifest.json和pages.json，让这两个文件能够写注释其中如果搜索文件关联搜索不到，可以搜索Association，进行相关的配置即可。

注意：在项目中只有这两个文件可以给注释，避免代码编译时造成不必要的报错


以上只是黑马教程，在此我的vsode仍然会报错，解决办法如下

点击右下角的json在出来的选择框里选择 jsonc 即可

四、小兔鲜儿项目

4.1 拉取项目

git clone http://git.itcast.cn/heimaqianduan/erabbit-uni-app-vue3-ts.git heima-shop

4.2 配置文件并运行

这里我们进行了微信小程序appid配置

然后进行环境的安装

npm i

然后找到dev:mp-weixin并运行

4.3 基础框架

4.3.1 uni-ui 组件库

找到命令并在控制台执行安装

npm i @dcloudio/uni-ui

• 配置uni-ui组件
• 我们提取上图中的配置easycom 部分，来进行组件的一个配置

配置图

• 4.3.2 uni-ui小测试

• 使用了一个小的组件来进行小测试

• 4.3.3 安装uni-ui 的一个小插件（不影响代码编写可省略）

uni-ui小插件

上面这个链接是uni-ui的一个小插件网页
找到npm下载命令并进行相应的配置

使用命令安装

npm i -D @uni-helper/uni-ui-types

安装好之后，在tsconfig.json文件中进行相关的配置

我们就能看到鼠标放在uni-ui组件上面就会显示对应的一个标签名字

4.3.2 持久化配置

• 实际操作

我们找到src\stores\modules\member.ts目录下的menber.ts
将持久化的代码改为：

    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          uni.setStorageSync(key, value)
        },
      },
    },

并且在我的页面中进行数据测试

4.3.3 请求和上传文件拦截器

• 拦截器

• 拦截器配置及测试

这一步和vue中的axios配置很相像

在微信开发者工具中我们调用一次接口就输出一次options

• 在每个请求上面添加token

• 在刚才的代码基础上进行修改，让请求的时候都添加上token

4.3.4 封装Promise请求函数

• 实操

这里就只输出code、msg、result三个，因为在拦截器那里做了筛选

4.3.5 获取数据失败

• 存在的回调函数

• 无网环境测试fail

无网环境的时候就进入fail，并且设置了弹出一个框提示网络环境异常

• 以上测试的一个统计

4.4 首页

4.4.1 自定义导航栏

• 代码来源可以去这个项目的一个网址去copy一下

小兔鲜儿开发文档
因为机型问题，需要设置一个安全高度

• 实操

4.4.2 通用轮播图组件