小秀的博客

但是要注意一点，安卓的某些机型会有兼容性问题，导致模态框不会从底部弹出，而是像其他card一样从侧面弹出。这种情况我们也只能尽可能添加额外才做使其类似与 IOS 的模态框。还有一种模态，也是从下向上弹出，但是是全屏的。现在弹出的模态就是全屏的了。

默认会将布局文件是将与它在同一个目录的所有文件，包括下级目录的文件，全都配置成。一个项目里，也可以有多个布局文件，布局文件只对和它同级或下级文件生效。底下的和刚才不同，刚才的布局文件里使用的是。利用它，将一些相关的文件，放在一起。然后将顶部的按钮，配置到了最外层的。从哪里都能跳过去，它就属于。这样做显然不对，正确的做法是。底下给各个页面都添加上了。页，是可以随意跳转到非。目录，专门用来放各个。页在导航栏上，都会有。

layout.js/*** 导航栏 Logo 组件*//*** 导航栏按钮组件*/return (</Link>return (<Stacktitle: '', // 默认标题为空headerTitleAlign: 'center', // 安卓标题栏居中animation: 'slide_from_right', // 安卓使用左右切屏headerTintColor: '#1f99b0', // 导航栏中文字、按钮、图标的颜色。

都是可以匹配上的，也就说它的最后一个参数是不确定的，可以是任意值。文件是个动态路由文件。

是用于管理应用中的页面堆栈的。然后 IOS 可以看到顶部出现了 header ，标题显示的是 index ，然后左右切换页面也会出现动画效果。点击链接后，页面切换时最好是有动画效果。页面一般都有头部，里面有页面的标题之类的东西。但是安卓端顶部的标题，显示到最左边，而不是中间。切换页面，感觉没有什么动画效果。就是一个占位符，各个页面，都会渲染在它里面。布局的意思，就是所有页面都归它管，而且它是。的文件，我们可以在里面做各种配置。这个名字是固定的，前面必须有一个。然后就可以看到动画和居中的标题。

【代码】【React Native】路由跳转。

过去开发，所使用的路由都是。但是这个东西使用起来非常困难，配置无比繁琐。Expo，为了简化操作，就基于开发了。用起来就要简单的多了，配置也相对容易很多很多。不过因为的底层还是，所以也有很多些时候，我们会去官方文档里找一些需要的配置。

默认就是显示出来的，它还会根据设备的主题色，自动切换是黑色还是白色的。所以一般来说并不需要设置它。只有在某些全屏页面，不想显示状态栏的时候，可以这么写，加上。甚至还自带了图片缓存，默认设置的是使用磁盘缓存。所以，如果遇到 rn 和 expo 中都有的，可以优先使用 expo 中的。顶部那些电量、信号、时间等信息。可以控制它的颜色，以及是否显示。如果想增加里面的按钮，就往这个数组里，按照这个格式不断的加东西就行了。，其他的完全一样，也是可以正常显示的。用起来，只需要把引用改成。组件 用来显示图片的。

它是一个专门用来渲染长列表的组件，用它可以实现按需渲染。当你滚动时，就动态加载新元素，回收不可见的元素。无论这个元素是否在屏幕的可见区域内，这样就会造成了大量的性能浪费。以下这种直接渲染在数据量少的情况下可以正常使用，但是一旦数据量非常大，可以看到字体很大的情况下，文本溢出，但是不支持滚动（因为。也是上下滚动的，这两个之间是有冲突的。了，它自己就可以实现滚动，就不要再额外加上。提示我们，不要把相同方向的虚拟列表，放到。不是上下滚动，而是横向的左右滚动，与。，就会变成横向滚动了。

一般做开发，都会将接口地址配置到环境变量里。如果你用手机真机等局域网设备访问，就改成电脑的。要不然就得自己很麻烦的处理。封装请求文件之前，先去安装下。利用它，可以非常简单的拼接。建的项目里，也可以使用。在项目根目录新建一个。

这里有一个需要注意点，onPress={onReload} onReload 要么直接写，要么写成箭头函数的形式。，按钮的样子已经出来了。这个按钮，点击它，按住不放的时候，它会有个透明度的改变。这三个组件，使用方式都是一样的，只是在点击后，显示的有点小区别而已。是函数的直接调用，不论是否点击，都会直接执行。，需要传参时写为箭头函数。

如果调试工具里，没有显示正确的数据。可能是调试工具，连接到之前运行的 App 上去了。可以在模拟器里或者真机里，将运行的 App 退出，然后按 i、a 或者扫码重新运行。这样子，页面上的元素，默认会从上向下排列。除此外，还有些其他属性的默认值不同，但用法都是和。这里有个需要注意的问题，如果用手机真机来预览，在扫码后，点击按钮，会发现没有任何反应。咱们的接口是运行在电脑上的，解决方法就是要将请求地址，改成电脑的。里，这种值，是与设备像素密度无关的逻辑像素点，千万不要加上。里的排版布局，默认是使用。

在 rn 中，View，Text，并不是HTML里的标签。它们都是原生组件，而且正因为是原生组件，所以在 安卓和 IOS 的显示不尽相同。StatusBar，它是用来控制显示屏幕顶部的电量、网络信息的。View，可以当成HTML里的div来用，也就是用来布局页面用的。可以用它来包住其他的一些组件。但是View不提供滚动，如果内容超出屏幕范围，就没法显示出来了。我们现在做一些尝试。在View的下面，再增加一个View。return里，只返回了一个元素。如果返回了<></>

对于移动端应用来说，开发 Android 应用使用的语言有 java 和 kotlin，开发 ios 应用使用的语言有 obj-c 和 Swift。因此，我们使用 react-native 编写一套代码进行跨端开发。这里还有一个问题，可能报错：Uncaught Error: java.io.OException: Failed to downloadremote update。然后通过 npm start 启动项目，看到二维码使用 expo go 扫描即可构建启动项目。

• 逻辑层（JS线程）：运行JavaScript代码处理业务逻辑和数据，使用独立的JS引擎（iOS为JavaScriptCore，Android为V8），与视图层完全隔离，避免阻塞渲染。• 视图层（WebView线程）：负责渲染WXML/WXSS，使用WebView组件实现页面布局和样式，不直接操作DOM，而是通过虚拟DOM进行差异比对更新。• 小程序将WXML转换为虚拟DOM树，逻辑层数据变更时生成新虚拟DOM，通过Diff算法比对差异后仅更新变化部分，减少渲染开销。• 缓存策略：预加载常用资源，利用。

之前在vite.config.ts文件的plugins同时配置了uni()和vue()，注释掉vue()后就好了。

问题提示： 微信开发工具的调试器加载错误，从任务栏打开工具可能导致该问题，请不要从任务栏启动工具。调试器控制台显示为空，刷新出不来。解决方法很简单：我们只需要将微信开发者工具从底部任务栏取消固定就可以了。然后关闭重新打开即可。

在 uni-app 中使用 axios 会报错：Error: Adapter ‘http‘ is not available in the build。解决方法：为 axios 添加 adapter 适配器。

通过 navigateTo 的。

待更新~

暂不支持 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样式仅对当前页面生效。