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

ok，我们目前已经完成了首页，如果我们只是为了制作一个文章系统的话，首页+列表页+详情页已经足够满足我们的使用了。

所以我们开始在pages中创建这俩页面。

现在pagesjson路由中增加这俩：

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

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

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

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

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

所谓生命周期就是onload，onready之类的那一套东西，这里如果细说的话会非常的复杂。因为onshow，onhide在不同的vue中，这里指APPvue和子页面vue中又稍微有所不同。

这里我整理了一个列表，感兴趣的同学可以研究研究。不愿意研究，其实你光掌握一个onload也足够你应对大多数情况了。

学会使用生命周期以后，我们接下来要进入ajax通过端口查询数据，然后渲染到页面上。

uniapp提供一个unirequest方法，帮助我们获取ajax的数据，请看例子：

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

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

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

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

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

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

这里还有一个问题，那就是，我们页面顶部的title，是在路由pagesjson中设置的，但是我们的数据是动态的。

当我们点击了某一项的时候，需要动态的修改一下标题，这个时候需要使用uniapp提供的setNavigationBarTitle方法。

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

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

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

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

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

取代说不上，但是相对来说uniapp开发比原生开发好很多。

作为前端工程师，除了微信小程序，还要开发web、其他小程序甚至App，人们不喜欢来回切换开发工具和变更语法思考方式。

uni-app自然可以解决这些问题，但开发者又经常有些顾虑：

怕使用uni-app后，微信小程序里有的功能无法实现，受制于uni-app的更新。怕性能不如原生WXML。怕框架不成熟，跳到坑里。担心社区生态不完善。

uin-app 和原生开发是有很大差别的，至少在性能和需求覆盖度上会差很多。uin-app 框架使用的其实是 cordova 的进阶版，也就是把 web 代码打包到本地，本地实质上还是通过 WebView 运行，那性能的瓶颈不言而喻。

另外 uni-app 支持使用 Weex 框架拓展性能，本质上是通过桥的功能把 Vue 控件映射为原生控件进行渲染，效果和 react-native 差不多，虽然性能有所提升，但是和原生相比差距还是有的。

另外 uni-app 在设计到手机的硬件调用，通信和多线程问题上还是得回归到原生平台，一般 200 多个页面业务的 App 不大可能都只是纯 UI 展示。

具体数据对比我这里没有，不过可以总结下就是：uni-app 特别实用 vue 的开发人员，并且在业务逻辑并不复杂的场景是很实用的跨平台开发工具，但是面对 100-200 个页面的需求肯定是不行的。

这里的通信主要测试环境是打包 APP 端和 web-view 内嵌网页的双向通信。

一、 内嵌网页向 uni-app 通信

参考文章： uniapp web-view

三、 实现案例

以上就是关于uniapp自学笔记（三）动态获取数据全部的内容，包括:uniapp自学笔记（三）动态获取数据、uniapp会取代原生开发吗、uni-app 与 web-view内嵌网页 双向通信等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！