⑴ uniapp自学笔记（三）动态获取数据
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的教程可能会暂停一段时间，这一段时期我会给大家推荐一些轻松的教程或者龙哥故事汇的一些文章，希望大家见谅哈。
⑵ uniapp 页面跳转传值和接收
首先介绍最原始的跳转方法，类似于html中的 a 标签，不过在uniapp中需要将 a 标签换成
<navigator url='跳转的地址'>……</navigator>
下面我们来重点介绍下跳转传值的方法
<view @tap="toOpportnity(item.id)">转商机</view>；
写一个onLoad函数
对象传参的接收方法
单个参数的接收，这里使用id来进行介绍
首先要把传递过来的id进行赋值
请求接口，接口的url地址后面要加上传递过来的id【 /${this.id}/ 】
完整步骤如下：
对象传参报错解决方案（详细请看本篇文章： https://www.cnblogs.com/sxdpanda/p/13304425.html ）
GET : 请求页面， 并返回页面内容【问服务器要数据】。
POST : 大多用于提交表单或上传文件，数据包含在请求体中【把数据提交给服务器】。
HEAD : 类似于GET请求，只不过返回的响应中没有具体的内容，用于获取报头。
PUT : 从客户端向服务器传送的数据取代指定文档中的内容【修改服务器上的数据】。
DELETE : 请求服务器删除指定的页面。
CONNECT : 把服务器当作跳板，让服务器代替客户端访问其他页面。
OPTIONS : 允许客户端查看服务器的性能。
TRACE : 回显服务器收到的请求，主要用于测试或诊断。
⑶ uniapp上传图片至服务器，获得在线图片链接预览（实战）
功能需求：
前端选择本地文件，将选择好的文件显示在界面上进行预览，可同时选择四张进行预览。
思路如下：
前端选择本地的png、jpg、等格式的图片，将图片以二进制的形式传到后端服务器，后端对二进制图片进行处理，返回给前端一个服务器链接在线图片，在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。
首先
我们看一下uniapp的官方文档：
https://uniapp.dcloud.io/api/media/image?id=chooseimage
大概是这样的
先写一个模拟的demo
1：首先我是是用了colorUI的框架，在项目里面引入
在page底下的vue文件引入
这样一来，就不需要写什么样式了，直接使用写好的就行了。
效果是这样的
每次选完图片之后显示在页面上，我这里设置了最多可以选择四张，图片链接使用了临时的blob，接下来就要使用后端小伙伴给的接口，将自己本地的二进制文件传给他了。
在 chooseImage 选择好图片之后，写一个成功的回调函数，在回到函数里面添加一个图片上传的方法uploadFile，在方法里面添加url，等参数。
若是请求成功
则返回一个图片链接
添加接口之后 的，demo如下：
⑷ uni-app 入门到精通 （二）
18 年时候有幸接触到 uniapp , 写了一篇 《uni-app 入门到精通》 ，由于一些原因，该方案并没有执行，该项目一系列文章也就没有再写下去，所以遭受到了许多人评论的吐槽，到如今公司项目的需求又要根据 uniapp 写 H5 嵌入到 app 中，所以想根据项目实际开发分享一下，有兴趣的伙伴可以参考和吐槽。
这一篇文章主要分享一下内容
uniapp 模板项目有两种初始化方式
由于无法舍弃 VSCode ，我们采用 vue-cli 来初始化项目， HBuilderX 大家可以参照官方文档
这种方式是可以通过 vue 脚手架命令指定模板，这个是 dcloudio 的官方提供模板
我们选择默认模板即可，
成功后我们执行
打开浏览器地址，直接运行即可。
一般刚接触前端的小伙伴可能会对 postcss 不太了解，这里简单介绍一下，
当然 PostCSS 具体使用是需要引入一些插件的，例如常用的是 autoprefixer postcss-preset-env 等, 具体如何使用大家可以自行参考资料，毕竟这块知识还是挺多的就不具体展开解释了。
通常我们在写移动端时候需要做的是页面适配方案的确定， uni-app 支持的通用 css 单位包括 px、rpx ， 之前的 upx 方案已经被废弃掉，官方解释是目前市面上已经基本上支持了微信的 rpx 方案，所以 upx 中转方案已经意义不大了，不过还可以继续使用，不过已经不再推荐。
rpx 之初是由微信小程序提出一种方案，即根据宽度来进行适配以 750 宽屏幕为基准， 750rpx 恰好为屏幕宽度, uni-app 规定屏幕基准宽度 750rpx 。所以说如果你们的UI 设计以 750*1334 iphone 6/6s 为基准设计的话，你只需要将屏幕上 px 写为 rpx 即可，不用做任何换算，如果不是的话，你就需要做如下换算：
uniapp 有自己一套路由管理机制，而未采用 vue-route 方案，个人认为这套方案还是比较成熟和好用的，以及可以满足我们日常的需求:
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
2.uni.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面。
3.uni.reLaunch(OBJECT)
关闭所有页面，打开到应用内的某个页面。
注意： 如果调用了 uni.preloadPage(OBJECT)) 不会关闭，仅触发生命周期 onHide
4.uni.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
注意： 如果调用了 uni.preloadPage(OBJECT)不会关闭，仅触发生命周期 onHide
5.uni.navigateBack(OBJECT)
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
5.uni.preloadPage(OBJECT)
预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快。
以上路由API 已经满足我们的需求，当然进行路由跳转的前提是我们需要在 pages.json 进行路由配置, 包括路由和具体的样式配置
而进行具体路由跳转我们需要如下，需要多加一个 /
需要特别注意的一点是, 利用浏览器 在 进行 移动H5页面调试时候，会出现页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。
uniapp 提供网络请求的 api 是 uni.request ，具体支持的请求方法可以参考官网 method 有效值
不过我们通常不会直接使用，而是进过一系列的封装以方便我们的使用，具体封装接口使用会在随根据页面数据请求一并展示。
⑸ uniapp 中api 获取的数据怎样读取出来
根据截图推测，你可能是刚接触开发吧。
看样子你的服务端的返回是直接print_r的，这个返回是打印数组内容的。
你可以使用json_encode返回json数据，然后就可以在uniap的js中console打印出来数据了，这样就可以在小程序中的控制台看到返回了
⑹ uniapp 获取当前页面路径
uniapp获取当前页面路径
方式一：
方式二：
用官方已经挂在的 $mp 变量获取
var pages = getCurrentPages() // 获取栈实例
pages是一个数组对象，每个对象里面其实就是已经打开的页面的对象，可以根据pages.length查看跳转级数
应用场景（返回固定页面）：
如果A为根页面，直接使用
其中A页面不是根页面
如图
若从A页面-->B页面-->D页面，从D返回A，只需delta为 2，即
若从A页面-->C页面-->F页面-->G页面-->D页面，从D返回A，需要设置delta: 4，即
使用var pages = getCurrentPages() // 获取所有打开页面，
若A为第三级页面（即从根页面到A页面跳转两次），计算返回级数
⑺ uni-app获取dom节点信息
首先明白一点，uni-app提供的view、button、image、text通通都是组件，不是h5的标签，虽然用起来方便，但如果你想获取dom节点信息，尽管给组件绑定一个id选择器，用document.getElementById()等这种传统的JS获取dom方式是没有任何效果。
因为他们是组件，除非你不用这些现成的组件，用回h5的标签。
所以你如果想获取uni-app提供组件的DOM元素，需要如下的方法。
uni.createSelectorQuery().in(this);用于创建一个实例。
in(this)在这里是为了规范页面创建实例，避免获取不到实例报null，用上总没错
query.select('#text')用于选择DOM节点
boundingClientRect()返回dom节点的相关信息
拿到的是一些元素本身的宽高信息、距离页面四边的距离。
使用uni.createSelectorQuery()创建dom实例，需要在这个mounted()生命周期里面进行，这个生命周期它代表组件已经创建完成，可以挂载实例，进而获取dom元素
如果不写在mounted生命周期里，你也可以写在methods方法定义里面，不过你需要这样来调用。
⑻ uniapp中如何获取网页地址参数
uniapp 中要获取地址 http://xxxxxxx/#/pages/my/index ?id=124 的参数
1:获取本页面的地址
let local = location.href;
2：获取参数
let payment_id = this.getParam(local, "payment_id");
//获取url中的参数
getParam(path, name) {
var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
if (reg.test(path))
return unescape(RegExp.$2.replace(/\+/g, " "));
return "";
}
⑼ uni-app h5界面开发，获取本页URL信息
开发单独的h界面，对接到其他的模块中去，会用到这些方法，因为其他界面只有通过URL附带参数的方式传值：
⑽ uniapp带参返回上一页功能实现
在uniapp开发过程中经常会遇到这种情况：
列表页面A点击item进入详情页B，详情页B进行操作后返回A列表页并从A列表移除刚才操作的item，或者修改item的值，又或者返回之后直接刷新。
由于uniapp的uni.navigateBack没有提供带参的返回方法，所以我们只能另辟蹊径。
这里我要实现的场景是A列表点击item跳转B页面，B页面提交表单后，点击完成按钮，返回A列表页，并刷新当前列表组件（refs="apply"）
我们注意到uniapp中可以通过getCurrentPages()获取页面栈。
我们先在A页面data中定义：
并在onShow中获取当前页面对象currPage:
将页面对象遍历出来可以看到currPage中有一个属性 vm.(data中的值)可以取到当前页面data中的值，所以onShow中：
接着在详情页面B中点击完成按钮获取上个页面对象prevPage：
修改上个页面的值并返回上个页面：
此处修改的值在A页面的onShow中即可获取到，根据onShow中取到的值再进行判断是否需要刷新列表组件。
需要注意的是：
1、当A页面为tabBar页面时，从B页面使用uni.navigateBack返回A页面时，不会触发onShow生命周期（不知道是框架bug还是有意设置区别），建议使用：
即可正常触发onShow
2、通过$vm修改data值在app-plus中可以使用，在微信小程序中需要使用
的方法进行赋值