一、 命令行创建 uni-app 项目 vue3 + ts 版
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
创建其他版本可查看：uni-app 官网
二、编译和运行 uni-app 项目
- 安装依赖
pnpm install - 编译成微信小程序
pnpm dev:mp-weixin - 导入微信开发者工具
温馨提示: 在 manifest.json 文件添加小程序 appid 方便真机预览
三、用 VS Code 开发 uni-app 项目
四、为什么选择 VS Code？
- VS Code 对 TS 类型支持友好，前端开发者熟悉的编辑器 👍
- HbuilderX 对 TS 类型支持暂不完善，期待官方完善 👀
五、用 VS Code 开发配置
安装 uni-app 插件
- uni-create-view ：快速创建 uni-app 页面
- uni-helper uni-app ：代码提示
- uniapp 小程序扩展 ：鼠标悬停查文档
TS 类型校验
- 安装类型声明文件
pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types - 配置
tsconfig.json
JSON 注释问题
- 设置文件关联，把
manifest.json和pages.json设置为jsonc
// 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"]
}
注意：原配置 experimentalRuntimeMode 现无需添加。
六、开发规范
- 页面文件遵从Vue单文件规范
- 组件标签靠近小程序规范
- 数据绑定及事件处理同Vue.js规范，同时补充了App以及页面的生命周期
- 为兼容多端运行，建议使用flex布局进行开发
七、全局配置文件
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar
5.1 globalStyle（全局样式）
| 属性 | 类型 | 默认值 | 描述 | 平台差异说明 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #F8F8F8 | 导航栏背景颜色（同状态栏背景色） | APP与H5为#F8F8F8，小程序平台请参考相应小程序文档 |
| navigationBarTextStyle | String | black | 导航栏标题颜色及状态栏前景颜色，仅支持 black/white | 支付宝小程序不支持，请使用 my.setNavigationBar |
| navigationBarTitleText | String | 导航栏标题文字内容 | ||
| navigationStyle | String | default | 导航栏样式，仅支持 default/custom | 微信小程序 7.0+、百度小程序、H5、App（2.0.3+） |
导航栏：开启下拉刷新、下拉背景、下拉样式
下拉背景: backgroundColor
开启下拉刷新: enablePullDownRefresh: true|false
下拉样式: backgroundTextStyle
七、配置 tabBar
| 属性 | 类型 | 必填 | 默认值 | 描述 | 平台差异说明 |
|---|---|---|---|---|---|
| color | HexColor | 是 | tab 上的文字默认颜色） | ||
| selectedColor | HexColor | 是 | tab 上的文字选中时的颜色 | ||
| backgroundColor | HexColor | 是 | tab 的背景色 | ||
| borderStyle | String | 否 | black | tabbar 上边框的颜色，可选值 black/white，也支持其他颜色值 | App 2.3.4+ 、H5 3.0.0+ |
| list | Array | 是 | tab 的列表，详见 list 属性说明，最少2个、最多5个 tab | ） | |
| position | String | 否 | bottom | 可选值 bottom、top | top仅微信小程序 |
八、页面布局以及样式
-
尺寸单位：px、rpx
rpx即响应式px，一种根据屏幕宽度自适应的动态单位，以750宽的品目为基准，750rpx恰好为屏幕宽度，屏幕变宽，rpx实际显示效果会等比放大
-
在
uni-app中不能使用*选择器 -
使用 sass ;插件 uni-scss
九、生命周期
- 应用生命周期函数
| 函数名 | 说明 |
|---|---|
| onLauch | 当uni-app初始化完成时触发（全局只触发一次） |
| onShow | 当uni-app启动，或从后台进入前台显示 |
| onHide | 当uni-app从前台进入后台 |
| onError | 当uni-app报错时触发 |
- 页面生命周期
| 函数名 | 说明 |
|---|---|
| onInit | 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad |
| onLoad | 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参 |
| onShow | 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 |
| onReady | 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发 |
| onHide | 监听页面隐藏 |
| onUnload | 监听页面卸载 |
| onResize | 监听窗口尺寸变化(App、微信小程序、快手小程序) |
| onPullDownRefresh | 监听用户下拉动作，一般用于下拉刷新 |
| onReachBottom | 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据 |
| onTabItemTap | 点击 tab 时触发，参数为Object，具体见下方注意事项(微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序) |
十、下拉刷新
onPullDownRefresh
关闭： uni.stopPullDownRefresh()
十一、上拉加载
onReachBottom函数可以监听是否到底部
在 pages 里面设置 onReachBottomDistance: 0，默认触底距离
十二、数据缓存
- setStorage
- setStorageSync
- getStorage
- getStorageSync
- getStorageInfo
- getStorageInfoSync
- removeStorage
- removeStorageSync
- clearStorage
- clearStorageSync
十三、图片上传预览
chooseImage(object)
微信小程序从基础库 2.21.0 开始，wx.chooseImage 停止维护，请使用 uni.chooseMedia
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| count | Number | 否 | 最多可以选择的图片张数，默认9 |
| sizeType | Array | 否 | original 原图，compressed 压缩图，默认二者都有 |
| extension | Array | 否 | 根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤 |
| sourceType | Array | 否 | album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项 |
| crop | Object | 否 | 图像裁剪参数，设置后 sizeType 失效 |
| success | Function | 是 | 成功则返回图片的本地文件路径列表 tempFilePaths |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行 |
