uniapp学习笔记
有一定HTML,CSS,vue基础,记录方便自己记忆学习,自己觉得很经常用不会错的就没记
文件-新建-项目
工具-安装插件
编译成微信小程序段代码
设置开发者路径,安装微信开发者工具目录
开启服务端口,微信开发者工具中开启
设置-通用设置-安全
├─pages 业务页面文件存放的目录
│ └─index
│ └─index.vue index页面
├─static 存放应用引用的本地静态资源的目录(注意：静态资源只能存放于此)
├─unpackage 非工程代码，一般存放运行或发行的编译结果
├─index.html H5端页面
├─main.js Vue初始化入口文件
├─App.vue 配置App全局样式、监听应用生命周期
├─pages.json 配置页面路由、导航栏、tabBar等页面类信息
├─manifest.json 配置appid、应用名称、logo、版本等打包信息
└─uni.scss uni-app内置的常用样式变量
如何查看小程序APPID
登录小程序平台【mp.weixin.qq.com】->开发->开发设置->开发者ID，即可查到AppID。如下图：
在manifest.json中微信小程序配置ID,就可以在手机查看了
uni-app 和原生小程序开发区别
开发区别
uni-app 项目每个页面是一个 .vue 文件，数据绑定及事件处理同 Vue.js 规范：
-
属性绑定
src="{ { url }}"升级成:src="url" -
事件绑定
bindtap="eventName"升级成@tap="eventName"，支持（）传参 -
支持 Vue 常用指令
v-for、v-if、v-show、v-model等
其他区别补充
-
调用接口能力，建议前缀
wx替换为uni，养成好习惯，支持多端开发。 -
里面写页面布局,相当于写HTML分类似 pages.json页面配置全局配置
{ "pages": [ // 'pages' 数组中的第一项表示应用的启动页面。参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" // 导航栏标题文本 } }, { "path": "pages/my/my", "style": { "navigationBarTitleText": "我的" } } ], "globalStyle": { "navigationBarTextStyle": "white", // 全局设置以将导航栏标题字体颜色更改为'black'或'white' "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#26BB9B", // 全局设置以更改导航栏标题背景颜色 "backgroundColor": "#F8F8F8" }, "tabBar": { "selectedColor": "#26BB9B", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tabs/home_default.png", "selectedIconPath": "static/tabs/home_selected.png" }, { "pagePath": "pages/my/my", "text": "我的", "iconPath": "static/tabs/user_default.png", "selectedIconPath": "static/tabs/user_selected.png" } ] }, "condition": { // 模式配置，仅在开发期间生效 "current": 0, // 当前激活的模式（在'list'数组中的索引） "list": [ { "name": "searchCity", // 模式名称 "path": "pages/index/index", // 启动页面（您要调试的页面） - 必填 "query": "name=searchCity" // 启动参数，在页面的onLoad函数里面得到。 } ] }, "uniIdRouter": {} }condition
启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。
属性说明：
属性 类型 是否必填 描述 current Number 是 当前激活的模式，list节点的索引值 list Array 是 启动模式列表 list说明：
属性 类型 是否必填 描述 name String 是 启动模式名称 path String 是 启动页面路径 query String 否 启动参数，可在页面的 onLoad 函数里获得 注意： 在 App 里真机运行可直接打开配置的页面，微信开发者工具里需要手动改变编译模式，如下图：
index.Vue
不记得属性可以把鼠标悬停在标签可以出现官网链接直接抵达
命令行创建 uni-app 项目
# 通过 git 从 gitee 克隆下载 git clone -b vite-ts https://gitee.com/dcloud/uni-preset-vue.git常见问题
-
运行
npx命令下载失败，请尝试换成手机热点重试 -
换手机热点依旧失败，请尝试从国内备用地址下载
-
在
manifest.json文件添加 小程序 AppID 用于真机预览 -
运行
npx命令需依赖 NodeJS 环境，Node.js
-
node.js安装一键式安装
>测试安装是否成功，按下【win+R】键，输入cmd，打开cmd窗口
输入：node -v // 显示node.js版本
npm -v // 显示npm版本
>显示版本说明安装成功
环境配置找到安装位置新建两个文件夹node_global和node_cache
>创建完毕后，使用管理员身份打开cmd命令窗口
npm config set prefix "路径\node_global"
npm config set prefix D: node.js\node global
npm config set cache "路径\node cache"
npm config set cache D: node.js\node cache
配置环境变量
此电脑-单击右键-属性-高级系统设置-环境变量
点击新建
变量名:NODE_PATH
变量值为:node_global路径\node_modules
D:\node.js\node_global\node_modules
在node_global下加一个文件夹node_modules
编辑用户变量中的Path编辑,将node_global路径放在AppData\Roaming\npm上面
然后在系统变量Path编辑添加%NODE_PATH%
或者系统变量Path编辑添加;%NODE_PATH%
测试是否安装成功
npm install express -g//(管理员命令)出现以下说明成功
下载安装pnpm(pnpm比npm快)
npm install express -g pnpm刷新环境变量 新开cmd，输入命令提示符
set PATH=C: (刷新环境变量)必须关闭这个cmd，再新开个cmd，输入
echo %PATH%(重新读取path的配置文件)此时再直接输入pnpm-v即可成功
-
运行
git命令需依赖 Git 环境，Git 下载地址
下载依赖包下方打开命令行终端
编译和运行 uni-app 项目
-
安装依赖
pnpm install(管理员身份运行否则报错)
右键HBuilderX管理员身份运行,开启终端之后会多一个node_modules文件夹
-
编译成微信小程序
pnpm dev:mp-weixin会多一个dist文件夹
-
导入微信开发者工具
提示
编译成 H5 端可运行
pnpm dev:h5通过浏览器预览项目。用 VS Code 开发 uni-app 项目
为什么选择 VS Code?
HbuilderX对TS类型支持暂不完善
VSCode对TS 类型支持友好，熟悉的编辑器
用 VS Code 开发配置
项目采用 Vue3 + TS 开发 uni-app 项目，所以需要分别安装 Vue3 + TS 插件 和 uni-app 插件。
安装 Vue3 + TS 插件
注意事项
没开发过 Vue3 + TS 项目的小伙伴注意，需要先安装 Vue3 和 TS 的插件，并完成以下配置
-
安装 Vue Language Features (Volar) ：Vue3 语法提示插件
-
安装 TypeScript Vue Plugin (Volar) ：Vue3 的 TS 插件
-
工作区禁用 Vetur 插件(Vue2 插件和 Vue3 插件冲突)
-
工作区禁用 @builtin typescript 插件（禁用后自动开启 Vue3 的 TS 托管模式）
查看 Vue3 官方文档
需禁用的插件
安装 uni-app 插件
-
安装 uni-app 开发插件
-
uni-create-view ：快速创建 uni-app 页面,要进入改设置,否则只创建.vue
-
-
uni-helper ：uni-app 代码提示,Ctrl+I可以唤醒代码提示
-
uniapp 小程序扩展 ：鼠标悬停查文档,出现属性官方文档可以直接到不懂的,不用一个一个找
新建页面
不设置uni-create-view不会有my的同名文件夹
-
TS 类型校验
-
管理员身份快捷图标右键,打开vscode用Ctrl+`打开命令行终端
-
安装 类型声明文件
pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types -
package.json中代码
"devDependencies": { "@dcloudio/types": "^3.3.2", "@dcloudio/uni-automator": "3.0.0-3080720230703001", "@dcloudio/uni-cli-shared": "3.0.0-3080720230703001", "@dcloudio/uni-stacktracey": "3.0.0-3080720230703001", "@dcloudio/vite-plugin-uni": "3.0.0-3080720230703001", "@uni-helper/uni-app-types": "^0.5.12", "@vue/tsconfig": "^0.1.3", "miniprogram-api-typings": "^3.12.1", "typescript": "^4.9.4", "vite": "4.0.4", "vue-tsc": "^1.0.24" }
-
管理员身份打开Windows PowerShell输入,最后选y,(如果进入终端后报错pnpm不能在系统运行)
-
配置
tsconfig.json -
// 类型声明文件 "types": [ "@dcloudio/types", // uni-app API 类型 "miniprogram-api-typings", // 原生微信小程序类型 "@uni-helper/uni-app-types" // uni-app 组件类型 ] }, "vueCompilerOptions": { // 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags` "nativeTags": ["block", "component", "template", "slot"] // "experimentalRuntimeMode": "runtime-uni-app" }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] } -
JSON 注释问题
-
设置文件关联，把
manifest.json和pages.json设置为jsonc -
其他json不能写注释
-
-
-
CSS 支持 | uni-app官网
选择器
目前支持的选择器有：
选择器 样例 样例描述 .class .intro 选择所有拥有 class="intro" 的组件 #id #firstname 选择拥有 id="firstname" 的组件 element view 选择所有 view 组件 element, element view, checkbox 选择所有文档的 view 组件和所有的 checkbox 组件 ::after view::after 在 view 组件后边插入内容，仅 vue 页面生效 ::before view::before 在 view 组件前边插入内容，仅 vue 页面生效 注意：
-
在
uni-app中不能使用*选择器。 -
微信小程序自定义组件中仅支持 class 选择器
尺寸单位
uni-app支持的通用 css 单位包括 px、rpx- px 即屏幕像素
- rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。
nvue 还不支持百分比单位。
App 端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px。
注意此时不支持 rpx
style绑定以及随机色
v-bind:class
可以传给 v-bind:class 一个对象，实现动态地切换 class。
也可以在对象中传入更多字段来动态切换多个 class。
:class指令也可以与普通的 class 共存。
vue
v-if和v-else
中间不允许加除空格回车以外的,可加v-else-if
v-if 和 v-show 区别
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下，
v-show就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换，来控制元素的显示和隐藏。v-for
v-for 指令可以实现基于一个数组来渲染一个列表。
v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。- 第一个参数
item则是被迭代的数组元素的别名。 - 第二个参数，即当前项的索引
index，是可选的。 - :key="index"(index唯一)
- 第一个参数
v-bind
动态地绑定一个或多个属性
- v-bind缩写为":"
v-html
支持HTML标签渲染
v-on
v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’
自定义组件
在uni-app工程根目录下的
components目录，创建并存放自定义组件：项目-右键新建目录
components-新建组件可以自定义组件名称
一个名为pubTitle的自定义组件
{{time}} {{title}} {{smalltile}} {{list}} {{user}} pages中的部分代码
自定义组件效果
父组件
当一个子组件改变了一个
prop的值时，这个变化也会同步到父组件中所绑定。//父组件//子组件---弹出框样式--- 轮播图效果代码
//直接放在一个自定义组件方便看//indicator-dots 是否显示面板指示点 //indicator-color 指示点颜色 //indicator-active-color 选中指示点颜色 //circular 相当于可以循环滚动 autoplay 自动轮播切换 创建了一个名为 "gundong" 的组件，其中包含一个轮播图（swiper）和一些图片。
在模板中，使用了 v-for 指令来遍历 Images 数组，并为每个图像创建一个 swiper-item。
使用了 @tap 事件监听器来绑定点击事件，并调用 on 方法来预览图像。
在脚本部分，定义了名为 "Images" 的数组，其中包含三个图像对象。
on 方法使用 uni.previewImage 方法来预览图像，传递了需要预览的图像链接列表和当前点击的图像链接。
使用了 SCSS 编写样式规则，设置了轮播图的宽度和高度。
这段代码的作用是在页面上展示一个包含轮播图的滚动视图，并实现了点击图像预览的功能。
页面和路由(目前只学了怎么用,参数没学)
uni.navigateTo
保留当前页面，跳转到应用内的某个页面，使用
uni.navigateBack可以返回到原页面。参数 类型 必填 默认值 说明 平台差异说明 url String 是 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数 animationType String 否 pop-in 窗口显示的动画效果，详见：窗口动画 App（uni-app x 不支持） animationDuration Number 否 300 窗口动画持续时间，单位为 ms App（uni-app x 不支持） events Object 否 页面间通信接口，用于监听被打开页面发送到当前页面的数据。2.8.9+ 开始支持。 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） uni.redirectTo
关闭当前页面，跳转到应用内的某个页面。
参数 类型 必填 说明 url String 是 需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2' success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） uni.reLaunch
关闭所有页面，打开到应用内的某个页面。
注意： 如果调用了 uni.preloadPage 不会关闭，仅触发生命周期
onHide参数 类型 必填 说明 url String 是 需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，如果跳转的页面路径是 tabBar 页面则不能带参数 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） uni.switchTab
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
注意： 如果调用了 uni.preloadPage 不会关闭，仅触发生命周期
onHide参数 类型 必填 说明 url String 是 需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） 跳转dome uni.navigateBack
关闭当前页面，返回上一页面或多级页面。可通过
getCurrentPages()获取当前的页面栈，决定需要返回几层。参数 类型 必填 默认值 说明 平台差异说明 delta Number 否 1 返回的页面数，如果 delta 大于现有页面数，则返回到首页。 animationType String 否 pop-out 窗口关闭的动画效果，详见：窗口动画 App（uni-app x 不支持） animationDuration Number 否 300 窗口关闭动画的持续时间，单位为 ms App（uni-app x 不支持） success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） <返回上一页 route和onLoad的区别
route不支持小程序
onLoad支持小程序
交互反馈
显示消息提示框。
参数 类型 必填 说明 平台差异说明 title String 是 提示的内容，长度与 icon 取值有关。 icon String 否 图标，有效值详见下方说明，默认：success。 image String 否 自定义图标的本地路径（app端暂不支持gif） App、H5、微信小程序、百度小程序、抖音小程序（2.62.0+） mask Boolean 否 是否显示透明蒙层，防止触摸穿透，默认：false App、微信小程序、抖音小程序（2.47.0+） duration Number 否 提示的延迟时间，单位毫秒，默认：1500 position String 否 纯文本轻提示显示位置，填写有效值后只有 title属性生效，且不支持通过 uni.hideToast 隐藏。有效值详见下方说明。App success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） icon 值说明
值 说明 平台差异说明 success 显示成功图标，此时 title 文本在 小程序平台最多显示 7 个汉字长度，App仅支持单行显示。支付宝小程序无长度无限制 error 显示错误图标，此时 title 文本在 小程序平台最多显示 7 个汉字长度，App仅支持单行显示。支付宝小程序、快手小程序、抖音小程序、百度小程序、京东小程序、QQ小程序不支持 fail 显示错误图标，此时 title 文本无长度显示。 支付宝小程序、抖音小程序 exception 显示异常图标。此时 title 文本无长度显示。 支付宝小程序 loading 显示加载图标，此时 title 文本在 小程序平台最多显示 7 个汉字长度。支付宝小程序不支持 none 不显示图标，此时 title 文本在 小程序最多可显示两行。{{title}} 跳转my -