小秀的博客

待更新~

暂不支持 H5 端、App 端，多端兼容时添加条件编译。

浏览器基于标准 js 扩充了window、document 等 js API；uni-app 为开发者提供了一系列基础组件，类似 HTML 里的基础标签元素，但 uni-app 的组件与 HTML 不同，而是与小程序相同，更适合手机端使用。所以 uni-app 的非 H5 端，一样支持标准 js，支持 if、for 等语法，支持字符串、数组、时间等变量及各种处理方法，仅仅是不支持浏览器专用对象。等，包括 css 里的元素选择器也会转，但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。

uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足，但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。在HBuilderX 中，点击「运行」编译出来的代码是开发环境，点击「发行」编译出来的代码是生产环境。运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用。平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。，不同平台在编译出包后已经是不同的代码，编译期判断编译期判断，即。

组件是vue技术中非常重要的部分，组件使得与ui相关的轮子可以方便的制造和共享，进而使得vue使用者的开发效率大幅提升，在项目的component目录下存放组件，uni-app只支持vue单文件组件（.vue 组件）组件可以使用「全局注册」和「页面引入」两种方式进行使用，使用分为三步：导入注册使用在整个应用的任何地方均可以使用uni.$on创建一个全局事件在整个应用的任何地方也均可以使用uni.$emit来触发全局事件，实现多组件见的数据通信。

把当前 uni-app 项目打包成微信小程序端，并发布上线。

【代码】【uni-app】代码规范配置。

这里接收两个配置项 getItem 和 setItem，代表持久化的 setter 和 getter。可以看到 persist 默认接收一个 boolean。表示是否开启持久化，而且默认持久化网页端。此时我们是小程序端，就需要在 storage 中进行配置持久化的地方。实现持久化，小程序端不兼容，需要替换持久化 API。

uni-app的编译器在webpack配置中特殊处理了这个 uni.scss，使得每个 scss 文件都被注入这个uni.scss，达到全局可用的效果。上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。是uni-app的主组件，所有页面都是在。

不同手机的安全区域不同，适配安全区域能防止页面重要内容被遮挡。可通过获取屏幕边界到安全区的距离。参考配置（组件自动引入）// 组件自动引入规则// 是否开启自动扫描 @/components/$1/$1.vue 组件// 以正则方式自定义组件匹配规则// uni-ui 规则如下配置// 以 Xtx 开头的组件，在 components 目录中查找全局组件类型声明。

当用户进入【我的】页面时，由框架自动预下载【会员模块】的分包，提升进入后续分包页面时的启动速度。分包一般是按照项目的业务模块划分，如会员模块分包，订单模块分包等。

页面运行过程中，各个阶段的回调函数就是“生命周期钩子函数”。uni-app完整支持Vue实例的生命周期，同时还新增及。

读取用户相册的照片或者拍照。小程序端需配置上传文件。表单组件的数据收集。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示，此时终端界面会有等待提示。key1=value2&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数。getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。： getCurrentPages() 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。

项目请先安装 sass 及 sass-loader，如在 HBuliderX 中使用，可跳过此步。这里我使用 vite，没有使用 vue-cli，因此不用做。这里我使用 npm 进行安装。

【代码】【uni-app】登录功能实现(二次封装uni.request)

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。默认情况下，当前循环项的索引用 index 表示，当前循环项用 item 表示。block 不是一个组件，只是一个包裹性的容器，不会在页面中做任何渲染。如果要一次性控制多个组件的展示与隐藏，可以使用一个。标签将多个组件包装起来，并。

小程序宿主不是浏览器，而是微信客户端，所以发送网络请求时不存在跨域问题。而且也没有ajax（基于浏览器的 XHR 对象）。登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名。

在导航传参时携带的参数，可以直接在 onLoad 中获取到。非tabBar页面指的是没有被配置为tabBar的页面。tabBar页面指的是被配置为tabBar的页面。delta 为后退的层级。默认为1， 可以省略。

tabbar 最少配置两个，最多配置五个。当渲染顶部 rabbar 时，不显示 icon，只显示文本。tabbar 在小程序中分为 顶部 tabbar 和 底部 tabbar。

注意：sitemap的索引提示是默认开启的，如需要关闭sitemap的索引提示，可在小程序项目配置文件 project.config.json的setting中配置字段checkSiteMap为false。rpx的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx)对本页面的窗口外观进行配置，页面中的配置项会覆盖 app.json 中 window 中的配置项。局部页面的.wxss样式仅对当前页面生效。

可以在全局或页面的json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离。小程序默认的触底距离是50x,在实际开发中，可以根据自己的需求修改这个默认值。上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。

比如div1、diw2只有div2绑定了touchstart事件，第一次放下一个手指在dv2上，触发了touchstart事件，这个时候，三个集合的内容是一样的，都包含这个手指的touch,然后，再放下两个手指一个在div1上，一个在div2上，这个时候又会触发事件，但changedTouches里面只包含第二个第三个手指的信息，因为第一个没有发生变化，而targetTouches包含的是在第一个手指和第三个在 div2上的手指集合，touches包含屏幕上所有手指的信息，也就是三个手指。

响应式设计（Responsive Design）是一种网页设计方法，使网页能够自适应不同设备的屏幕大小和分辨率，如手机、平板电脑、桌面电脑等。响应式设计的核心思想是通过灵活的网格布局、弹性图片和媒体查询，来动态调整页面布局，以适应不同设备的显示环境。媒体查询（Media Queries）是响应式设计的关键技术之一，通过 CSS 提供的@media规则，可以根据设备的特定条件（如屏幕尺寸、设备方向、分辨率等）应用不同的样式。

适配方式优点缺点使用场景百分比适配简单，适用于流式布局控制精度不高，不能适用于所有布局适用于简单的响应式布局Viewport 缩放快速实现基础的屏幕适配仅调整缩放比例，无法精确控制字体和元素大小用于确保页面内容在不同设备上缩放正常DPR 缩放保证高清屏幕下图片和图标清晰不适用于布局，需要配合其他方式使用针对高清屏设备的图片适配，如高分辨率图标rem 适配通过调整根元素字体大小实现整体自适应布局需要计算和设置字体大小，需处理复杂布局的适配适用于响应式页面，尤其是大范围布局的适配。

（视口）是指浏览器中用户可见的那部分网页内容的区域，简单来说，它是用户当前看到的网页的“窗口”区域。在不同的设备上，Viewport 的大小会有所不同。

Web App指的是移动端的Web浏览器，其实和PC端的Web浏览器没有任何区别，只不过Web浏览器所依附的操作系统不再是Windows和Linux了，而是iOS和Android,Web App采用的技术主要是，传统的HTML、JavaScript、CSS等Web技术栈，当然现在HTMLS也得到了广泛的应用。(不考虑缩放)，所以就出现一种错觉，以为CSS像素和设备像素就是1：1的对应关系，但是实际上CSS像素确是一个抽象的单位，具体含有多少个设备像素不是一定的。CSS 像素与物理像素的映射关系由设备的。