uniapp自学笔记（三）动态获取数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uniapp自学笔记（三）动态获取数据相关的知识，希望对你有一定的参考价值。
参考技术A ok，我们目前已经完成了首页，如果我们只是为了制作一个文章系统的话，首页+列表页+详情页已经足够满足我们的使用了。所以我们开始在pages中创建这俩页面。
现在pages.json路由中增加这俩：
前面我们首页中的icon列表是一个静态页面页，我们需要连接才能跳转到列表页面。
这里我们需要用到uniapp内置的跳转方法：
这里我们先把页面之间的跳转关系完成，完成后，我们会在页面之间传递参数，再通过ajax完成动态数据交互！
如法炮制！我们把详情页面也完成：
这里涉及到了一个我们非常熟悉的知识：生命周期，我们需要在生命周期onload的时候，把数据注入到页面中。
所谓生命周期就是onload，onready之类的那一套东西，这里如果细说的话会非常的复杂。因为onshow，onhide在不同的.vue中，这里指APP.vue和子页面.vue中又稍微有所不同。
这里我整理了一个列表，感兴趣的同学可以研究研究。不愿意研究，其实你光掌握一个onload也足够你应对大多数情况了。
学会使用生命周期以后，我们接下来要进入ajax通过端口查询数据，然后渲染到页面上。
uniapp提供一个uni.request方法，帮助我们获取ajax的数据，请看例子：
uniapp的ajax使用方法就是小程序和vue的结合。这里需要注意的是，uniapp在页面跳转的时候，可以发送一个参数，在接收的页面中通过options.xx来接收。注意看上面的例子，是在onload生命周期中接收的，options就是onload的一个参数。
跳转的时候，可以发现id就是拼接进去的。
这里可能会遇到一个问题，那就是你从本地请求的端口可能会产生跨域的问题。
这里推荐两种解决方法：第一个，使用xhbuilder内置的浏览器
第二个，如果你用的是chrome浏览器，可以安装跨域 插件 来解决这个问题。
这个插件的名字是：Allow-Control-Allow-Origin。如果你打不开chrome插件市场的话，你可能要想办法翻墙一下。
这里还有一个问题，那就是，我们页面顶部的title，是在路由pages.json中设置的，但是我们的数据是动态的。
当我们点击了某一项的时候，需要动态的修改一下标题，这个时候需要使用uniapp提供的setNavigationBarTitle方法。
上面遗漏了一个知识，就是当我们通过ajax获取到了内容以后，如果这个内容是字符串还好，但是它有可能是一个富文本，就是我们常说的内容详情。
如果内容是一段html的话，我们就不能直接放到项目中，那样是无法解析出来的。这个时候我们需要使用rich-text标签。
这样就可以正确解析出内容了。
到目前为止，我们已经完成了首页， 列表页和详情页。项目的基础功能已经搭建完毕了，接下来，我们将会进入其他强大功能的学习。
因为最近有一些忙，uniapp的教程可能会暂停一段时间，这一段时期我会给大家推荐一些轻松的教程或者龙哥故事汇的一些文章，希望大家见谅哈。
jQuery 自学笔记
文章目录
一、动态创建元素
1、原生 js 创建节点
document.createElement(); 注：创建元素节点
document.createTextNode(); 注：创建文本节点
2、jQuery 创建节点
-
html()：设置或者获取内容
- 获取内容：html()方法不给参数
- 设置内容：html()方法给参数
$('#btnHtml1').click(function () //1. 获取内容，获取到元素的所有内容 console.log($('#div1').html()); //2. 设置内容，会把原来的内容给覆盖，如果设置的内容中包括标签，会把标签给解析出来的 $('#div1').html('我是设置的内容<a href="https://www.baidu.com">百度搜索</a>'); ) -
$()
确实能创建元素，但创建元素只存在于内存中，如果要在页面上显示，就要追加 append，不会覆盖。$('#btn1').click(function () var $link = $('<a href="https://www.baidu.com">百度搜索</a>'); $('#div1').append($link);//追加 )
二、jQuery 添加结点的几种方式
2.1 append()
语法：父元素.append(子元素); 作为最后一个子元素添加
-
新创建一个节点，添加到父元素的尾部
var liNew = $("<li>我是新创建的li标签</li>"); $('#ul').append(liNew); -
若该节点已经存在，则剪切后作为最后一个子元素添加到父元素的尾部
var li3 = $('#li3'); $('#ul').append(li3);
2.2 prepend()
语法： 父元素.prepend(子元素); 作为第一个子元素添加.
和 append 效果正好相反
-
新创建一个节点，添加到父元素的首部
-
若该节点已经存在，则剪切后作为最后一个子元素添加到父元素的首部
2.3 after()
语法： 元素A.before(元素B); 把 元素B 插入到 元素A 的后面，作为兄弟元素添加
-
新创建一个元素，作为兄弟元素添加到兄弟元素之后
-
若该元素已经存在，则剪切后作为兄弟元素添加到兄弟元素之后
$('#afterBtn1').click(function () var li2_3 = $('<li>我是新建的li</li>'); $('#li3').after(li2_3);//加到第 3 个 li 元素之后 ) $('#afterBtn2').click(function () var li3 = $('#li3'); $('#li5').after(li3);//将 id 为 li3 的元素添加到 id 为 li5 的元素之后 )
2.4 before()
语法： 元素A.before(元素B); 把 元素B 插入到 元素A 的前面，作为兄弟元素添加
- 新创建一个元素，作为兄弟元素添加到兄弟元素之前
- 若该元素已经存在，则剪切后作为兄弟元素添加到兄弟元素之前
2.5 appendTo()
语法：content.appendTo(selector); 在被选元素的结尾插入 HTML 元素
$('#btnAppendTo').click(function ()
var $liNew = $("<li>我是新创建的li标签</li>");
$liNew.appendTo($('#ul')); //在 ul 列表中添加 li 标签
)
三、清空节点与移除节点
-
清空节点： empty()
$('#ul').html(); 不推荐使用，有可能在造成内存泄露，不安全
$('#ul').empty(); 推荐使用 ul标签还在，ul标签里面的内容被清空 -
移除节点：remove()
$('#li3').remove(); 实际上调用了父级元素删除自己 的元素机制
$('#li3').parent().remove(); ul标签不在
四、克隆节点
jQuery中克隆节点，使用 clone()。只存在内存中，如果要在页面上显示，就要追加到页面上。
注意： clone() 方法参数无论是 true 还是 false ，都会克隆到后代节点的。
区别：
- clone() 方法参数是 true 会把事件（例如：点击事件）一起克隆
- clone() 方法参数是 false 会把事件（例如：点击事件）不会克隆
默认不写参数是false
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>样式省略...</style>
</head>
<body>
<div id="text">
<input type="button" value="方法参数 false" id="clone1"/> 
<input type="button" value="方法参数 true" id="clone2"/>
</div>
<br>
<div id="div1">
<span>span1</span>
</div>
</body>
</html>
<script src="jquery-3.4.1.min.js"></script>
<script>
$(function ()
//给id位 div1 的 div 标签添加点击事件
$('#div1').click(function ()
alert('我被点击了')
)
$('#clone1').click(function ()
var $cloneDiv = $('#div1').clone(false);
//修改克隆节点的id
$cloneDiv.attr('id','div2');
//把克隆的节点追加到body中
$('body').append($cloneDiv);
)
$('#clone2').click(function ()
var $cloneDiv = $('#div1').clone(true);
$cloneDiv.attr('id','div3');
$('body').append($cloneDiv);
)
);
</script>
五、val() 方法：设置/获取表单内容
- 原生 js 是通过 value 属性来获取或者设置表单元素的值.
- jQuery中用 val()，设置或者获取表单元素的值的
5.1 获取 value
val() 方法不给参数
如：console.log($('#txt').val()); //控制台打印 id 为 txt 标签的 value 值
5.2 设置 value
给参数就是设置
$('#txt').val('新设置的内容'); //给 id 为 txt 标签赋予新设置的 value 值
以上是关于uniapp自学笔记（三）动态获取数据的主要内容，如果未能解决你的问题，请参考以下文章