uniapp自学笔记（三）动态获取数据

完成列表页和详情页

---

ok，我们目前已经完成了首页，如果我们只是为了制作一个文章系统的话，首页+列表页+详情页已经足够满足我们的使用了。
所以我们开始在pages中创建这俩页面。

现在pages.json路由中增加这俩：

{
    "path": "pages/common/list/list",
    "style": {
        "navigationBarTitleText": "列表页"
    }
},
{
    "path": "pages/common/article/article",
    "style": {
        "navigationBarTitleText": "详情页"
    }
},

前面我们首页中的icon列表是一个静态页面页，我们需要连接才能跳转到列表页面。

这里我们需要用到uniapp内置的跳转方法：

//跳转方法
goPage(){
    //保留原页面，打开到新页面，最多可以保留10层
    uni.navigateTo({
        url: '../../common/list/list'
    });
    //关闭原页面，跳转到新页面
    uni.redirectTo({
        url: '../../common/list/list'
    });
    //关闭所有页面，跳转到新页面
    uni.reLaunch({
        url: '../../common/list/list'
    })
    //跳转到tabBar页面，并关闭其他所有非tabBar页面。
    uni.switchTab({
        url: '../../tabBar/API/API'
    });

    // 返回前面的页面
    // 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
    // 此处是A页面
    uni.navigateTo({
        url: 'B?id=1'
    });
    // 此处是B页面
    uni.navigateTo({
        url: 'C?id=1'
    });
    // 在C页面内 navigateBack，将返回A页面
    uni.navigateBack({
        delta: 2
    });
}

这里我们先把页面之间的跳转关系完成，完成后，我们会在页面之间传递参数，再通过ajax完成动态数据交互！

如法炮制！我们把详情页面也完成：

生命周期

这里涉及到了一个我们非常熟悉的知识：生命周期，我们需要在生命周期onload的时候，把数据注入到页面中。

所谓生命周期就是onload，onready之类的那一套东西，这里如果细说的话会非常的复杂。因为onshow，onhide在不同的.vue中，这里指APP.vue和子页面.vue中又稍微有所不同。
这里我整理了一个列表，感兴趣的同学可以研究研究。不愿意研究，其实你光掌握一个onload也足够你应对大多数情况了。

程序生命周期

---

生命周期	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯

页面生命周期

---

数名	说明	平台差异说明	最低版本
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	5+App、微信小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新
onReachBottom	页面上拉触底事件的处理函数
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、百度小程序、H5、5+App（自定义组件模式）
onShareAppMessage	用户点击右上角分享	微信小程序、百度小程序、头条小程序、支付宝小程序
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object	5+ App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；	5+App、H5
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	5+App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	5+App、H5	1.6.0
onNavigationBarSearchInputClicked	监听页面隐藏	5+App、H5	1.6.0

ajax

---

学会使用生命周期以后，我们接下来要进入ajax通过端口查询数据，然后渲染到页面上。
uniapp提供一个uni.request方法，帮助我们获取ajax的数据，请看例子：

 <template>
    <view>
        <view class="main">
            <view class="maintitle">{{getData.title}}</view>
            <view class="mainmore">
                <view>作者:{{getData.author}}</view>
                <view>发布时间:{{getData.time}}</view>
                <view>点击量:{{getData.click}}</view>
            </view>
            <view class="mainbody">
                <rich-text :nodes="getData.content"></rich-text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                getData:{}
            }
        },
        onLoad(options) {
            //ajax动态数据
            uni.request({
                url: 'https://youlink/article/query',
                data: {
                    id: options.id
                },
                success: (res) => {
                    //把获取来的数据保存到data中
                    this.getData = res.data.result[0]
                    console.log(this.getData);
                    
                    uni.setNavigationBarTitle({
                    　　title:res.data.result[0].title
                    })
                }
            });
        },
        methods: {
            
        }
    }
</script>

<style>
</style>

uniapp的ajax使用方法就是小程序和vue的结合。这里需要注意的是，uniapp在页面跳转的时候，可以发送一个参数，在接收的页面中通过options.xx来接收。注意看上面的例子，是在onload生命周期中接收的，options就是onload的一个参数。

goPage(id){
    //console.log(name);
    //保留原页面，打开到新页面，最多可以保留10层
    uni.navigateTo({
        url: "../../common/article/article?id="+id
    });
}

跳转的时候，可以发现id就是拼接进去的。

跨域

---

这里可能会遇到一个问题，那就是你从本地请求的端口可能会产生跨域的问题。

这里推荐两种解决方法：第一个，使用xhbuilder内置的浏览器

第二个，如果你用的是chrome浏览器，可以安装跨域插件来解决这个问题。

这个插件的名字是：Allow-Control-Allow-Origin。如果你打不开chrome插件市场的话，你可能要想办法翻墙一下。

动态标题

---

这里还有一个问题，那就是，我们页面顶部的title，是在路由pages.json中设置的，但是我们的数据是动态的。
当我们点击了某一项的时候，需要动态的修改一下标题，这个时候需要使用uniapp提供的setNavigationBarTitle方法。

uni.setNavigationBarTitle({
  title:res.data.result[0].title
})

富文本

---

上面遗漏了一个知识，就是当我们通过ajax获取到了内容以后，如果这个内容是字符串还好，但是它有可能是一个富文本，就是我们常说的内容详情。

如果内容是一段html的话，我们就不能直接放到项目中，那样是无法解析出来的。这个时候我们需要使用rich-text标签。

<rich-text :nodes="getData.content"></rich-text>

这样就可以正确解析出内容了。

到目前为止，我们已经完成了首页， 列表页和详情页。项目的基础功能已经搭建完毕了，接下来，我们将会进入其他强大功能的学习。

龙哥有话说

---

因为最近有一些忙，uniapp的教程可能会暂停一段时间，这一段时期我会给大家推荐一些轻松的教程或者龙哥故事汇的一些文章，希望大家见谅哈。