uni-app 官方推荐的文档质量不佳

理解你对uni-app官方文档质量的担忧。确实，有时候官方文档可能不够详尽或者示例代码不够直观。不过，作为IT专家，我们可以通过实际代码案例来更好地理解和应用uni-app框架。以下是一些常见的uni-app开发场景及其对应的代码示例，希望能帮助你更高效地开发应用。

1. 页面导航与参数传递

在uni-app中，页面导航通常使用navigateTo或redirectTo方法。以下是一个简单的页面导航及参数传递示例：

// 在当前页面进行导航
uni.navigateTo({
    url: '/pages/detail/detail?id=' + item.id,
    success: function(res) {
        console.log('导航成功');
    },
    fail: function(err) {
        console.error('导航失败', err);
    }
});

// 在目标页面接收参数
onLoad: function(options) {
    const itemId = options.id;
    console.log('接收到的参数:', itemId);
}

2. 网络请求

uni-app提供了统一的网络请求APIuni.request，以下是一个简单的GET请求示例：

uni.request({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: (res) => {
        console.log('请求成功', res.data);
    },
    fail: (err) => {
        console.error('请求失败', err);
    }
});

3. 数据绑定与事件处理

在uni-app中，可以使用Mustache语法进行数据绑定，并通过v-on指令或简写@来监听事件：

<template>
    <view>
        <text>{{message}}</text>
        <button @click="changeMessage">点击我</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello, uni-app!'
        };
    },
    methods: {
        changeMessage() {
            this.message = '你点击了按钮!';
        }
    }
}
</script>

4. 生命周期钩子

uni-app页面组件支持多个生命周期钩子，如onLoad、onShow、onHide等，以下是一个简单的示例：

export default {
    onLoad() {
        console.log('页面加载');
    },
    onShow() {
        console.log('页面显示');
    },
    onHide() {
        console.log('页面隐藏');
    }
}

通过上述代码示例，你可以看到uni-app的基本用法和一些常见功能的实现方式。希望这些示例能帮助你更好地理解和应用uni-app框架。如果你有更具体的问题或需求，欢迎随时提问。