目录
通过本地储存setStorage和getStorage去实现数据传递
1.uniApp中如何进行页面跳转？
根据你业务情况，看是否需要保留历史数据
① uni.navigateTo 可以保留历史页面，可以点击左上角返回上一页。跳转的路径必须是绝对路径。
uni.navigateTo({ url:"/pages/detail/detail" //跳转的页面路径 })②uni.redirectTo 不保留历史页面。
④uni.reLaunch 关闭所有页面并跳转到指定页面，一般用于 用户的登录或者注销
⑤uni.navigateBack 返回上一页，可以返回指定层级的页面
⑥页面跳转时可以通过url传递参数。
页面跳转携带参数，如下： uni.navigateTo({ url:'/pages/detail/detail?id=123&name=uniapp' //携带参数跳转 }) 接收参数,如下： 在目标也得onload方法中通过option对象接收参数 onLoad(option){ console.log(option.id); //输出123 console.log(option.name); //输出uniapp }
2.uniApp中如何进行数据缓存？
uniApp中的数据缓存类似微信小程序中的本地缓存API，它是通过uni.setStorage和uni.setStorageSync进行数据缓存的，通过uni.getStorage和uni.getStorageSync进行数据读取的。
异步缓存数据
通过uni.setStarage去、将数据存储到本地缓存中。 uni.setStarage({ data:{ name:zhangsan, age:16, }, key:'userInfo', success:function(){ console.log('数据缓存成功'), } }) 通过uni.getStorage从本地缓存中异步获取数据 uni.getStorage({ key:'userInfo', success:function(){ console.log("已从本地缓存中获取到数据",res.data) } }) 通过uni.removeStorage从本地缓存中异步移出指定的key uni.removeStorage({ key:'userInfo', success:function(){ console.log('已从缓存中移出指定的key') } })
同步缓存数据
通过uni.setStorageSync进行同步缓存数据
通过uni.setStorageSync同步缓存数据 try{ uni.setStorageSync('userInfo',{ name:"zhangsan", age:18, }); }catch(e){ console.error("同步缓存失败"); }通过uni.getStorageSync进行数据获取
通过uni.getStorageSync进行数据获取 try{ const userInfo = uni.getStorageSync('userInfo'); if(userInfo){ console.log("数据已经获取:",userInfo); } }catch(e){ console.error("数据获取失败"); }通过uni.removeStorageSync进行数据清除
try{ uni.removeStorageSync("userInfo") }catch(e){ console.error("数据清除失败") }
清除所有的缓存
异步清除所有缓存
uni.clearStorage({ success:function(){ console.log('已清除所有缓存数据') } })同步清除所有缓存
try{ uni.clearStorageSync(); }catch(e){ console.error("清除缓存数据失败"); }
它们各自适用的场景
异步缓存数据适合体量大的数据或者非实时响应的场景还有就是后台处理或无关紧要的缓存，比如一些搜索历史， 用户偏好等。可以在用户登录的时候异步存储用户的数据或者缓存一些数据较大的数据对象，比如商品列表，用户设置等。
同步缓存适用于体量较小的数据或者需要实时响应的场景或者页面初始化，缓存的数据对页面初始化有决定的影响，比如判断用户是否登录，使用同步的话可以避免用户看到初始化闪烁或者延迟 。在操作按钮提交时立即存储一些小型数据，比如在表单提交时要保存表单的状态或是设置一些用户偏好。
3.uniApp如何实现页面间的数据传递？
URL路径中去获取数据
(一般用于传递数量的基本数据，比如用户的id或者用户的信息等，参数类型为字符串，且在url中可见)
最简单常见的就是通过在url路径中去获取到数据 通过uni.navigateTo()在url中去传递一些参数，在目标页面通过onLoad钩子函数中的option获取到数据值设置全局变量globalData
（适用于多个页面之间共享数据或数据体量较大的场景。）
通过getApp()去获取全局应用实例，设置全局变量globalData,利用它在不同的页面之间共享数据,然后在目标页中通过getApp()去获取到全局变量。
let app = getApp(); app.globalData={ userInfo:{ id:1, name:'zhangsan', age:18, } }; 在目标页中获取数据 let app = getApp(); console.log(app.globalData.userInfo.id) //1 console.log(app.globalData.userInfo.name) //zhangsan通过本地储存setStorage和getStorage去实现数据传递
（适合跨页面，甚至跨次启动传递数据，比如保存用户的登录信息，购物车数据等。它会在本地中缓存，生命周期长）
通过uni.setStorage进行数据存储，存储到缓存中，在别的页面可以通过uni.getStroage进行数据读取事件传递$emit / $on
(在组件或页面间通过事件总线传递数据，适合父子组件或者页面之间的传递,实时性比较高的场景)
通过$emit去触发 this.$emit("eventBus",{id:1,name:'zhangsan'}); 通过$on监听 this.$on("eventBus",(data)=>{ console.log(data.id); console.log(data.name); })
页面栈传递数据
通过uni.navigateBack和uni.getCurrentpages在页面栈中获取到之前的页面。
在A页面中跳到B页面
uni.navigateTo({
url:"/pages/B/B"
})
然后在B页面中进行操作
let pages = getCurrentPages(); //获取当前页面
let prevPage = pages[pages.length-2]; 获取上一级页面实例
prevPage.setData({
someData:'数据传回A页面'
});
uni.navigateBack();
然后在A页面中获取数据，通过onShow中获取数据的更新
onShow(){
console.log("this.someData")
}
4.在uniApp中如何实现下拉刷新和上拉加载更多？
通过onPullDownRefresh和onReachBottom实现下拉刷新和上拉加载。
下拉刷新
(当用户希望获取到最新数据时，如刷新列表或者更新界面内容时)
1.启动下拉刷新功能，通过在json配置文件中，开启下拉刷新的功能 { "enablePullDownRefresh":true } 2.监听下拉刷新事件，通过在页面中的onPullDownRefresh钩子函数中编写业务逻辑，重新请求数据。 3.数据请求完成后再通过uni.stopPullDownRefresh去请停止下拉刷新的动作。上拉加载更多
(用户滚动到页面底部，且有更多的内容需要加载，比如分页数据、商品列表)
1.监听上拉触底的事件：在页面的onReachBootom钩子函数中编写业务代码，通过hasMoreData去判断是否还有更多数据，如果为true则有，如果为false则无。 2.检查是否还有更多数据：如果已经加载完所有数据，则将hasMoreData的值改为false,则不会再触发加载。export default { data() { return { items: [], page: 1, hasMoreData: true }; }, onPullDownRefresh() { // 下拉刷新，重新加载第一页数据 this.page = 1; this.hasMoreData = true; this.loadData().then(() => { uni.stopPullDownRefresh(); }); }, onReachBottom() { // 上拉加载更多 if (this.hasMoreData) { this.loadMoreData(); } }, methods: { loadData() { // 模拟加载第一页数据 return new Promise((resolve) => { setTimeout(() => { this.items = ['item1', 'item2', 'item3']; resolve(); }, 1000); }); }, loadMoreData() { // 模拟加载更多数据 setTimeout(() => { this.page += 1; const moreItems = [`item${this.page * 3 + 1}`, `item${this.page * 3 + 2}`, `item${this.page * 3 + 3}`]; if (moreItems.length > 0) { this.items = [...this.items, ...moreItems]; } else { this.hasMoreData = false; } }, 1000); } } }
5.uniApp中如何实现页面的登录授权？
uniAPP在登录授权的时候通常会涉及有用户的授权，登录凭证管理（如获取到token）,页面权限的控制，可以通过登录授权流程确保用户的信息后才能访问或者执行操作。
1.创建用户登录页面，可以通过账号密码或者微信这种第三方授权进行登录
2.调用登录的接口将数据传给后端，后端会进行校验，校验成功后会返回一个登录凭证给前端，前端只需要用uni.setStorageSync去进行缓存。
3.每次进入需要登录授权的页面时，可以在onLoad或者onShow中去检查用户是否已登录，如果用户还未登陆则重定向到登录页面。
4.对于需要授权的Api请求，需要在请求头中携带token，以便于后端验证用户身份。
5.如果用户凭证未过期，通常会用本地缓存的token自动登录；如果在调用接口时后端返回401(未授权)，则说明token已经过期，此时需要引导用户重新登陆
6.在全局请求拦截中如果检测到了401(未登录)，则自动跳转到登录页面进行登录。
7.uniApp除了常规账号密码登录，也可以使用微信支付宝第三方授权登录，可以用这些平台提供的SDK进行快捷登录，避免了手动输入账号和密码。
6.uniApp中如何实现表单的提交和验证？
1.用form标签包裹表单元素
2.在data中去定义表单数据，通过v-model去绑定数据
3.通过validateForm方法进行表单验证,该方法会对表单数据进行遍历，并根据规则去判断字段是否满足条件，如果满足就返回true,如果不满足就返回false
4.通过submitForm去提交表单，提交前会通过validateForm先表单验证，验证成功了才可以进行相关的API操作，比如uni.requset提交数据到后端。
5.uniApp提供了uni.showToast作为用户提示，向用户展示结果信息是成功还是失败。
7.uniApp如何实现页面的分享到朋友圈的功能？
在uniApp中实现页面分享到朋友圈的功能会用到微信小程序的分享功能。uniApp专门提供了一个专门的生命周期函数 onShareAppMessage来配置页面的分享内容。包括分想给好友和朋友圈的功能
1.使用onShareAppMessage来配置分享标题，路径和图片。
2.分享微信朋友圈的功能需要在6.7.2以上的一个版本自动支持。
3.通过页面路径传递参数，实现个性化的分享链接。
4.可以自主选择使用自定义触发按钮分享内容，通过调用uni.share()进行分享。
5.可以通过页面路径的参数，统计分享后页面被打开的情况，比如在onLoad中获取分享的参数并统计。
8.uniApp如何实现图片预览功能？
在uniApp中通过previewImage实现图片的预览
1.HTML：绑定点击事件，点击图片时调用previewImage。
2.JavaScript：在methods方法中，使用uni.previewImage传递当前图片和图片列表。
3.css：自定义图片布局及样式适应它的页面设计
9.uniApp如何获取到设备信息？
通过uni.getSystemInfo和uni.getSystemInfoSync来获取设备信息，包括系统版本，设备型号，屏幕尺寸等等。
10.uniApp如何获取用户地理位置信息？
1.获取地理位置信息：
在uniApp中可以通过uni.getLocation去获取用户的地理位置信息，同时异步方法，调用时会需要用户授权，用户同意后即可获取用户的地理位置信息。
2.参数说明：
type:返回坐标类型，默认是wgs84(国际通用GPS坐标)，也可以设置为gcj02(国测局坐标系)
success：成功的回调函数，参数包括
latitude: 纬度
longitude: 经度
speed: 移动速度，单位是米/秒，可能为null
fail：失败的回调函数，当用户拒绝授权或者是获取地理位置失败时调用
3.提前获取用户授权
实际在使用中，获取用户位置信息会弹出一个授权对话框，可以在页面加载时请求授权，避免影响用户体验。
11.uniApp中的支付功能如何实现？
uniApp当中支付通常依赖于各个平台（如微信小程序，支付宝小程序）提供的支付接口。
微信支付的基本流程：
1.后端生成支付订单：后端通过微信支付接口生成预支付订单，并返回prepay_id。
2.前端调起支付：前端拿到prepay_id后，通过uni.requestPayment发起支付。
3.支付结果处理：用户完成支付后，微信会返回支付结果，前端进行处理。
后端生成支付订单：
在前端调用微信支付前，后端需要与微信支付服务器通信，生成一个prepay_id,它会调用微信支付的统一下单接口，比如商品信息，订单号，金额，用户的openId等参数，微信返回prepay_id,前端需要使用它来调起支付。
前端调起微信支付：
通过uni.requestPayment方法调起微信支付。
支付结果处理：
支付成功后，success回调函数会被触发，前端可以根据支付结果进行相关操作，比如跳转到支付成功页面或者更新订单状态。支付失败呢，fail回调函数会被触发，前端可以进行错误处理或者提示用户重新尝试
支付状态确认：
支付完成后，建议在后端再次确认支付状态，因为前端支付成功并不代表支付真实完成，最后通过后端查询支付状态接口，确保支付已经完成。后端可以通过调用微信支付的查询订单接口，查询支付结果并更新订单状态
12.uniApp的生命周期
uniApp应用的生命周期有：
onLaunch：初始化完成时触发（只触发一次）
onShow：uniApp显示时触发
onHide：uniApp隐藏时触发
onError：uniapp报错时触发
uniApp页面的生命周期：
onInit：监听页面初始化
onLoad:监听页面加载
onShow：监听页面显示
onReady:监听页面初始化渲染完成
onHide：监听页面隐藏
onUnload：监听页面卸载
13.uniAPP中的涉及商品物流运输模块怎么实现
物流信息运输的输入：在用户购买时，需要填写收货地址，可以使用uniApp内置的地址选择器组件，或者通过调用第三方接口（微信，支付宝的地址api）来获取用户地址。
物流信息的展示：订单生成后可以通过调用物流公司提供的物流信息查询接口，展示商品的物流状态，大多数物流公司提供API,可以通过订单号和快递单号查询物流状态，获取到的物流数据可以在前端展示，比如物流跟踪信息、运输状态、预计送达时间等等。
第三方物流平台接口对接：可以通过与物流服务提供商（如顺丰、京东、菜鸟）的API接口对接，通过提交快递单号获取物流进度更新。常用物流查询平台，如快递100 提供标准的物流查询API,开发者可以集成这个API来查询物流信息。
物流信息的推送：可以使用消息推送服务或者uniCloud等平台,在物流发生状态变化时向用户推送更新，比如“商品已发货”、“商品派送中”、“商品已签收”等。
订单状态管理：将订单状态与物流信息关联，前端页面根据不同的物流状态，动态显示订单进度，如在订单页展示“待发货”、“已发货”、“运输中”、“已送达”等不同状态。
通过这些方式，uniApp可以实现一个完整的物流运输模块，确保用户能够实时获取商品物流状态。
扫一扫
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
