1 回复
当然,针对uni-app的相关问题,虽然您已经表示已经解决,但为了展示一些常见的uni-app开发实践及代码示例,我将分享几个关键的代码片段,这些可能是在开发过程中经常遇到的情况,希望能对其他开发者有所帮助。
1. 页面跳转与参数传递
在uni-app中,可以使用navigateTo
方法进行页面跳转并传递参数:
// 在当前页面
uni.navigateTo({
url: '/pages/detail/detail?id=' + item.id + '&name=' + encodeURIComponent(item.name),
success: function(res) {}
});
// 在目标页面 detail.vue 中接收参数
onLoad: function(options) {
const id = options.id;
const name = decodeURIComponent(options.name);
console.log('Received ID:', id, 'Name:', name);
}
2. 请求网络数据
使用uni.request进行网络请求:
uni.request({
url: 'https://api.example.com/data',
method: 'GET',
success: (res) => {
console.log('Data received:', res.data);
this.setData({
list: res.data.list
});
},
fail: (err) => {
console.error('Request failed:', err);
}
});
3. 使用条件编译实现多平台适配
uni-app支持条件编译,可以根据平台编写特定代码:
<template>
<view>
<text>#ifdef H5</text>
<text>This is H5 specific code.</text>
<text>#endif</text>
<text>#ifdef APP-PLUS</text>
<text>This is App-specific code.</text>
<text>#endif</text>
</view>
</template>
<script>
export default {
methods: {
#ifdef H5
handleH5Event() {
console.log('Handling H5 event');
},
#endif
#ifdef APP-PLUS
handleAppEvent() {
console.log('Handling App event');
},
#endif
}
}
</script>
4. 本地存储
使用uni.setStorageSync和uni.getStorageSync进行本地数据存储和读取:
// 存储数据
uni.setStorageSync('userInfo', {name: 'John Doe', age: 30});
// 读取数据
const userInfo = uni.getStorageSync('userInfo');
console.log('User Info:', userInfo);
以上代码示例展示了uni-app在页面跳转、网络请求、条件编译以及本地存储等方面的常见用法。希望这些示例能为其他开发者提供实用的参考。如果您有其他具体的问题或需要进一步的帮助,请随时提问。