一、uniapp与微信小程序的区别。
| 标题1 | uniapp | 微信小程序 |
|---|---|---|
| 开发语言 | vue.js | js和微信开发者工具 |
| 平台支持 | 多端 | 微信 |
| 生态环境 | 不仅支持微信小程序，还有自己的特有 | |
| 开发环境 | vscode,hbuildx | 微信开发者平台 |
| 开发成本 | 低，一套多端 |
二、uni-ui组件引入，在uniapp使用
"easycom": { //扫描相关包，并进行替换。
"autoscan": true,
"custom": {
"^uni-(.*)":"@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue", // 匹配components目录内的vue文件
"^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
}
}
三、ts类型声明文件。
- 虽然
uni-ui官方并没有类型声明文件，但我们在项目中还配置了uni-ui的TS组件类型支持，可以校验组件的属性，类型更安全，书写时也有代码提示。实现类型支持其实也就多了两个步骤：
- 安装
@uni-helper/uni-ui-type第三方类型声明文件。 - 再配置
tsconfig.json，将类型声明文件添加到types数组就可以了。
"types": ["@dcloudio/types", "@uni-helper/uni-ui-types"]
- @types/wechat-miniprogram 微信的
- @uni-helper/uni-app-types 增强
- @uni-helper/uni-ui-type uni-ui
四、pinia的使用，持久化存储插件pinia-plugin-persistedstate 插件官网
注意多端不同，网页端，小程序端不一样，所以用uniapp的。
四、对请求拦截器的封装和拦截了。
- 为什么使用请求拦截器？ 在我们发送请求时，首先对请求进行拦截，对地址进行拼接完整，设置对应的请求超时，添加对应的响应头，设置token请求标识。
- 请求拦截器的使用。
// 添加拦截器
const httpInterceptor = {
// 拦截前触发
invoke(options: UniApp.RequestOptions) {
// 1. 非 http 开头需拼接地址
if (!options.url.startsWith('http')) {
options.url = baseURL + options.url
}
// 2. 请求超时, 默认 60s
options.timeout = 10000
// 3. 添加小程序端请求头标识
options.header = {
...options.header,
'source-client': 'miniapp',
}
// 4. 添加 token 请求头标识
const memberStore = useMemberStore()
const token = memberStore.profile?.token
if (token) {
options.header.Authorization = token
}
},
}
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)
- 对uni.request进行封装，为什么要对其进行封装，因为uni.request,不是promise的，使用不是很方便。
- 完整的使用过程，基本就是这个思路，具体在进行改动。
五、项目中全局通用组件的封装。（无需引入）
- 1、首先我们先写好一个组件，然后在page.json文件里，进行配置，也就是如果系统，碰见一XTx,开头的文件，从对应的目录进行查找替换。 配置如下：
组件ts配置。没深究，只知道是这样用。
六、泛型的使用。
- 一个看着比较复杂的例子。
const subTypes = ref<(SubTypeItem & { finish?: boolean })[]>([])
首先后边的括号内是放的是初值[],前面<>里是泛型,()[],代表的是一个某类型的数组。在定义类型的时候，我们并没有定义这个finish属性，所以我们可以这样子添加一个属性（合并ts类型），用这个符号，为什么加问号可选参数，这个shubtype复用来，有些地方需要，有些不要（或者就是服务器回来的数据并没有这个数据）
七、骨架屏加载的好处。不重要，基本需求。就像页面懒加载，必用，没什么难度。
八、flex布局的实现。
九、各端的模块不同业务代码。
- 登录，h5,小程序，通用登录。
十、分包加载模块和普通页面的区别。
一般页面都是在pages下，而分包，是在pages同级，创建对应的目录。
- 按模块管理页面，方便项目维护。
- 减少主包体积，用到的时候再加载分包，属于性能优化解决方案。
十一、业务
普通页，和taBbar的区别，（由于tabbar页面，没有返回上一页的按钮，而我们在项目使用的时候，可能是从普通页面跳转过去，如果不改，是没有的。tabber过去，是没有返回按钮。）
十二、跨端兼容问题。
uniapp官网 跨端视口，不同端口的视口是不一样的。
