uniapp的内容和vue网页开发会有很多区别，但是都是基于vue开发的，大多数业务还是在vue打交道，但是这些uniapp的特殊的知识点也是要掌握好的。
基本配置
创建uniapp项目
npx degit dcloudio/uni-preset-vue#vite-ts 项目名 ：用于创建一个uniapp项目
npm run dev:mp-weixin ：用于给项目打包成微信小程序的打包格式，接着直接将dist中相应的包导入到相应的微信开发者工具里面即可。
加上ts类型校验：npm i -D @types/wechat-miniprogram @uni-helper/uni-app-types
ts类型校验
接着在tsconfig.json配置文件中配置好这个类型校验：
{"extends": "@vue/tsconfig/tsconfig.json","compilerOptions": {"sourceMap": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]},"lib": ["esnext", "dom"],"types": ["@dcloudio/types","@types/wechat-miniprogram",//加上"@uni-helper/uni-app-types"]//加上},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
uni-ui的支持
安装uni-helper/uni-ni-types：
npm i -D @uni-helper/uni-ni-types
再把@uni-helper/uni-ni-types加上以上的type配置项中去。
"types": ["@dcloudio/types","@types/wechat-miniprogram",//加上"@uni-helper/uni-app-types","@uni-helper/uni-ni-types"]//加上},pinia配置
持久化配置：要先下载pinia持久化插件：
npm i pinia-plugin-persistedstate
插件默认使用 localStorage 实现持久化，小程序端不兼容，需要替换持久化 API。
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// 模块统一导出
export * from './modules/member'main.ts：
import { createSSRApp } from "vue";
import App from "./App.vue";
import pinia from './stores'
export function createApp() {const app = createSSRApp(App);app.use(pinia)return {app,};
}要多端配置持久化，要在相应的store的ts文件中，配置持久化规则：
小程序端配置持久化persist，要专门配置下getItem和setItem：（在defineStore中配置此参数）
// TODO: 持久化persist: {storage:{getItem(key){return uni.getStorageSync(key)},setItem(key,value){uni.setStorageSync(key,value)}}}
封装promise请求函数和请求过滤器
import { useMemberStore } from "@/stores/modules/member"
import { BaseRequestUrl } from "./properties"
const baseURL = BaseRequestUrl//添加拦截器
const httpInterceptor = {invoke(option:UniApp.RequestOptions){//非http开头的请求需要拼接地址if(!option.url.startsWith('http')){option.url = baseURL + option.url}//请求超时，默认是六十秒option.timeout = 30000console.log(option)//添加小程序请求头标识option.header = {...option.header, //如果有原来的请求头，保留原来的请求头后再加上小程序请求头'source-client':'miniapp'}//添加token请求头标识const memberStore = useMemberStore()const token = memberStore.profile?.tokenif(token){option.header.Authorization = token}}
}
uni.addInterceptor('request',httpInterceptor)
uni.addInterceptor('uploadFile',httpInterceptor)interface Data<T>{code:string,message:string,data:T
}export const sendRequest = <T>(option:UniApp.RequestOptions) => { //指定泛型，该泛型是有效数据的类型return new Promise<Data<T>>((resolve,reject) => { uni.request({...option,success(res){if(res.statusCode >= 200 && res.statusCode < 300){ //如果是2xx，说明是resolve(res.data as Data<T>) //后端响应过来的有效数据}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 Data<T>).message || '请求错误'})}},fail(err){ //响应失败，一般是网络问题uni.showToast({icon:'none',title:'网络错误'})reject(err)}})})
}其实就是小程序端使用uni.request来发送请求，自定义了一个promise，内部使用了uni.request函数，用于发送请求。uni.request返回的数据中，是属于后端返回的数据的是res中的data，所以要返回的就是res.data。Data接口是后端返回的数据类型的格式。token的信息也封装在其中，登录后获取token之后，token信息会储存在pinia中，每次发送请求的时候，token会自动被读取到请求头中。
baseUrl是服务器的url地址或者微服务网关的url地址。
关于pages.json
在uniapp中，每个页面都是要注册在pages.json文件中。
在pages.json中，配置页面的路由地址及窗口表现、默认窗口表现、tarbar
代码案例：
{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index",//可以在此处修改一些小程序的页面信息"style": {"navigationBarTitleText": "首页"}},{"path" : "pages/my/my","style" : {"navigationBarTitleText" : "我的"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#2ff8d0","backgroundColor": "#F8F8F8"},"tabBar": {"selectedColor": "#2ff8d0",//tarbar选中的时候的文字的颜色指定"list": [{"pagePath": "pages/index/index",//tabar的路由"text": "首页",//tabar下方的文字"iconPath": "static/tabs/home_default.png",//tabar的图标"selectedIconPath": "static/tabs/home_selected.png"//tabar被选中的时图标},{"pagePath": "pages/my/my","text": "我的","iconPath": "static/tabs/user_default.png","selectedIconPath": "static/tabs/user_selected.png"}]},
}pages参数
pages参数是一个数组，数组中的元素就是一个一个的页面的信息，数组中的第一个元素代表的页面就是应用首页。
path就是页面的路由地址，之后关于路由跳转页面的时候，都是使用这个配置的路由地址。
style是页面的一些窗口表现配置。style用于设置每个页面的状态栏、导航条、标题、窗口背景色等。在pages参数外还有一个参数叫globalStyle，用于配置全局窗口表现，每个页面的实际的窗口表现会先找style，如果没有的话再找globalStyle。
常见的样式如下：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #F8F8F8 | 导航栏背景颜色（同状态栏背景色） |
| navigationBarTextStyle | String | black | 导航栏标题颜色及状态栏前景颜色，仅支持 black/white |
| navigationBarTitleText | String | 导航栏标题文字内容 | |
| navigationStyle | String | default | 导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 |
至于具体的样式，见
pages.json 页面路由 | uni-app官网
tarbar
tarbar是用于配置一级导航栏，即底部的那个导航栏。
常用配置属性：
| 属性 | 类型 | 必填 | 默认值 | 描述 |
|---|---|---|---|---|
| color | HexColor | 是 | tab 上的文字默认颜色 | |
| selectedColor | HexColor | 是 | tab 上的文字选中时的颜色 | |
| backgroundColor | HexColor | 是 | tab 的背景色 | |
| list | Array | 是 | tab 的列表，详见 list 属性说明，最少2个、最多5个 tab | |
| position | String | 否 | bottom | 可选值 bottom、top，用于控制一级导航栏是显示在底部还是顶部 |
tarbar参数中的list数组，是一级导航栏里面的tab导航的信息的数组，tar导航的顺序和数组中的一致，tarbar最多配置五个tab，最少配置两个tab。
tab的配置属性：
| 属性 | 类型 | 必填 | 说明 |
|---|---|---|---|
| pagePath | String | 是 | 页面路径，必须在 pages 中先定义 |
| text | String | 是 | tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标 |
| iconPath | String | 否 | 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标 |
| selectedIconPath | String | 否 | 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效 |
| visible | Boolean | 否 | 该项是否显示，默认显示 |
| iconfont | Object | 否 | 字体图标，优先级高于 iconPath |
具体参数信息见官网文档：pages.json 页面路由 | uni-app官网
分包
pages.json中还可以进行分包配置，分包可以让一些页面和主要的页面分开下载，即进入程序的时候，会默认下载主包中的页面信息，而分包中的信息，在进入指定页面的时候，此分包才会开始下载页面信息，如此可以大大优化小程序的下载和启动速度。
分包中的页面不要放在src下的pages目录中，要自定义一个和pages目录同级的新目录，代表一个分包，将分包页面放在此分包的目录中。
例：若有个分包叫pagesMember，此分包下有两个页面：settings.vue，profile.vue
{//组件自动导入的规则"easycom": {//是否开启自动扫描"autoscan": true,//以正则的方式自定义组件匹配规则"custom": {// uni-ui 规则如下配置"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"}},"pages": [//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationStyle": "custom", //隐藏默认导航栏"navigationBarTitleText": "首页"}},{"path": "pages/my/my","style": {"navigationStyle": "custom","navigationBarTextStyle": "white","navigationBarTitleText": "我的"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},// 设置 TabBar"tabBar": {"color": "#333","selectedColor": "#27ba9b","backgroundColor": "#fff","borderStyle": "white","list": [{"text": "首页","pagePath": "pages/index/index","iconPath": "static/tabs/home_default.png","selectedIconPath": "static/tabs/home_selected.png"}{"text": "我的","pagePath": "pages/my/my","iconPath": "static/tabs/user_default.png","selectedIconPath": "static/tabs/user_selected.png"}]},//分包信息配置"subPackages": [{"root": "pagesMember","pages": [{"path": "settings/settings","style": {"navigationBarTitleText": "设置"}},{"path": "profile/profile","style": {"navigationStyle": "custom","navigationBarTextStyle": "white","navigationBarTitleText": "个人信息详情页面"}}]}],//分包预下载规则"preloadRule": {"pages/my/my": {"network": "all", "packages": ["pagesMember"] }}
}subPackages中，root是此分包中页面的的根目录，也就是以上自定义的那个pagesMember目录。
preloadRule就是指定，进入了哪个页面的时候，会下载哪个分包。参数名就是触发下载的页面的路径，参数值中的network是代表在什么网络环境下下载分包，packages是指定要加载哪些分包。
具体使用见：pages.json 页面路由 | uni-app官网
常用api
api比较多，我列举几个我觉得看了有用的api。例如上传文件、选择媒体资源上传到服务器、页面路由跳转、弹出窗口提示等。
uni.uploadFile()
此方法用于将文件数据上传到服务器中，请求方式是post，其中 content-type 为 multipart/form-data。
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | String | 是 | 开发者服务器 url |
| fileType | String | 见平台差异说明 | 文件类型，image/video/audio |
| file | File | 否 | 要上传的文件对象。 |
| filePath | String | 是（files和filePath选其一） | 要上传文件资源的路径。 |
| name | String | 是 | 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 |
| header | Object | 否 | HTTP 请求 Header, header 中不能设置 Referer。 |
| timeout | Number | 否 | 超时时间，单位 ms |
| formData | Object | 否 | HTTP 请求中其他额外的 form data |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
uni.uploadFile({url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址filePath: tempFilePaths[0],name: 'file',formData: {'userInfo': userinfo.value},success: (uploadFileRes) => {console.log(uploadFileRes.data);}});其中一定要注意的是，formData参数的参数值会变成一个json字符串请求给后端，后端可以在controller的方法的参数列表上，添加一个String的参数，在其前面的@RequestParam注解中，加上指定在formData中设置的key的名称，这个参数上就会接受到指定的formData中的相应的参数信息。
@PostMapping(value="/upload")public ResultData<RoleContentPo> voiceMsgSend(@RequestParam("userInfo") String str, @RequestParam("file") MultipartFile file){UserInfo userInfo = JSONObject.parseObject(str,UserInfo.class);//其他操作
}关于下载文件，没什么要特殊说明的，见文档：uni.uploadFile(OBJECT) | uni-app官网
uni.chooseMedia()
用于用户从自己的相册中选择图片或者启动拍照功能获取图片。
| 参数名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| count | Number | 9（注意：ios不可大于9） | 否 | 最多可以选择的文件个数 |
| mediaType | Array.<string> | ['image', 'video'] | 否 | 文件类型 |
| sourceType | Array.<string> | ['album', 'camera'] | 否 | 图片和视频选择的来源 |
| maxDuration | Number | 10 | 否 | 拍摄视频最长拍摄时间，单位秒。时间范围为 3s 至 30s 之间 |
| sizeType | Array.<string> | ['original', 'compressed'] | 否 | 仅对 mediaType 为 image 时有效，是否压缩所选文件 |
| camera | String | 'back' | 否 | 仅在 sourceType 为 camera 时生效，使用前置或后置摄像头 |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
代码案例：
uni.chooseMedia({count: 9,mediaType: ['image','video'],sourceType: ['album', 'camera'],maxDuration: 30,camera: 'back',success(res) {console.log(res.tempFiles)}
})res.tempFiles是选择的图片/视频的临时文件的路径的数组，其中的元素就是一个个临时文件的路径。
路由跳转
uni.navigateTo()
保留原有页面，跳转到指定的页面。要跳转到原来的页面，使用uni.navigateBack()即可跳回原来的页面。
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| url | String | 是 | 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数 |
| success | Function | 否 | 接口调用成功的回调函数 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
uni.navigateTo({url: '/pages/login/login?id=1&name=uniapp'
});路由路径后面带的参数可以被下个页面的onLoad函数的参数中获取，当然也会作为query参数传递。
uni.redirectTo()
和uni.navigate使用方法一致，区别是，uni.redirectTo()是关闭当前页面，跳转到指定页面，类似一个替换的效果。
uni.reLaunch()
使用也是和以上两个一致，区别是，它使用后，会关闭此前的所有的页面，跳转到指定页面。
uni.switchTab()
以上的四个api都是只能用于打开非tab页面，要想打开tab页面，要使用uni.switchTab，使用方法和以上四个是一致的。只是页面路径要是tab页面。并且使用了该方法后会关闭所有的非tab页面。
uni.navigateBack()
用于回退到之前的页面。
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| delta | Number | 否 | 1 | 返回的页面数，如果 delta 大于现有页面数，则返回到首页。 |
| success | Function | 否 | 接口调用成功的回调函数 | |
| fail | Function | 否 | 接口调用失败的回调函数 | |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
当然，更多的知识点和使用方法，在官网文档中才是最详细的，uniapp官网：uni-app官网
![[OS] mmap() 函数的参数及其作用](https://i-blog.csdnimg.cn/direct/0d2b9eeb46084a5689fa3934f9d93aee.png)
