编译#ifdef #ifndef----夸端适配
uniapp工作原理—将vue.js的模版语法转换为各个平台所支持的原生组件,在通过引擎的渲染器将其渲染到各个平台上。
应用生命周期
https://zh.uniapp.dcloud.io/collocation/App.html#applifecycle
// 初始化完成时触发---全局只触发一次
onLanuch
// 从后台进入前台显示
onShow
// 从前台进入后台或者切换tab
onHide
// 等页面的生命周期
页面的生命周期
// 监听页面初始化
onInit
// 监听页面加载
onLoad
// 监听页面显示
onShow
// 监听页面初次渲染完成
onUload //
组件生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed
数据缓存
// 同步缓存
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
// 异步缓存
uni.setStorageSync(key,data)
try {
uni.setStorageSync('storage_key', 'hello');
} catch (e) {
// error
}
配置文件部分
// main.js 初始入口文件
// App.vue 应用配置
// pages.json 配置页面路由,导航台哦,选项卡等打包信息
路由和跳转
uni.navgateTo跳转页面 保留当前页面
uni.redirectTo销毁当前页 跳转到指定页面
uni.switchTab跳转至tab页面,并关闭其它所有非tabBar页面
uni.reLaunch销毁所有页面 跳转至指定页面
uni.navigateBack关闭当前页面返回上一页面
uniapp和vue和小程序之间的关系
UniApp 是一个基于 Vue.js 的跨平台开发框架,它可以将同一套代码编译成多个平台的小程序应用,开发者可以使用 Vue.js 的语法和特性来开发跨平台的应用程序,并且可以通过 UniApp 提供的统一规范和 API 来实现不同平台的功能。
说几个uniapp常用的组件
// view视图容器
// text文本
// button按钮
// image图片
// mapd地图
// swiper轮播图
// icon图标
tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
传递参数的形式
1. URL 参数:
将参数直接附加在 URL 的末尾,形成查询字符串的形式,例如 http://example.com/api?param1=value1¶m2=value2。
这种方式简单直接,适用于 GET 请求,但参数的长度有限制
2. body
3. 请求头 authorization
4.路径传参数
将参数直接嵌入到 URL 路径中,通常用于 RESTful 风格的 API 设计中,表示资源的唯一标识符。
例如 /api/users/:userId,其中 :userId 表示动态路径参数,可以在路由匹配时被实际的值替换。
Vue uni-app 小程序页面传递参数方式和区别
1. vue router-link router跳转 url拼接 query params
2.uniapp 小程序通过页面跳转后面拼接参数 globalData
uniapp打包发布时候如何处理请求跨域问题
打包app(android/ios)不考虑跨域,因为app内的数据请求不受限
打包小程序需要在小程序后台配置合法域名
打包H5需要在上线服务器搭代理或者打包后的项目上传至同源服务器
uniapp开发需要注意什么
1. 如果使用了自定义导航栏,打包小程序或app时需要预留顶部手机状态条高度
2. 注意uniapp中api在各个平台的兼容性
3. 为了兼容多端运行,建议使用flex布局
4. 使用uniapp开发小程序注意代码包限制2M大小,必要时可以使用分包
Uni-app在非h5端上运行为什么要在架构上分为逻辑层和视图层
保持一致的开发体验和性能表现
描述一下在Uniapp中如何实现动态路由
上传文件—uni.uploadFile(obj)
获取地理位置—uni.getLocation(ob)
如何监听页面滚动—onPageScroll—页面在垂直方向已滚动的距离(单位px)
Uni-app分包策略
为什么
微信小程序之所以需要分包,主要为了解决小程序官方限制了珠宝提及和总体积大小,如果应用体积超限,我们将不能发不到应用官方。
微信小程序总体大小限制为 20 MB,即所有的代码文件、图片资源文件、音频文件等在上传时不得超过 20 MB。
怎么做
第一步:pages.json
"subPackages":[
{
"root":"packageA", //分包的根目录
"pages":[{"path":"detail/index"}] //该分包下的所有页面
}
]
1. 使用subpackages进行分包路径声明,subpackages外的目录会被打到主包中
2. tabBar里面的路径必须放到主包里面
3. 不同的分包之间的资源不能相互应用,但都可以引用主包中的资源
第二部: manifest.json中加入 "optimization": {"subPackages": true}
好处
1。 提高首页加载速度;
2. 优化性能
3. 分包预下载
怎么分
根据功能模块
根据资源引用
分包预下载配置 进入小程序某个页面时,框架自动预下载可能需要的分包,提升进入后续分包页面时的启动速度。 在pages.json文件的preloadRule节点中配置分包预下载规则,预下载的行为,会在进入指定的页面时触发。
{
"preloadRule": { // 分包预下载规则配置
"packageA/detail/index": { // 触发分包预下载的页面路径
// network 表示在指定的网络模式下进行预下载
// 可选值为:all(不限网络) 和 wifi(仅 wifi 模式下进行预下载)
// 默认值为:wifi
"network": "all",
// packages 表示进入页面后预下载哪些分包
// 可以通过 root 或 name 指定预下载哪些分包
// 如果是 __APP__ 表示下载所有包
"packages": ["packageA"]
}
},
}