已解决 uni-app 相关问题 不需要发帖了

发布于 1周前 作者 gougou168 来自 Uni-App

已解决 uni-app 相关问题 不需要发帖了

已解决

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在页面跳转、网络请求、条件编译以及本地存储等方面的常见用法。希望这些示例能为其他开发者提供实用的参考。如果您有其他具体的问题或需要进一步的帮助,请随时提问。

回到顶部